Remixes of pebblelife.com
Latest remixes
No public remixes yet. Be the first to make one.
Remix itLatest remixes
No public remixes yet. Be the first to make one.
Remix itSwitch between the rendered Visual preview and the Raw DESIGN.md.
version: alpha
name: Pebblelife
description: |
Pebble Flow's design system embodies a contemporary, minimalist aesthetic
grounded in natural materials and sustainable living. The visual language is
purposefully calm and aspirational, evoking the freedom and possibility of
mobile living without overwhelming the user. Warm, earthy tones dominate the
palette—soft beiges and taupe surfaces create a tactile, approachable
foundation—while a vibrant peachy-orange accent (#FF8D5B) injects energy and
draws attention to calls-to-action. The typography employs bold, geometric
display faces at heroic scales alongside refined body text, creating a
sophisticated hierarchy that balances modernity with accessibility.
Photography of the vehicle in natural environments and human moments grounds
the abstract design, making aspiration feel achievable.
source:
url: "https://pebblelife.com/"
pagesAnalyzed: 6
extractedAt: 2026-10-30
tokensMeasured: true
colors:
primary: "#FF8D5B"
canvas: "#EFEBE5"
surface: "#D7D1C6"
on-primary: "#3C4235"
ink: "#3C4235"
body: "#495057"
muted: "#726A5A"
faint: "#A39B8B"
hairline: "#FFFFFF"
accent-1: "#575249"
neutral-1: "#000000"
typography:
display-xxl:
fontFamily: Youth
fontSize: 104px
fontWeight: 500
lineHeight: 1
letterSpacing: -4px
display-xl:
fontFamily: Youth
fontSize: 63.9662px
fontWeight: 500
lineHeight: 1
letterSpacing: -2.56px
display-lg:
fontFamily: Youth
fontSize: 63.9493px
fontWeight: 500
lineHeight: 1
letterSpacing: -2.56px
display-md:
fontFamily: Youth
fontSize: 47.983px
fontWeight: 500
lineHeight: 1
letterSpacing: -1.92px
heading-xl:
fontFamily: Youth
fontSize: 39.9662px
fontWeight: 500
lineHeight: 1
letterSpacing: -0.8px
heading-lg:
fontFamily: Youth
fontSize: 39.9344px
fontWeight: 500
lineHeight: 1
letterSpacing: -0.8px
heading-md:
fontFamily: Youth
fontSize: 28px
fontWeight: 500
lineHeight: 1
letterSpacing: -0.56px
heading-sm:
fontFamily: Youth
fontSize: 27.9514px
fontWeight: 400
lineHeight: 1
letterSpacing: -0.56px
heading-xs:
fontFamily: aeonikMedium
fontSize: 18px
fontWeight: 500
lineHeight: 1.3
letterSpacing: 0.18px
quote:
fontFamily: Aeonik
fontSize: 21.9513px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 1px
body-md:
fontFamily: aeonikMedium
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0.16px
body-md-tight:
fontFamily: aeonikMedium
fontSize: 16px
fontWeight: 500
lineHeight: 1
letterSpacing: 0.16px
body-md-2:
fontFamily: aeonikMedium
fontSize: 16px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0.22px
body-md-strong:
fontFamily: aeonikMedium
fontSize: 16px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0.16px
body-sm:
fontFamily: aeonikMedium
fontSize: 14px
fontWeight: 500
lineHeight: 1.45
letterSpacing: 0px
body-sm-tight:
fontFamily: aeonikMedium
fontSize: 14px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0.16px
button-lg:
fontFamily: aeonikMedium
fontSize: 16px
fontWeight: 500
lineHeight: 1.3
letterSpacing: 0.16px
button-lg-strong:
fontFamily: Aeonik
fontSize: 16px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
button-md:
fontFamily: Aeonik
fontSize: 15px
fontWeight: 700
lineHeight: 1.5
letterSpacing: 0px
button-sm:
fontFamily: aeonikMedium
fontSize: 14px
fontWeight: 500
lineHeight: 1.3
letterSpacing: 0px
button-sm-strong:
fontFamily: Aeonik
fontSize: 14px
fontWeight: 600
lineHeight: 1.5
letterSpacing: 0px
button-xs:
fontFamily: "Aeonik Fono"
fontSize: 11px
fontWeight: 500
lineHeight: 1
letterSpacing: 0.88px
textTransform: uppercase
label:
fontFamily: Aeonik
fontSize: 16px
fontWeight: 400
lineHeight: 1.5
letterSpacing: 0px
caption-sm:
fontFamily: Aeonik
fontSize: 14.4px
fontWeight: 500
lineHeight: 1.2
letterSpacing: 0.22px
caption-xs:
fontFamily: aeonikMedium
fontSize: 12px
fontWeight: 500
lineHeight: 1.5
letterSpacing: 0px
rounded:
none: 0px
xs: 5px
sm: 10px
md: 12px
lg: 16px
xl: 24px
spacing:
xxs: 4px
xs: 8px
sm: 12px
md: 16px
lg: 24px
xl: 28px
xxl: 32px
xxxl: 40px
section: 48px
band: 80px
borderWidths:
thin: 1px
medium: 2px
elevationStrategy: color-blocking
themes:
derived: dark # the other theme is the site's measured palette
light:
bg: "#EFEBE5"
surface: "#D7D1C6"
surfaceRaised: "#D1CBC0"
text: "#3C4235"
textMuted: "#495057"
border: "#FFFFFF"
accent: "#F44A00"
accentFg: "#000000"
focusRing: "#FF8D5B"
elevation: shadow
dark:
bg: "#130E0C"
surface: "#211C1B"
surfaceRaised: "#2D2927"
text: "#FFFAF8"
textMuted: "#A5A09E"
border: "#393533"
accent: "#FF8D5B"
accentFg: "#0B0B0C"
focusRing: "#FF8D5B"
elevation: "border+surface"
gradients:
- context: section
kind: linear
value: "linear-gradient(115deg, rgba(0, 0, 0, 0) 35%, rgba(255, 255, 255, 0.22) 48%, rgba(0, 0, 0, 0) 62%)"
components:
button-primary:
typography: "{typography.body-md-tight}"
textColor: "{colors.ink}"
border: "1px solid {colors.primary}"
height: 56px
padding: "0px 16px 0px 16px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.primary}"
button-filled:
typography: "{typography.body-md-tight}"
textColor: "{colors.ink}"
height: 56px
padding: "0px 16px 0px 16px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.surface}"
button-secondary:
typography: "{typography.body-md-tight}"
textColor: "{colors.hairline}"
height: 56px
padding: "19px 16px 19px 16px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.on-primary}"
button-filled-2:
typography: "{typography.body-md-tight}"
textColor: "{colors.ink}"
height: 56px
padding: "19px 16px 19px 16px"
rounded: "{rounded.sm}"
backgroundColor: "{colors.hairline}"
button-icon:
typography: "{typography.label}"
textColor: "{colors.ink}"
height: 52px
rounded: "{rounded.sm}"
backgroundColor: "{colors.hairline}"
button-text:
typography: "{typography.button-md}"
textColor: "{colors.ink}"
height: 22.5px
card:
typography: "{typography.label}"
textColor: "{colors.ink}"
rounded: "{rounded.xl}"
backgroundColor: "{colors.surface}"
card-lg:
typography: "{typography.label}"
textColor: "{colors.ink}"
padding: "16px 0px 120px 0px"
navigation:
typography: "{typography.label}"
textColor: "{colors.ink}"
height: 56px
footer:
typography: "{typography.label}"
textColor: "{colors.ink}"
padding: "80px 0px 64px 0px"
backgroundColor: "{colors.surface}"
link:
typography: "{typography.body-md-tight}"
textColor: "{colors.ink}"
padding: "0px 16px 0px 16px"
rounded: "{rounded.sm}"
link-2:
typography: "{typography.label}"
textColor: "{colors.ink}"
rounded: "{rounded.sm}"
badge-filled:
textColor: "{colors.hairline}"
height: 28.8438px
padding: "5px 12px 5px 12px"
fontSize: 13px
fontFamily: Aeonik
fontWeight: 400
lineHeight: 1.45
rounded: "{rounded.xs}"
backgroundColor: "rgb(33, 37, 41)"
badge-text:
textColor: "{colors.hairline}"
fontSize: 13px
fontFamily: Aeonik
fontWeight: 700
lineHeight: 1.45
states:
other-focus:
target: other
state: focus
outline: none
other-focus-visible:
target: other
state: focus-visible
outline: "solid 1px"
outlineWidth: 1px
other-disabled:
target: other
state: disabled
opacity: 0.4
other-hover:
target: other
state: hover
transform: "scale(1.05)"
other-active:
target: other
state: active
outline: none
link-hover:
target: link
state: hover
textDecoration: "underline 2px"
input-focus:
target: input
state: focus
boxShadow: "rgba(255, 255, 255, 0.28) 0px 0px 0px 3px"
button-focus:
target: button
state: focus
outline: "-webkit-focus-ring-color auto 5px"
outlineColor: -webkit-focus-ring-color
outlineWidth: 5px
breakpoints:
- width: 375
containerWidth: 375
gridColumns: 1
navLinksVisible: 34
menuToggleVisible: true
headingPx: 64
bodyPx: 16
sectionPaddingX: 0
- width: 768
containerWidth: 768
gridColumns: 1
navLinksVisible: 34
menuToggleVisible: true
headingPx: 79
bodyPx: 16
sectionPaddingX: 0
- width: 1024
containerWidth: 1024
gridColumns: 1
navLinksVisible: 39
menuToggleVisible: true
headingPx: 88
bodyPx: 16
sectionPaddingX: 0
- width: 1280
containerWidth: 1280
gridColumns: 1
navLinksVisible: 39
menuToggleVisible: true
headingPx: 98
bodyPx: 16
sectionPaddingX: 0
- width: 1440
containerWidth: 1440
gridColumns: 1
navLinksVisible: 39
menuToggleVisible: true
headingPx: 104
bodyPx: 16
sectionPaddingX: 0
coverage:
statesFound: 47
gradientsFound: 1
rolesUnassigned: 2
archetypesUnnamed: 0
archetypesDetected: 0
responsiveMeasured: true
stylesheetsBlocked: true
semanticRampDeclared: false
Pebble Flow's design system embodies a contemporary, minimalist aesthetic grounded in natural materials and sustainable living. The visual language is purposefully calm and aspirational, evoking the freedom and possibility of mobile living without overwhelming the user. Warm, earthy tones dominate the palette—soft beiges and taupe surfaces create a tactile, approachable foundation—while a vibrant peachy-orange accent ({colors.primary} — #FF8D5B) injects energy and draws attention to calls-to-action. The typography employs bold, geometric display faces at heroic scales alongside refined body text, creating a sophisticated hierarchy that balances modernity with accessibility. Photography of the vehicle in natural environments and human moments grounds the abstract design, making aspiration feel achievable.
Key Characteristics
{colors.primary} — #FF8D5B): Primary call-to-action buttons, brand accent in hero banners, active states, and accent emphasis. Warm, welcoming, and energetic.{colors.canvas} — #EFEBE5): Default page background; soft, warm off-white that provides breathing room and reduces visual fatigue.{colors.surface} — #D7D1C6): Card and panel backgrounds; mid-tone beige used for contained content areas and footer backgrounds.{colors.on-primary} — #3C4235): Primary heading and label text; dark olive-toned ink used on brand-coloured surfaces and as the dominant heading colour.{colors.body} — #495057): Body copy and descriptive text; slightly warm gray that ensures readability over light backgrounds.{colors.muted} — #726A5A): Captions, secondary text, and de-emphasized content; warm mid-tone gray for hierarchical text reduction.{colors.faint} — #A39B8B): Tertiary text, placeholder text, and very light emphasis; subtle taupe for lowest-priority information.{colors.hairline} — #FFFFFF): 1px borders and dividers; pure white creates crisp separation between elements.{colors.accent-1} — #575249): No measured role; treated as decorative or used in edge cases. Warm charcoal with potential for dark backgrounds or accent layers.{colors.neutral-1} — #000000): True black; minimal measured use; reserved for high-contrast hierarchy or rare edge cases.Primary (Display & Headings): Youth
Youth, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serifSecondary (Body & UI): Aeonik, aeonikMedium
Aeonik, aeonikMedium, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display XXL | Youth | 104px | 500 | 1 | -4px | Hero headline; maximum scale; tight leading for impact |
| Display XL | Youth | 63.97px | 500 | 1 | -2.56px | Large hero text; marked negative tracking |
| Display LG | Youth | 63.95px | 500 | 1 | -2.56px | Alternative large hero; consistent with XL scale |
| Display MD | Youth | 47.98px | 500 | 1 | -1.92px | Medium-scale emphasis; reduced tracking from larger scales |
| Heading XL | Youth | 39.97px | 500 | 1 | -0.8px | Section headers and major content blocks |
| Heading LG | Youth | 39.93px | 500 | 1 | -0.8px | Alternative XL scale; measured on h2 tags |
| Heading MD | Youth | 28px | 500 | 1 | -0.56px | Subsection headers; consistent vertical rhythm |
| Heading SM | Youth | 27.95px | 400 | 1 | -0.56px | Secondary heading; lighter weight variant |
| Heading XS | Youth / Aeonik | 18px | 500 | 1.3 | 0.18px | Small headings; h3–h5 tags; positive tracking |
| Button LG | aeonikMedium | 16px | 500 | 1.3 | 0.16px | Large button text; primary CTA labels |
| Button LG Strong | Aeonik | 16px | 600 | 1.5 | 0px | Bold button variant; secondary CTA |
| Button MD | Aeonik | 15px | 700 | 1.5 | 0px | Medium button; bold weight for emphasis |
| Button SM | aeonikMedium | 14px | 500 | 1.3 | 0px | Compact button; secondary actions |
| Button SM Strong | Aeonik | 14px | 600 | 1.5 | 0px | Bold small button variant |
| Button XS | Aeonik Fono | 11px | 500 | 1 | 0.88px | Minimal button; uppercase; high tracking |
| Body MD | aeonikMedium | 16px | 500 | 1.5 | 0.16px | Primary body copy; standard paragraph text |
| Body MD (variant) | aeonikMedium | 16px | 500 | 1.5 | 0.22px | Alternative body; broader tracking |
| Body MD Tight | aeonikMedium | 16px | 500 | 1 | 0.16px | Compact body; link text; reduced line height |
| Body MD Strong | aeonikMedium | 16px | 600 | 1.5 | 0.16px | Emphasis variant; semi-bold |
| Body SM | aeonikMedium | 14px | 500 | 1.45 | 0px | Reduced body text; supplementary content |
| Body SM Tight | aeonikMedium | 14px | 500 | 1.2 | 0.16px | Compact small text; tight leading |
| Caption XS | aeonikMedium | 12px | 500 | 1.5 | 0px | Minimal caption; image credits, dates |
| Caption SM | Aeonik | 14.4px | 500 | 1.2 | 0.22px | Small caption; alternative sizing |
| Quote | Aeonik | 21.95px | 500 | 1.2 | 1px | Testimonial or blockquote; high tracking |
| Label | Aeonik | 16px | 400 | 1.5 | 0px–0.16px | Form labels; lightweight; consistent height |
Primary Button
{colors.primary} (#FF8D5B){colors.on-primary} (#3C4235)0px 16px1px solid {colors.primary} (#FF8D5B){rounded.sm} (10px)Filled Button (Secondary)
{colors.surface} (#D7D1C6){colors.on-primary} (#3C4235)0px 16px1px solid transparent{rounded.sm} (10px)Dark / Tertiary Button
{colors.on-primary} (#3C4235){colors.hairline} (#FFFFFF)19px 16px1px solid transparent{rounded.sm} (10px)Filled Light Button (Quaternary)
{colors.hairline} (#FFFFFF){colors.on-primary} (#3C4235)19px 16px1px solid transparent{rounded.sm} (10px)Icon Button
{colors.hairline} (#FFFFFF){colors.on-primary} (#3C4235){rounded.sm} (10px)Text / Link Button
{colors.on-primary} (#3C4235)Default Card
{colors.surface} (#D7D1C6){rounded.xl} (24px){colors.on-primary} (#3C4235)Large Card / Container
16px 0px 120px 0px{colors.on-primary} (#3C4235)Default Navigation Bar
{colors.on-primary} (#3C4235)Default Footer
{colors.surface} (#D7D1C6)80px 0px 64px 0px (vertical spacing defined by {spacing.band} and {spacing.xxl}){colors.on-primary} (#3C4235)Default Link
{colors.on-primary} (#3C4235)0px 16px1px solid transparent{rounded.sm} (10px)Icon Link
{rounded.sm} (10px){colors.on-primary} (#3C4235)Filled Badge
#212529 (dark charcoal; measured as rgb(33, 37, 41)){colors.hairline} (#FFFFFF)5px 12px{rounded.xs} (5px)Text Badge
{colors.hairline} (#FFFFFF)Base Unit: 4px ({spacing.xxs})
Scale (cumulative and contextual):
{spacing.xxs} = 4px — micro separations; icon-to-text gaps{spacing.xs} = 8px — very tight; inline element spacing{spacing.sm} = 12px — compact padding within buttons and inputs{spacing.md} = 16px — standard padding; button height component; inter-line spacing{spacing.lg} = 24px — comfortable section padding; card-to-card gaps{spacing.xl} = 28px — larger component padding{spacing.xxl} = 32px — footer padding; major section gaps{spacing.xxxl} = 40px — large content blocks{spacing.section} = 48px — major section separation on standard layouts{spacing.band} = 80px — full-width section padding; hero band vertical padding; maximum visual breathing roomUsage Context:
{spacing.sm} to {spacing.md} (12px–16px){spacing.lg} (24px){spacing.section} (48px) or {spacing.band} (80px){spacing.band} (80px) top, {spacing.xxl} (32px) bottom{spacing.md} — 16px at smaller viewports; scales with layout)Pebble Flow employs generous whitespace as a core design principle. Large display typography is surrounded by generous top and bottom margins, allowing text to breathe and command attention. Section padding uses {spacing.band} (80px) to create clear visual breaks between content. Card-based layouts and hero sections use 24px ({spacing.lg}) internal spacing to ensure content feels unhurried and premium. The layout never feels crowded; instead, whitespace guides the eye and emphasizes key content hierarchically.
| Value | Token | Components | Notes |
|---|---|---|---|
| 0px | {rounded.none} | Images, large containers | Sharp, hard edges for images and full-bleed sections |
| 5px | {rounded.xs} | Badges | Subtle rounding; minimal visual softening |
| 10px | {rounded.sm} | Buttons, links, icon buttons | Primary interactive rounding; friendly but controlled |
| 12px | {rounded.md} | Form inputs, secondary elements | Medium rounding; consistency with button family |
| 16px | {rounded.lg} | — | Measured in data; not observed in current components |
| 24px | {rounded.xl} | Cards, large containers | Generous rounding; premium, friendly aesthetic |
1px): Button borders, input focus rings (measured on button and input elements)2px): Input focus rings, emphasis borders (measured on input element; link hover underline at 2px)The design system employs color-blocking as its primary depth mechanism. Rather than layered shadows, visual hierarchy emerges from shifts in surface color (Canvas → Surface → darker overlays). This creates a flat, modern aesthetic grounded in craft and materiality rather than skeuomorphic depth. Measured shadows are minimal and near-transparent, serving as subtle refinement rather than primary depth cues.
| Level | Treatment | Use |
|---|---|---|
| Flat / Base | No shadow | Default cards, backgrounds, typography |
| Micro (SM) | rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px | Navigation; effectively no shadow; measured but negligible |
| Minimal (MD) | rgba(215, 209, 198, 0) 0px 0px 0px 5.73454e-06px, rgba(0, 0, 0, 0) 0px 4.58763e-05px 0.000137629px 0px | Navigation; near-imperceptible lift; practical effect is flat |
Shadow Philosophy: The system avoids dramatic shadows. Depth is signaled through color contrast and surface changes, not through shadow layering. This reinforces the brand's modern, understated aesthetic and ensures clarity across all contexts (print, web, mobile).
0.20) — Very subtle overlay or disabled state; minimal visual change0.40) — Medium disabled state or overlay emphasis0.50) — Standard disabled button or inactive state; clear reduction in emphasis0.60) — Semi-transparent overlay; readable but recessed0.72) — High-opacity variant; approaching near-full visibility with gentle transparencyOpacity is used to indicate disabled states, overlay transparency, and hover transitions (measured from stylesheets).
| Context | Z-index | Role | Notes |
|---|---|---|---|
| Base layers | 1, 2, 3, 4 | Content, cards, sections | Sequential stacking for primary layout |
| Dropdown / Overlay | 10 | Modals, dropdowns, popovers | Clear separation from base content |
| High-priority overlay | 99 | Toast notifications, top-level modals | Maximum z-index for critical messaging |
{colors.primary} — #FF8D5B) sparingly — Reserve it for critical CTAs (Order buttons, primary links) and brand moments. Overuse dilutes impact and breaks the hierarchy.{spacing.section} to {spacing.band}) of breathing room top and bottom. This is non-negotiable for luxury positioning.{spacing.sm}) gap between stacked buttons.{colors.canvas} to {colors.surface}) to separate sections and create depth without shadows.{colors.hairline} (#FFFFFF) — Use white hairline borders to subtly separate elements on light backgrounds; never use dark borders.{rounded.none} (0px). Rounded images break the product photography hierarchy and appear unfinished.{colors.accent-1} — #575249) as a semantic or primary color — This unassigned colour is decorative only. Never promote it to primary CTA or heading text.{colors.on-primary} for headings, {colors.body} for body text, {colors.muted} for captions. Do not introduce grays or new accent hues.{spacing.band} (80px) to all section padding — Use 48px ({spacing.section}) for standard sections, 80px only for major visual breaks (hero sections, footer, key landings).| Breakpoint | Viewport Width | Content Column | Grid Columns | Nav Links Visible | Menu Toggle | Key Changes |
|---|---|---|---|---|---|---|
| Mobile | 375px | 375px | 1 | 34 links | Yes | Base single-column; standard body 16px; largest heading 64px |
| Tablet | 768px | 768px | 1 | 34 links | Yes | Single column maintained; heading scale increases to 79px; padding adjusts |
| Small Desktop | 1024px | 1024px | 1 | 39 links | Yes | Heading scale 88px; consistent single-column flow |
| Desktop | 1280px | 1280px | 1 | 39 links | Yes | Heading scale 98px; max-width container active |
| Large Desktop | 1440px | 1440px | 1 | 39 links | Yes | Maximum scale; heading 104px; full viewport utilization |
Breakpoint Notes:
{spacing.sm} (12px) minimum gap between adjacent buttons or interactive elementsMobile interfaces must ensure all interactive elements meet the 52–56px minimum and are separated by at least 12px to prevent accidental mis-taps.
Single-Column Reflow:
For rapid CTA and surface decisions, use this condensed mapping:
#FF8D5B) — warm peachy-orange for "Order" buttons, hero accents, active states#EFEBE5) — soft warm off-white; default page background#D7D1C6) — mid-tone beige for contained areas and footer#3C4235) — dark olive; all headings and primary labels#495057) — warm gray; standard paragraph text#726A5A) — captions and reduced-priority text#A39B8B) — lightest text; placeholders and hints#FFFFFF) — crisp white 1px borders#3C4235) — dark backgrounds for secondary buttons#FFFFFF) — white backgrounds for tertiary buttonsDisplay typography must use Youth font with negative letter-spacing. All headings 28px and above use Youth, weight 500, with letter-spacing ranging from -4px (104px) to -0.56px (28px). Confirm this is applied to all h1–h4 equivalents.
Primary CTA is always {colors.primary} (#FF8D5B) with 1px border. Order buttons, main call-to-action links, and hero accents use this color exclusively. All other button styles are neutral (surface, dark, or light).
Body copy uses aeonikMedium, 16px, weight 500, line-height 1.5, letter-spacing 0.16px. This is the system default. Do not deviate for standard paragraph text; use alternate roles only for captions, labels, or buttons.
Button height is always 56px; icon buttons are 52px. No exceptions. Padding is 0px 16px for standard buttons, 0px for icon buttons. Border radius is 10px ({rounded.sm}).
Single-column layout is fixed across all breakpoints. Content does not reflow into multi-column grids. Button groups may stack vertically on mobile (below 1024px), but the primary layout column remains singular.
Cards use 24px border-radius ({rounded.xl}) and {colors.surface} background. This rounding style is specific to cards; other components use {rounded.sm} (10px). Never apply card radius to buttons or other UI elements.
Whitespace is measured in {spacing.band} (80px) for major sections and {spacing.section} (48px) for standard breaks. Hero sections and footer use 80px vertical padding. All other sections use 48px unless specified otherwise.
Navigation remains visible at all breakpoints; menu toggle is present but not required to reveal links. Navigation does not collapse into a drawer. Ensure all nav items are readable on mobile (375px) via reflow or reduced font size.
Opacity scale ranges from 20% to 72% for disabled states, overlays, and hovers. No opacity values outside this range are observed. Use 50% for standard disabled buttons, 60% for overlays.
Focus states are 1–2px solid outlines, typically in dark text colour or brand accent. Keyboard navigation must be fully supported. Focus rings are visible and not hidden; this is non-negotiable for accessibility.
Semantic status colours (error, success, warning) are not defined. The site does not expose error states, validation messaging, or success feedback in its measured stylesheets. If these are needed, they must be designed or extracted from a page with visible form validation.
Hover and active state specifics are not fully documented. The extraction identified hover transitions (e.g., background-color changes, scale transforms, opacity shifts) but did not measure exact colour or transform values. Exact hover state colors are derived from CSS variables (var(--button-primary-color-hover)) that were not resolved. Implement hover states conservatively: typically a 10% opacity increase or subtle colour shift.
Dark mode or theme variants are not observed. The extraction was performed on one theme only. No dark theme, high-contrast mode, or alternate colour schemes are present in the measured data. If dark mode is required, it must be designed separately.
Animation and transition timing is not extracted. Hover and focus transitions were measured qualitatively (e.g., "transform: scale(1.05)") but duration, easing, and delay values are not available from CSS parsing. Motion details belong in a separate animation specification.
Form input styling is incomplete. Border, padding, and typography were partially extracted, but full input states (focus, error, success, placeholder) are not fully documented. Input focus rings measure 2px solid but exact focus-state colours derive from CSS variables.
Responsive padding and section margins are not numerically specified. Breakpoint data shows viewport and heading changes but does not include exact horizontal section padding at each breakpoint. Assume padding reflows fluidly within the column; no fixed padding breaks are observed.
Two extracted colours lack assigned roles. {colors.accent-1} (#575249) and {colors.neutral-1} (#000000) have no measured semantic function. They are treated as decorative; do not assign them to headings, CTAs, or key UI roles without additional evidence.
Z-index layers beyond 99 are not measured. The extracted scale tops out at z-index 99. If additional layering is needed (e.g., for splash screens or emergency notifications), extend this scale beyond 99; the current data does not constrain this.
Gradients are minimal and not extensively used. One decorative gradient was measured (on a section background): linear-gradient(115deg, rgba(0, 0, 0, 0) 35%, rgba(255, 255, 255, 0.22) 48%, rgba(0, 0, 0, 0) 62%). This is the only gradient in the system; do not invent additional gradients.
Surfaces behind authentication (login, account, checkout) were not visited. The extraction analysed 6 public pages only. Authenticated flows may introduce new components, states, or colour roles not represented in this specification.
Some stylesheets were cross-origin and unreadable. A small number of CSS rules may be missing due to browser security restrictions on external stylesheets. All values in this specification are from directly-measured elements; inferred or calculated values are not present.