ECOM Fashion Design System

Overview

ECOM Fashion presents a refined, photography-first e-commerce aesthetic that places editorial imagery at the center of the shopping experience. The design language is intentionally restrained—white canvas backgrounds allow full-bleed lifestyle photography to command attention, while a disciplined typographic hierarchy in General Sans Variable delivers brand messaging with quiet confidence. The color philosophy leans into high-contrast minimalism: near-black ink for primary text, classic HTML blue ({colors.primary}) reserved for interactive elements and semantic emphasis, and a suite of muted grays that step down visual priority without introducing chromatic noise.

Brand voltage lives selectively—the {colors.primary} blue appears in link text, button interactions, and potentially in accent moments, but never as a background wash or dominant surface color. The true signature surfaces are photographic: the hero section's model portrait occupies nearly the full viewport, establishing mood before any UI element competes for attention. A dark utility bar ({component.announcement-bar}) runs across the very top, delivering seasonal promotion text in small uppercase tracking—a subtle nod to fashion retail's urgency without breaking the premium calm.

The single typography move defining this system is its commitment to weight 400 across virtually all scales. From the 56px display headline down to 12px body copy, General Sans Variable holds at regular weight; hierarchy is achieved through dramatic size differentiation (nearly 5× between display and body), negative letter-spacing on large type, and careful color value selection ({colors.text-primary} for headlines, {colors.muted} for supporting text). There are no bold weights in the extracted system—emphasis comes from scale and placement, not weight.

Shape language favors extreme roundness for interactive elements: buttons use {rounded.xl} (200px radius, effectively pill-shaped), while cards settle into the more moderate {rounded.DEFAULT} (12px). This creates a visual dialect where touch targets feel approachable and modern, while content containers retain slight architectural crispness. The overall effect is contemporary fashion editorial—clean, photographic, confident in whitespace, and trusting that the products (and the models wearing them) carry the emotional weight.

Key Characteristics:

• Photography-first layout with full-bleed hero imagery on {colors.canvas} white background
• General Sans Variable at weight 400 exclusively—hierarchy via size (56px → 12px) and {typography.display-lg} negative letter-spacing of -1.68px
• Classic blue {colors.primary} (#0000ee) for links and interactive elements only—never as a surface fill
• Pill-shaped buttons ({rounded.xl} = 200px) with white fill and black text ({component.button-primary})
• Dark announcement bar ({colors.surface-dark} = #1a1a1a) with tracked uppercase {typography.announcement} at 11px
• Product recommendation popover ({component.product-card-popover}) floating over hero with soft {extensions.shadows.xs} elevation
• Muted gray palette stepping from {colors.muted} (#757575) through {colors.muted-strong} (#444444) for secondary information
• Minimal border usage—prefers {colors.border-subtle} (9% black) for outlined button variants
• Pagination dots using {rounded.pill} shape with active state switching to solid {colors.on-dark}

Colors

Brand & Accent

• Primary ({colors.primary} — #0000ee): Classic HTML blue used for hyperlink text, primary interactive states, and semantic emphasis throughout the site. This is the sole brand-color voltage in an otherwise neutral palette.
• Primary Hover ({colors.primary-hover} — #0000cc): Slightly darkened blue for hover states on links and interactive text elements.
• Primary Active ({colors.primary-active} — #000099): Further darkened blue for pressed/active states on clickable elements.

Surface

• Canvas ({colors.canvas} — #ffffff): Pure white background serving as the default surface for the hero band, card interiors, and most content areas.
• Surface Soft ({colors.surface-soft} — #f5f5f5): Light gray used for subtle background differentiation in container elements and hover states on white buttons.
• Surface Lighter ({colors.surface-lighter} — #f1f1f1): Slightly darker gray for elevated surface areas or section alternation.
• Surface Dark ({colors.surface-dark} — #1a1a1a): Near-black used for the top announcement bar and potentially footer areas, creating strong contrast with white text.
• Surface Golden ({colors.surface-golden} — #ead8ab): Warm beige tone appearing in the color inventory, likely used for seasonal accent backgrounds or category badges.
• Surface Green ({colors.surface-green} — #89c89e): Muted sage green, possibly indicating success states or eco/sustainability category signaling.
• Surface Red ({colors.surface-red} — #d32222): Saturated red for error states, sale badges, or urgency indicators.
• Surface Mid Gray ({colors.surface-midgray} — #808080): Neutral medium gray for disabled states or decorative divider elements.

Text

• Ink ({colors.ink} — #000000): Pure black for maximum contrast text—headlines, button labels, and primary body copy on light surfaces.
• Body ({colors.body} — #0000ee): Blue text color mapped to body-text role in the pre-assigned values; used for links and interactive text within content flows.
• Text Primary ({colors.text-primary} — #1a1a1a): Very dark gray (near-black) used for the hero headline and major headings—softer than pure black while maintaining excellent readability.
• Muted ({colors.muted} — #757575): Medium gray for subheadlines, supporting descriptions, and secondary information that should recede visually.
• Muted Strong ({colors.muted-strong} — #444444): Darker gray for tertiary text requiring more presence than {colors.muted} but less than primary text.
• Muted Soft ({colors.muted-soft} — #6f6f6f): Gray tone for placeholder text or very subtle metadata.
• Hairline Gray ({colors.hairline-gray} — #d3d3d3): Light gray used for disabled text, dividers, and decorative linear elements.
• On Primary ({colors.on-primary} — #ffffff): White text for rendering on top of the blue {colors.primary} background (should any component use it).
• On Dark ({colors.on-dark} — #ffffff): White text for the dark announcement bar and any dark-surface components.
• On Dark Muted ({colors.on-dark-muted} — rgba(255, 255, 255, 0.7)): 70% opacity white for secondary text on dark surfaces, reducing visual weight.

Hairlines & Borders

• Hairline ({colors.hairline} — #d3d3d3): Light gray border for subtle separation lines, input outlines, and card boundaries.
• Border Subtle ({colors.border-subtle} — rgba(0, 0, 0, 0.09)): Very low-opacity black for ghost/outlined button borders—nearly invisible until interacted with.
• Border Medium ({colors.border-medium} — #828282): Medium gray for more prominent bordered elements or focus rings.

Semantic

• Error ({colors.error} — #d32222): Red for form validation errors, out-of-stock indicators, or destructive action feedback.
• Success ({colors.success} — #89c89e): Green for confirmation messages, add-to-cart success states, or availability indicators.
• Link ({colors.link} — #0000ee): Standard blue for inline hyperlinks within body text and navigation elements.
• Link Active ({colors.link-active} — #0000cc): Darker blue for visited or currently-active link states.

Typography

Font Family

The type system is built entirely on General Sans Variable, a modern geometric sans-serif delivered as a variable font with a placeholder fallback chain of "General Sans Variable Placeholder", sans-serif. This font family appears across all typographic roles—from the 56px display headline down to 11px announcement bar text—creating a unified voice where scale and spacing, not face change, carry hierarchy. The font stack also references "General Sans" (the static counterpart) and "Instrument Sans" (loaded from Google Fonts at weight 500) as potential fallbacks, though the variable face dominates the extracted CSS. Inter appears minimally (6 instances) likely for UI chrome or icon labels.

General Sans Variable is a proprietary typeface from Fontshare, characterized by its clean geometric construction, slightly condensed proportions, and excellent legibility at both display and micro sizes. Its variable nature allows the system to theoretically access any weight, but this implementation deliberately constrains itself to weight 400 (regular) across all roles—a notable design decision that gives the brand its particular "fashion-editorial" restraint.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 72px | 400 | 1.1 | -0.02em | Reserved for future larger hero contexts | | {typography.display-lg} | 56px | 400 | 1.1 | -1.68px | Primary hero headline ("Style in Motion") | | {typography.title-md} | 56px | 400 | 1.1 | -1.68px | Alternative display role, identical specs to display-lg | | {typography.heading-sm} | 40px | 400 | 1.1 | -1.2px | Section headings below hero level | | {typography.body-lg} | 18px | 400 | 1.4 | 0 | Hero subheadline and lead paragraph text | | {typography.body-md} | 12px | 400 | 1.2 | -0.24px | Standard body copy, button labels, metadata | | {typography.nav-link} | 14px | 400 | 1.4 | 0 | Top navigation menu items | | {typography.button} | 12px | 400 | 1.25 | 0 | Button text (may overlap with body-md) | | {typography.caption} | 12px | 400 | 1.2 | -0.24px | Small labels, timestamps, auxiliary info | | {typography.announcement} | 11px | 400 | 1.3 | 0.05em | Top bar promotional text, uppercase tracked | | {typography.label-sm} | 12px | 500 | 1.3 | 0 | Slightly bolder labels for product titles |

Principles

The typography system's most distinctive principle is its weight discipline: every role sits at font-weight 400 except {typography.label-sm} which bumps to 500 for product card titles. This means the system achieves hierarchy almost entirely through size (a nearly 5× ratio between 56px display and 12px body), color value ( {colors.text-primary} vs {colors.muted} vs {colors.hairline-gray} ), and letter-spacing manipulation. Display roles employ noticeably negative letter-spacing (-1.68px at 56px, -1.2px at 40px) which tightens the geometric forms for a more editorial, high-fashion magazine feel. Body text at 12px uses a subtle -0.24px tracking to maintain optical tightness at small sizes.

Color plays a significant typographic role: the hero headline uses {colors.text-primary} (very dark gray, not pure black) which reads as softer and more sophisticated than {colors.ink}, while the subheadline drops to {colors.muted} (medium gray) to establish clear visual order before the user even registers the size difference. The announcement bar inverts this logic: tiny 11px text in {colors.on-dark} (white) on {colors.surface-dark} (near-black) creates a high-contrast "ticker tape" effect that commands attention despite its diminutive scale.

There are no italic or uppercase conventions in the primary UI text (except the announcement bar's 0.05em positive letter-spacing which suggests implicit uppercase treatment). The system trusts its variable font's geometry and the surrounding photography to provide personality, rather than reaching for stylistic variations like italics or caps.

Note on Font Substitutes

General Sans Variable is a proprietary typeface from Fontshare. For open-source implementations, substitute with Inter (available on Google Fonts) which shares similar geometric construction, excellent readability at small sizes, and variable font support. Define CSS custom properties mapping to the original token names:

:root {
  --font-display: 'Inter', 'General Sans Variable', sans-serif;
  --font-body: 'Inter', 'General Sans Variable', sans-serif;
}

If a more distinctive editorial character is desired, DM Sans (Google Fonts) offers similar geometric warmth with slightly more personality. For the announcement bar's small tracked text, Instrument Sans (already loaded in the font stack at weight 500) can serve as the substitute for that specific role.

Layout

Spacing System

• Base unit: The spacing scale is built around a modified 2px/4px grid with {spacing.lg} (10px) emerging as the most frequently-used atomic value (246 occurrences in extracted CSS).

• Tokens:

  • {spacing.xxs} (1px) — hairline borders and minimal offsets
  • {spacing.xs} (2px) — tight internal padding, input insets
  • {spacing.sm} (4px) — icon gaps, small element spacing
  • {spacing.md} (6px) — nav link padding vertical, compact gaps
  • {spacing.base} (8px) — standard gap between related elements
  • {spacing.lg} (10px) — dominant unit: button padding, card internals, most component spacing
  • {spacing.xl} (12px) — card padding, section margins
  • {spacing.twoxl} (15px) — medium internal padding
  • {spacing.threexl} (16px) — container padding, larger gaps
  • {spacing.fourxl} (18px) — occasional large internal spacing
  • {spacing.fivexl} (20px) — header vertical padding, major section spacing
  • {spacing.sixxl} (24px) — section-level vertical rhythm
  • {spacing.section} (48px) — major section breaks (inferred from hero context)

• Section padding (vertical): {spacing.section} — used for the hero band and likely repeated for major content sections below the fold.

• Card internal padding: {component.product-card-popover} uses {spacing.lg} (10px horizontal) combined with {spacing.base} (8px vertical); {component.product-card} uses {spacing.threexl} (16px).

• Gutters: The main content container maintains consistent side margins inferred from the nav's {spacing.fivexl} (20px) horizontal padding at the container level, with inner content likely constrained to a 1200–1440px max-width (the main element extracts at 1440px).

Grid & Container

The page uses a full-width container strategy at 1440px max-width (extracted from the <main> element). Within this, content follows a loose editorial grid:

• Hero section: Asymmetric two-column layout with the photograph occupying roughly 65% of the width (right-aligned or centered) and the text column (headline + subheadline + CTA) occupying the left ~35%. The text column sits in the lower-left quadrant, allowing the model's face to remain unobstructed in the upper-right.
• Navigation: Full-width bar with logo left, navigation center-left, utilities right—standard e-commerce nav architecture with approximately 20–24px horizontal padding on the container.
• Product popover: Absolutely-positioned card ({component.product-card-popover}) floating in the lower-right area of the hero, overlaying the photograph with elevation shadow.

The density choice is editorial-airy: generous whitespace around the headline, breathing room between the subheadline and CTA button, and the photograph allowed to fill space without competing UI elements. This is not a marketplace-dense grid—it's a brand storefront that prioritizes mood over SKU density.

Whitespace Philosophy

The system practices confident emptiness. White space is not merely absence but an active design element that frames the photography and lets the type breathe. The hero headline has significant margin below it before the subheadline; the CTA button has clear isolation space. This aligns with high-fashion editorial design where the "luxury" signal comes from what you choose not to show.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [SEASON SALE] [UP TO 30% OFF] [NEW SEASON SALE] ...repeat...    │ ← announcement-bar (dark, 36px h)
├─────────────────────────────────────────────────────────────────┤
│  ECOM*    SHOP ▾   JOURNAL   ABOUT  CONTACT   🔍 👤 ♡ 🛒🏴    │ ← top-nav (80px h)
│                                                                 │
│  ┌──────────────────────┐  ┌─────────────────────────────────┐  │
│  │                      │  │                                 │  │
│  │  Style in Motion     │  │         PHOTOGRAPH              │  │
│  │  New-season pieces   │  │       (full-bleed)             │  │
│  │  made for everyday   │  │                                 │  │
│  │  confidence.         │  │                                 │  │
│  │                      │  │         ┌──────────┐            │  │
│  │  [Shop Now]          │  │         │ Popular  │            │  │
│  │                      │  │         │ T-shirts │            │  │
│  └──────────────────────┘  │         └──────────┘            │  │
│                           │                                 │  │
│                           │         ○ ○ ● ○ ○               │  │
│                           └─────────────────────────────────┘  │
└─────────────────────────────────────────────────────────────────┘

Hero Section

The hero uses a layered composition with the photograph as a full-viewport background or near-full-viewport image, and UI elements overlaid with careful positioning:

• Text column (left-third, vertically lower-half):

  • {component.hero-headline}: "Style in Motion" at {typography.display-lg} (56px)
  • {component.hero-subheadline}: "New-season pieces made for everyday confidence." at {typography.body-lg} (18px, muted color)
  • {component.button-primary}: "Shop Now" pill button, white bg, black text

• Photograph layer: Full-bleed or near-full-bleed model portrait showing upper body in outdoor setting (blue sky, natural lighting)

• Floating elements:

  • {component.product-card-popover}: "Popular T-shirts" mini-card with thumbnail, title, and "Shop now ↗" link—positioned lower-right, elevated with {extensions.shadows.xs}
  • {component.pagination-dot} / {component.pagination-dot-active}: Five dot indicators centered horizontally near bottom, third dot active (solid)

Product Popover Card

A signature component unique to this hero layout—the {component.product-card-popover} floats as a contextual recommendation:

┌──────────────────────────────────────┐
│  ┌──────┐  Popular T-shirts          │
│  │ THMB │  Shop now ↗               │
│  └──────┘                            │
└──────────────────────────────────────┘
↑ rounded: 12px, shadow: xs, pad: 8px 20px

This component uses a white background that contrasts against the photograph beneath it, creating a "card floating on image" effect common in premium fashion e-commerce.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, {colors.canvas} background | Base surfaces, announcement bar, hero band | | 1 (Hairline) | {extensions.shadows.xs} — dual-layer 4% black at 0/1px blur | Product popover card, subtle lift on hover | | 2 (Soft) | {extensions.shadows.sm} — 5% black at 1px/2px | Button hover states, input focus rings | | 3 (Modal) | {extensions.shadows.md} — complex 4-layer shadow (26%/24%/19%/3% black) | Dropdown menus, modals, major overlays |

The elevation philosophy is restrained layering. This is not a material-design world with persistent shadows—most surfaces sit flat at Level 0, and depth is introduced sparingly for functional clarity (the product popover needs to separate from the photograph behind it; a dropdown needs to float above content). Shadows are neutral-toned (black at low opacity) without color temperature shifts.

The {extensions.shadows.md} complex shadow suggests that when the system does go elevated, it uses a sophisticated multi-stop diffusion pattern typical of modern design systems—this would appear on modals, large dropdowns, or tooltip-style surfaces.

Decorative Depth

The primary "decorative depth" in this design is photographic depth—the hero image itself provides all the visual complexity, dimensionality, and emotional texture. The UI layers are intentionally flat (white cards, simple borders) so they don't compete with the richness of the fashion photography. No gradient meshes, no glassmorphism, no pattern overlays—the depth story is told entirely by the image content and the one elevated popover card.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 10px | Small containers, subtle rounding | | {rounded.DEFAULT} | 12px | Standard card radius — product cards, popovers, surface containers | | {rounded.md} | 11.8px | Nearly identical to default, likely a computed/fractional variant | | {rounded.lg} | 100px | Highly rounded elements, large pill shapes | | {rounded.xl} | 200px | Button radius — creates fully pill-shaped buttons | | {rounded.pill} | 9999px | Mathematically circular/pill for dots, avatars, badges | | {rounded.full} | 50% | Perfect circles for notification badges, avatar images |

Photography Geometry

Hero and product photography uses full-bleed or near-full-bleed treatment within its container, with no visible border radius on the photograph itself (it extends to container edges). Product thumbnail images inside cards (like the T-shirt preview in the popover) appear to use slight rounding, likely {rounded.sm} (10px) or {rounded.DEFAULT} (12px), creating a softened rectangle that feels contemporary without being overly playful.

Avatar-sized images (if user profiles exist) would presumably use {rounded.full} (50%) for circular treatment based on the badge notification pattern using the same radius.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-hover}, {component.text-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The primary call-to-action button used for "Shop Now" and major conversion actions. White ({colors.canvas}) background with black ({colors.ink}) text, rendered in {typography.button} (12px, weight 400). Uses the extreme {rounded.xl} (200px) radius for a fully pill-shaped appearance. Padding is 10px 20px horizontally, giving it a wide comfortable hit target. Has a 1px border in {colors.border-medium} (#828282) for definition. On hover, transitions to {component.button-primary-hover} with {colors.surface-soft} background for subtle feedback.

{component.button-primary-hover} — Hover state of the primary button. Background shifts to light gray ({colors.surface-soft}) while maintaining all other properties (black text, pill shape, same padding).

{component.button-secondary} — Ghost/transparent button variant. No background fill, black text, same pill radius and typography as primary. Used for secondary actions where a filled button would create too much visual weight.

{component.button-outline} — Outlined button with transparent background and a subtle {colors.border-subtle} (9% black) border. Same pill shape and 12px typography. This is the most delicate button variant, suitable for tertiary actions or "learn more" contexts.

Cards & Containers

{component.product-card} — Standard product display card. White background, black text at {typography.body-md} (12px), {rounded.DEFAULT} (12px) corner radius, and {spacing.threexl} (16px) internal padding. Would contain product image, title, price, and quick-action buttons. No visible shadow in default state—relies on background contrast.

{component.product-card-popover} — Floating recommendation card seen in the hero's lower-right. White background with {extensions.shadows.xs} elevation to separate it from the underlying photograph. Contains a square product thumbnail (~48–60px), a bold {typography.label-sm} (12px, weight 500) title ("Popular T-shirts"), and a {typography.caption} "Shop now ↗" link in {colors.muted}. Rounded at 12px with tighter padding ({spacing.base} vertical, {spacing.lg} horizontal).

{component.surface-container} — Generic light-gray background container. Uses {colors.surface-soft} (#f5f5f5) fill with {rounded.sm} (10px) corners and {spacing.base} (8px) padding. Suitable for grouping related UI elements or creating subtle background differentiation.

{component.surface-elevated} — Elevated white surface card. Pure white background, 12px radius, generous {spacing.threexl} (16px) padding. Used when a card needs more presence than {component.surface-container} but isn't a product card specifically.

Inputs & Forms

{component.search-input} — Search field appearing in the navigation bar. Transparent background (to blend with nav), white text ({colors.on-dark}) for visibility against the photo/dark context, {typography.body-lg} (18px) for comfortable typing. Minimal padding ({spacing.xs} = 2px). Likely expands on focus to reveal a proper input field.

{component.text-input} — Standard text input for forms. White background, black text at 12px, no border radius (sharp corners at 0px—unusual in this otherwise rounded system, suggesting form inputs follow a different geometry convention), tight padding of 1px 2px. This may be a browser-default styled input or an unstyled raw input awaiting proper design tokens.

Navigation

{component.announcement-bar} — Full-width dark strip at the very top of the page. {colors.surface-dark} (#1a1a1a) background with white ({colors.on-dark}) text in {typography.announcement} (11px, 0.05em positive letter-spacing suggesting uppercase). Height locked at 36px. Content scrolls or repeats: "SEASON SALE · UP TO 30% OFF · NEW SEASON SALE..." creating a marquee/ticker effect.

{component.top-nav} — Main navigation bar sitting below the announcement. Transparent background (allows hero photo to show through or sits on white), 80px height, white text ({colors.on-dark}). Contains the ECOM* wordmark on the left, navigation links in the center-left, and utility icons on the right.

{component.nav-link} — Individual navigation menu item (SHOP, JOURNAL, ABOUT, CONTACT). Transparent background, white text at {typography.nav-link} (14px), padding of {spacing.md} (6px) vertical and {spacing.lg} (10px) horizontal. SHOP includes a chevron dropdown indicator.

{component.nav-icon-button} — Icon-only buttons in the nav bar (search, account, wishlist, cart, language selector). Transparent background, white icon/color, 24×24px hit area. Some have notification badges overlaid (wishlist shows "1", cart shows "1").

{component.badge-notification} — Small circular badge for counts (cart items, wishlist items). {colors.surface-dark} background (dark circle), white text at 12px, {rounded.full} (50% = perfect circle), 18px diameter. Positions absolutely over its parent icon.

Signature Components

{component.hero-band} — The full-hero section container. White canvas background (though largely covered by photograph), text colored {colors.text-primary} for the headline, {typography.display-lg} for the main heading. Vertical padding of {spacing.section} (48px) providing breathing room above and below the content block.

{component.hero-headline} — The "Style in Motion" display text. Transparent background, {colors.text-primary} color (#1a1a1a), {typography.title-md} (56px, -1.68px letter-spacing). No additional decoration—the typeface carries all the weight.

{component.hero-subheadline} — "New-season pieces made for everyday confidence." Transparent background, {colors.muted} gray text (#757575), {typography.body-lg} (18px). Positioned directly below the headline with natural flow spacing.

{component.pagination-dot} — Inactive state for the hero slider/carousel dots. {colors.hairline-gray} (#d3d3d3) background, 24px wide/tall, {rounded.pill} shape (horizontal pill, not circular—unusual choice suggesting these may be rectangular progress indicators rather than traditional dots).

{component.pagination-dot-active} — Active/current slide indicator. Solid {colors.on-dark} (white or near-white) fill, same 24px × pill dimensions. The contrast between inactive (light gray) and active (white/black) clearly communicates position in a carousel.

{component.footer-badge} — The "Framer Commerce" attribution badge visible at bottom-right. White background, black text at 12px, {rounded.pill} shape, padding {spacing.xs} {spacing.lg}. Includes a small icon preceding the text. This is a framework watermark/component rather than core brand UI.

Do's and Don'ts

Do

• Do let photography dominate the hero—reserve {typography.display-lg} (56px) for a single short headline and keep supporting text in {typography.body-lg} (18px) at {colors.muted} gray.
• Do use {rounded.xl} (200px) for all button elements to maintain the pill-shape consistency that defines the interactive language.
• Do keep all headline and body typography at font-weight: 400—the system achieves emphasis through size and color, never bold weight (except {typography.label-sm} at 500 for product titles).
• Do apply {extensions.shadows.xs} (the dual-layer 4% shadow) to any card that overlaps photography, as seen in {component.product-card-popover}—this provides necessary separation without heavy-handed depth.
• Do use {colors.primary} (#0000ee) sparingly for links and interactive text only—never as a background fill or large decorative element.
• Do set the announcement bar to {colors.surface-dark} (#1a1a1a) with {typography.annotation} (11px, tracked) in white—this creates the distinctive "ticker tape" premium-retail signal.
• Do maintain the 1440px max-width container for desktop layouts, allowing the hero photograph to feel expansive while keeping text columns readable.
• Do use {colors.text-primary} (#1a1a1a) for major headlines rather than pure {colors.ink} (#000000)—the subtle softness signals editorial quality.
• Do apply negative letter-spacing (-1.68px) to any text at 56px or larger—this tightening is essential to the display type's refined appearance.
• Do reserve {colors.surface-golden} (#ead8ab) and {colors.surface-green} (#89c89e) for categorical or semantic accents (seasonal tags, sustainability badges) rather than primary UI surfaces.

Don't

• Don't introduce bold weights (600/700) into the type hierarchy—the brand voice relies on weight-400 restraint; if you need emphasis, increase size or shift to {colors.ink} from {colors.muted}.
• Don't use {colors.primary} blue as a button background—the primary button is white-on-transparent or white-filled with black text; blue is for text links only.
• Don't round form inputs—{component.text-input} uses 0px radius (sharp corners), creating a subtle functional distinction from the rounded decorative UI.
• Don't add gradient overlays to the hero photograph—the image should read cleanly with UI elements floating atop it using {extensions.shadows.xs} for separation.
• Don't exceed 12px for button label text—{typography.button} is deliberately small (12px) within a generously padded pill shape; larger text would break the refined proportion.
• Don't use {colors.hairline-gray} (#d3d3d3) for primary text—it's reserved for disabled states, dividers, and pagination inactive dots; body text should be {colors.ink}, {colors.text-primary}, or {colors.muted} minimum.
• Don't collapse the announcement bar's height below 36px or reduce its letter-spacing below 0.05em—the tracked uppercase treatment requires that specific rhythm to read as "fashion announcement" rather than "system message."
• Don't mix multiple radius values within a single component family—all buttons share {rounded.xl}, all cards share {rounded.DEFAULT}—consistency within component types is critical.
• Don't place dense content grids in the hero zone—the layout is editorial (one headline, one subheadline, one CTA, one photo), not a product catalog; save density for below-fold sections.
• Don't replace General Sans Variable with a serif or display font for headlines—the entire system's cohesion depends on the geometric sans carrying every role from 56px down to 11px.

Motion & Animation

Transition Tokens

--transition-all: all;
--transition-opacity: opacity 0.3s ease-in-out;
--transition-opacity-transform: opacity 0.2s, transform 0.15s;
--transition-background-shadow: background, box-shadow;
--transition-color: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-opacity-simple: opacity 0.3s;

Keyframe Animations

• cmsslider-appear-cms-slider--R2hlmlmpjqktdp- — Slider entrance animation for the hero carousel, handling the fade/slide transition between hero slides (detected from Framer's CMS slider component class naming).

Interaction Patterns

• Carousel slide transition: The hero uses a CMS-powered slider (Framer component) with opacity-based transitions (0.3s ease-in-out) between slides—no aggressive 3D transforms, just clean crossfades or subtle horizontal slides.
• Button hover lift: Buttons likely gain {extensions.shadows.sm} on hover along with the {colors.surface-soft} background shift, creating a subtle "lift" effect.
• Nav icon feedback: Search, account, and cart icons probably show opacity transitions (0.3s) or scale transforms (0.15s) on interaction.
• Popover appearance: The "Popular T-shirts" card likely fades in (opacity 0.3s) or slides up slightly (transform 0.15s) when its parent slide becomes active.
• Focus rings: Form inputs and interactive elements likely show a {colors.border-medium} outline or box-shadow transition (background, box-shadow property group) on focus.
• Link color shift: Hyperlinks in {colors.primary} blue probably darken to {colors.link-active} (#0000cc) over 0.3s with the cubic-bezier(0.4, 0, 0.2, 1) easing—standard Material-inspired timing.
• Announcement marquee: The top bar's repeating text likely uses a CSS or JS-driven horizontal scroll/marquee animation at constant velocity.

No explicit motion tokens were detected for scroll-triggered animations (parallax, fade-up-on-scroll), though Framer templates commonly include these via their animation engine. Recommended timing for any added motion: 240–300ms duration with cubic-bezier(0.4, 0, 0.2, 1) easing to match the extracted --transition-color timing function.

Imagery Style

• Photography type: Editorial fashion/lifestyle photography featuring models in natural outdoor settings with professional lighting—the hero shows a model in a color-blocked jacket (orange, navy, cream) against a blue-sky backdrop with soft landscape bokeh.
• Composition: Model-centric portraits with shallow depth of field, the subject's face and upper torso in sharp focus while background dissolves into atmospheric blur—classic fashion-editorial technique.
• Color treatment: Photographs appear to use natural/neutral color grading with slightly warm skin tones and saturated blues in the sky, complementing the UI's cool-blue {colors.primary} without matching it directly.
• Subject matter: Models wearing the season's key pieces, captured in confident "in-motion" poses that align with the "Style in Motion" headline concept—suggesting movement, confidence, everyday wearability.
• Image dominance: Photography occupies approximately 65–70% of the hero viewport, making it the primary visual signal; UI elements (text, buttons, popover) are overlaid as secondary layers.
• Product thumbnails: Smaller product shots (like the T-shirt in the popover) use clean white-background or subtle shadow presentation, distinct from the lifestyle hero photography.
• No illustration/3D/abstract: The visual language is purely photographic—no flat illustrations, 3D renders, gradients, or abstract patterns detected in the hero or component imagery.
• Full-bleed treatment: The hero image extends edge-to-edge within its container (or full viewport), with no border, frame, or artificial vignetting applied by the UI layer.
• Model diversity implication: The single visible model suggests the brand may feature diverse casting across different slides/sections (common in modern fashion e-commerce), though only one slide is visible in the screenshot.
• Seasonal alignment: The outerwear (puffer/jacket) and the "New Season" messaging suggest autumn/winter collection positioning, with photography conveying weather-appropriate styling.

Icon System

• Library: Custom SVG icons (no standard library detected—Framer typically uses custom SVG or imported icon sets; the extracted CSS shows no Lucide/Heroicons/Material class signatures).
• Specific icons observed:
  • Search (magnifying glass) — nav utility
  • User/account (person silhouette) — nav utility
  • Heart/wishlist (heart outline) — nav utility, with notification badge showing "1"
  • Shopping cart (cart/bag outline) — nav utility, with notification badge showing "1"
  • Language/region (US flag icon) — nav utility for locale selection
  • Chevron down (dropdown arrow) — adjacent to "SHOP" nav link
  • Arrow up-right (external link arrow) — on "Shop now ↗" in product popover
  • Eye/icon (small icon in footer badge) — preceding "Framer Commerce" text
• Treatment: Stroke-based icons (outline style) rather than filled, using currentColor for color inheritance (white in the nav context). Sizes appear to be 16px–24px based on the 24px {component.nav-icon-button} hit area.
• Alignment: Icons are vertically centered with adjacent text or standalone within their 24×24px touch target, following standard icon-button patterns.
• Notification badges: Number badges (on wishlist and cart icons) use {component.badge-note} styling—dark circles with white numbers, positioned top-right of the icon.

Recommended Frontend Stack

- Framework:      Framer (site is a Framer template) or Next.js for custom rebuild
- Styling:        Framer's visual CSS output / CSS Modules / Tailwind CSS (if porting)
- Fonts:          General Sans Variable (Fontshare CDN) + Instrument Sans (Google Fonts) as fallback
- Animation:      Framer Motion (built-in to Framer) or GSAP for complex sequences
- Icons:          Custom SVG set (extract from template) or Phosphor Icons / Tabler Icons for similar stroke style
- Component lib:  Framer's built-in components (CMS Slider, etc.) or Radix UI for accessible primitives
- Commerce:       Framer Commerce integration or Shopify Storefront API

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Single-column stack: hero text above or below photo (text likely above), nav collapses to hamburger, announcement bar text truncates or scrolls faster, product popover repositions or hides, pagination dots remain | | Tablet | 768px – 1199px | Two-column hero begins (text 40%, photo 60%), nav links may condense or move to menu, button padding reduces slightly | | Desktop | ≥ 1200px | Full layout as shown: asymmetric hero with text left/photo right, full nav visible, product popover floating lower-right, 1440px container max-width | | Wide | ≥ 1440px | Container centers with auto margins, hero photograph may scale slightly larger, typography maxes at 56px (no further scaling) |

Touch Targets

• {component.button-primary}: Approximately 40–44px height × 100+px width (pill shape with 10px × 20px padding plus text width) — meets WCAG AAA 44×44 minimum comfortably.
• {component.nav-icon-button}: 24×24px icon area — potentially undersized for mobile touch targets; recommend expanding to 44×44px minimum with increased padding on smaller screens.
• {component.pagination-dot}: 24×24px pill — adequate touch target for carousel navigation.
• {component.product-card-popover}: Full card is tappable — generous target size.
• {component.text-input}: Input height should be 44px+ on mobile for touch usability (currently appears to use browser-default height).

Collapsing Strategy

• Navigation: The horizontal nav links (SHOP, JOURNAL, ABOUT, CONTACT) will collapse into a hamburger menu on mobile, with the ECOM* logo remaining visible. Utility icons (search, account, cart) may persist in a compressed row or move into the menu panel.
• Hero columns: The two-column layout (text left, photo right) stacks vertically on mobile—likely text column first (headline → subheadline → CTA) followed by the full-bleed photograph, or photograph first with text overlaying the lower portion (maintaining the editorial feel).
• Product popover: The floating "Popular T-shirts" card likely hides on mobile (screen real estate too precious) or repositions as a static block below the hero CTA.
• Announcement bar: Persists on mobile but may reduce font size below 11px or increase scroll speed to fit the repeating message in the narrower viewport.
• Typography scaling: The 56px headline will step down significantly on mobile (likely to 32–40px) to avoid occupying the entire screen height; the -1.68px letter-spacing should reduce proportionally.
• Button sizing: {component.button-primary} maintains pill shape but may increase vertical padding (to 14–16px) to meet 44px touch target height on mobile.

Image Behavior

• Hero photograph: On mobile, switches from partial-coverage to full-bleed (100vw width) with the model's face positioned using object-position to avoid cropping critical features. Aspect ratio may shift from the desktop's landscape composition to a taller crop or the image may pan/zoom responsively.
• Product thumbnail (popover): If the popover card persists on mobile, the thumbnail shrinks to approximately 40–40px or 48–48px; if the card becomes a full-width block, the thumbnail may grow to 80–100px square.
• Lazy loading: All below-fold images should use loading="lazy"; the hero image should be prioritized with <link rel="preload"> or <img fetchpriority="high"> since it's the above-fold visual anchor.

Iteration Guide

1. Build a landing page that closely mimics the design system in this DESIGN.md. Use Framer (to match the source) or Next.js + Tailwind CSS for a custom implementation, pulling every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} paths—never hard-code a value that has a token.

2. Set up the font loading sequence: import General Sans Variable from Fontshare's CDN (or substitute Inter from Google Fonts as documented in the Typography section), define CSS custom properties --font-display and --font-body, and ensure the variable font loads with font-display: swap to prevent FOIT/FOUC.

3. Implement the hero section first—it's the brand's signature moment. Build the full-bleed photograph layer, then overlay the text column (left-aligned, lower-third) with {typography.title-md} headline in {colors.text-primary}, {typography.body-lg} subheadline in {colors.muted}, and {component.button-primary} CTA. Add the {component.product-card-popover} floating in the lower-right with {extensions.shadows.xs}.

4. Add the navigation system: dark {component.announcement-bar} at 36px height with tracked uppercase text scrolling horizontally; then the {component.top-nav} at 80px with transparent background, ECOM* wordmark, nav links in {typography.nav-link}, and icon buttons using 24×24px touch areas with optional {component.badge-notification} overlays.

5. Build the button system as variants: start with {component.button-primary} (white fill, black text, {rounded.xl} = 200px), then create {component.button-primary-hover} (gray background), {component.button-secondary} (ghost), and {component.button-outline} (subtle border). Ensure all use {typography.button} at 12px weight 400—no bold buttons.

6. Implement the carousel/slider for the hero: use Framer's CMS Slider component (or emulated with React state + CSS transitions) with the cmsslider-appear animation class, {component.pagination-dot} / {component.pagination-dot-active} indicators at the bottom, and 0.3s opacity transitions between slides.

7. Apply state variants per your stack's conventions: the spec documents Default and Active/Pressed for buttons, Focus for inputs, Active for pagination dots. Add hover styles (background color shifts, shadow elevation) using the transition tokens defined in Motion & Animation (--transition-color, --transition-background-shadow).

8. Run npx @google/design.md lint DESIGN.md after edits—broken-ref, contrast-ratio, and orphaned-tokens warnings flag issues automatically. Pay special attention to the pre-assigned values: {colors.canvas}, {colors.surface-soft}, {colors.ink}, {colors.body}, {colors.primary}, {typography.body-md}, {typography.display-lg}, {typography.title-md}, and {extensions.mode} must remain exactly as specified.

9. When adding new sections below the hero (product grids, collection features, testimonials), decide which sub-system they belong to: if it's product display, follow {component.product-card} patterns (white bg, 12px radius, 16px padding); if it's editorial content, follow the hero's type hierarchy (heading at 40px {typography.heading-sm}, body at 12–18px).

10. Font Setup for substitution: If General Sans Variable is unavailable, define these CSS variables in your global stylesheet:

    :root {
      --font-sans: 'Inter', 'General Sans Variable', -apple-system, BlinkMacSystemFont, sans-serif;
      --font-display: 'Inter', 'General Sans Variable', serif;
    }
    

    Import Inter from Google Fonts with weights 400 and 500. For the announcement bar's 11px tracked text, consider Instrument Sans at weight 500 as a closer match for that specific role's character.

Known Gaps

• Hover state styling: Per the no-hover policy, exact hover background colors, shadow elevations, and transform values for buttons, links, and cards are inferred rather than extracted—implementation should add these based on the state variant names provided.
• Loading skeletons / pending states: No skeleton loader, spinner, or shimmer patterns were extractable from the static screenshot—these will need to be designed following the {colors.surface-soft} / {colors.hairline-gray} palette for consistency.
• Form validation states beyond focus: Error messages, success checkmarks, disabled-input styling (beyond the existence of {colors.error} and {colors.success} tokens) are not visible in the hero-focused screenshot.
• Cart drawer / checkout flow / product detail pages: These authenticated/e-commerce-specific surfaces are not represented in the above-fold hero view and would require additional screenshots or access to the full template.
• Sub-brand palettes: If the site supports multiple collections (e.g., "Luxe," "Basics," "Sustainable"), each may have accent color variations using {colors.surface-golden}, {colors.surface-green}, or {colors.surface-red}—not confirmed from current data.
• Dark mode: The system is explicitly light-mode ({extensions.mode}: "light"); no dark mode token set or inverted color values are available, though {colors.surface-dark} and {colors.on-dark} suggest the design language could support it.
• Responsive breakpoint specifics: Exact media query values (where nav collapses, where hero stacks) are inferred from standard patterns—the actual Framer template may use non-standard breakpoints (e.g., 916px tablet break detected in the variant classes).
• Framer-specific CSS variables: The source contains Framer-generated class names (framer-p1hD6, framer-aehWT, etc.) and CSS custom properties like --token-b1f89d39-57aa-4efb-8816-14116952e648 whose values map to internal Framer semantics—these should not be used as design tokens; rely only on the human-readable tokens defined in this spec.
• Accessibility contrast ratios: While {colors.on-dark} (white) on {colors.surface-dark} (#1a1a1a) passes AA, and {colors.ink} (black) on {colors.canvas} (white) passes AAA, the {colors.primary} (blue) on white combination and {colors.muted} (gray) on white should be verified against WCAG 2.1 SC 1.4.3 (3:1 for large text, 4.5:1 for body) during implementation.