--- version: alpha name: "Our Legacy" description: "Stockholm avant-garde menswear brand that pairs a near-black ink on near-white canvas with Neue Haas Unica in two weights — utilitarian grotesque precision serving an uncompromisingly editorial retail experience." colors: # Surface / canvas background: "#fffffc" # site default canvas — rgb(255,255,252) near-white, very slightly warm surface: "#ffffff" # secondary surface — pure white used for overlays, dialogs surface-dark: "#121110" # was rgb(18,17,16) — editorial hero fills, inverted sections # Ink / text ink: "#121110" # primary text — near-black, near-chromatic neutral; rgb(18,17,16) ink-secondary: "#7d7d7d" # was rgb(125,125,125) — borders double as mid-grey text cues ink-muted: "#c8c8c8" # was rgb(200,200,200) — muted link states, inactive labels on-dark: "#fffffc" # text on {colors.surface-dark} — the inverted ink # Brand accent primary: "#121110" # CTA fill — near-black is the commerce accent, same as ink on-primary: "#fffffc" # text on primary fill primary-hover: "#161413" # was rgb(22,20,19) — hover state on primary fill, barely darker # Interactive focus-ring: "#121110" # 2px inset solid on form elements — near-black ring # Borders border: "#7d7d7d" # was rgb(125,125,125) — 1px borders on lists, dividers, buttons border-light: "#ffffff" # bottom-rule hairlines in inverted sections border-dark: "#121110" # 1px solid border on cookie buttons # Shadow shadow-soft: "#000000" # was rgba(0,0,0,0.3) — single drop shadow at 0px 30px 70px; Google format requires hex typography: display-hero: fontFamily: "Neue Haas Unica, Arial, sans-serif" fontSize: 75px fontWeight: 700 lineHeight: 1.1 letterSpacing: -0.75px fontFeature: '"lnum", "pnum"' display: fontFamily: "Neue Haas Unica, Arial, sans-serif" fontSize: 75px fontWeight: 400 lineHeight: 1.35 letterSpacing: 0px fontFeature: '"lnum", "pnum"' heading-section: fontFamily: "Neue Haas Unica, Arial, sans-serif" fontSize: 75px fontWeight: 400 lineHeight: 1.1 letterSpacing: -0.75px fontFeature: '"lnum", "pnum"' heading-sub: fontFamily: "Neue Haas Unica, Arial, sans-serif" fontSize: 13px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px fontFeature: '"lnum", "pnum"' body-large: fontFamily: "Neue Haas Unica, Arial, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.5 letterSpacing: 0px fontFeature: '"lnum", "pnum"' body: fontFamily: "Neue Haas Unica, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.35 letterSpacing: 0px fontFeature: '"lnum", "pnum"' nav-link: fontFamily: "Neue Haas Unica, Arial, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0.1px fontFeature: '"lnum", "pnum"' button-ui: fontFamily: "Neue Haas Unica, Arial, sans-serif" fontSize: 15px fontWeight: 600 lineHeight: 1.5 letterSpacing: 0.1px fontFeature: '"lnum", "pnum"' label-uppercase: fontFamily: "Neue Haas Unica, Arial, sans-serif" fontSize: 13px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px fontFeature: '"lnum", "pnum"' caption: fontFamily: "Neue Haas Unica, Arial, sans-serif" fontSize: 10px fontWeight: 700 lineHeight: 1.5 letterSpacing: 0px fontFeature: '"lnum", "pnum"' spacing: xs: 5px sm: 8px md: 15px lg: 22px xl: 30px 2xl: 40px 3xl: 64px 4xl: 80px rounded: none: 0px sm: 8px # badge only — low confidence from extraction data md: 15px # filter tags, dropdown items lg: 32px # pill-adjacent spans pill: 9999px # circular icon buttons, rounded search inputs (60px extracted) components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 15px 27px border: "none" button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 15px 27px border: "1px solid {colors.border-dark}" button-secondary-hover: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-primary}" button-ghost: backgroundColor: "transparent" textColor: "{colors.on-dark}" typography: "{typography.nav-link}" rounded: "{rounded.none}" padding: 0px border: "none" button-ghost-hover: textColor: "{colors.ink-muted}" card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 0px card-inverted: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" rounded: "{rounded.none}" padding: 0px input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body-large}" rounded: "{rounded.none}" padding: 15px border: "1px solid {colors.border}" input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" border: "1px solid {colors.ink}" outline: "2px inset solid {colors.focus-ring}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 0px 15px borderBottom: "none" nav-bar-inverted: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.nav-link}" padding: 0px 15px badge: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: 4px 10px tag: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 5px 15px border: "1px solid {colors.border}" tag-active: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" rounded: "{rounded.md}" border: "1px solid {colors.surface-dark}" --- # Our Legacy Design System ## Overview Our Legacy's website reads like a roll of medium-format film developed with restraint: a near-white canvas (`{colors.background}`, barely distinguishable from pure white at `#fffffc`) receives full-bleed editorial photography that occupies the majority of the viewport. Text appears in near-black (`{colors.ink}`, `#121110`) — a warm almost-black that feels like ink on uncoated paper rather than digital RGB. The brand was founded in Stockholm in 2005 and the design sensibility carries that city's particular gift for austere confidence: nothing superfluous, nothing decorative, nothing that isn't load-bearing. The typographic engine is Neue Haas Unica, self-hosted in two weights: Regular (400) and Bold (700). At 75px with negative tracking and weight 700, it sets hero headlines — "OUR LEGACY / WORK SHOP" — with the authority of a protest poster. The same typeface at 13px and weight 400 becomes a product caption, a price label, a filter name. This is an extreme range for one typeface to cover, and Neue Haas Unica does it without straining — the geometric grotesque origin keeps it neutral enough at small sizes while the proportions carry genuine weight at display scale. No serif counterpart, no mono accent, no third weight: the system builds its hierarchy from size and tracking alone. What makes this system distinctive is its embrace of the inverted section as a structural motif. Rather than using background color variation or subtle tints to separate content zones, Our Legacy switches entire sections to `{colors.surface-dark}` — a near-black fill that hosts white (`{colors.on-dark}`) text and reversed buttons. The navigation, hero overlays, and editorial content zones can inhabit this dark state without feeling like a separate "dark mode" — they feel like facing pages of the same editorial. The system lives in the space between a Scandinavian fashion magazine and a raw-materials catalog. **Key Characteristics:** - Near-white canvas (`{colors.background}`) paired with near-black ink (`{colors.ink}`) — the contrast is near-maximum but with warmth; not pure #000 or #fff - Inverted sections using `{colors.surface-dark}` create editorial rhythm — not dark mode, but structural counterpoint - Neue Haas Unica at weight 700 for hero display text, weight 400 for all reading text — two weights, full range - Hero display text (`{typography.display-hero}`) at 75px with `-0.75px` tracking — assertive, compressed, poster-like - Uppercase weight-700 hero labels run flush over full-bleed photography without separating bands - Zero border-radius on all product cards, containers, and buttons — the system is square by conviction - 1px mid-grey borders (`{colors.border}`, `#7d7d7d`) used for structural dividers, list separators, and filter tags - Button CTAs are near-black filled with 0px radius — a stamp, not a pill - Motion at 0.15s and 0.75s — snappy micro-interactions and slow fade reveals coexist - MUI component framework used under the hood, but heavily overridden for the brand's utilitarian aesthetic - Lining figures (`"lnum"`) and proportional figures (`"pnum"`) active throughout — numerical data reads precisely - Full-bleed editorial photography with no card chrome — images are the walls, not the content on the walls ## Colors ### Surface & Canvas - **Near-White** (`{colors.background}`): The page canvas. `#fffffc` — almost pure white but with the faintest warm tint, the difference between a bright screen and an uncoated sheet. Product photography, editorial content, and the navigation all rest on this surface. - **Pure White** (`{colors.surface}`): Used for overlays, dialog surfaces, and input fields where a clean white is needed separate from the canvas. - **Near-Black** (`{colors.surface-dark}`): The brand's second canvas. Editorial hero fills, inverted navigation zones, and dark-background content sections use this near-black fill. It is warm, not cold — `#121110` has a very slight earth undertone. ### Ink / Text - **Primary Ink** (`{colors.ink}`): All text on light surfaces. The same near-black as `{colors.surface-dark}` — the system uses one chromatic neutral throughout. - **Inverted Ink** (`{colors.on-dark}`): Text on dark surfaces. The same near-white as `{colors.background}` — the inversion is symmetrical by design. - **Mid-Grey** (`{colors.ink-secondary}`): Borders and secondary structural elements. `rgb(125,125,125)` — midpoint between the two primary tones. - **Ghost** (`{colors.ink-muted}`): Muted link states and inactive labels. `rgb(200,200,200)` — barely readable on white, which is intentional for tertiary information. ### Brand Accent - **Primary CTA** (`{colors.primary}`): Near-black fill for all primary buttons. Our Legacy uses no chromatic brand accent — the brand's color identity lives in its photography and garments, not the UI shell. - **On Primary** (`{colors.on-primary}`): Near-white text on dark button fills — the same canvas color reversed. ### Borders & Structure - **Mid-Grey Border** (`{colors.border}`): `rgb(125,125,125)` — a deliberate mid-tone that registers as a hairline without disappearing into the background or competing with the ink. Used on list dividers, filter tags, section rules. - **Dark Border** (`{colors.border-dark}`): Used on secondary buttons and modal elements where the boundary needs to match the near-black text weight. ### Shadow - **Shadow Soft** (`{colors.shadow-soft}`): Was `rgba(0,0,0,0.3) 0px 30px 70px 0px` — the single extracted shadow, used on modal drawers and overlays. Flattened to `#000000` per Google format requirement. ## Typography ### Font Family - **Primary**: `Neue Haas Unica`, self-hosted from Linotype (`Linotype-Neue-Haas-Unica-Pro-Regular.woff2`, `Linotype-Neue-Haas-Unica-Pro-Bold.woff2`). Fallbacks: `Arial, sans-serif`. - **OpenType Features**: Lining figures (`"lnum"`) and proportional figures (`"pnum"`) active across all text styles. No stylistic sets or alternates declared. *For implementations without Neue Haas Unica access: `Haas Grotesk` is the closest equivalent. `Neue Haas Grotesk Text Pro`, `DM Sans`, or `Inter` are acceptable substitutes in descending order of fidelity. Avoid geometric alternatives like Futura or Montserrat — the humanist warmth of Unica is load-bearing.* ### Hierarchy | Token | Use | |---|---| | `display-hero` | 75px / weight 700 / -0.75px tracking — hero headlines, campaign titles, editorial section starters | | `display` | 75px / weight 400 — large editorial text at regular weight; secondary campaign copy | | `heading-section` | 75px / weight 400 / -0.75px tracking — section titles at display scale | | `heading-sub` | 13px / weight 700 — UI labels, product category names, sidebar headings | | `body-large` | 18px — product descriptions, editorial body copy | | `body` | 13px / weight 400 — product labels, captions, price text, filter option names | | `nav-link` | 15px / weight 400 / 0.1px tracking — header navigation links, footer category links | | `button-ui` | 15px / weight 600 / 0.1px tracking — all button labels | | `label-uppercase` | 13px / weight 700 — short uppercase UI labels, active state text | | `caption` | 10px / weight 700 — the smallest text in the system; product metadata, badge labels | ### Principles - **Two weights, maximum range**: Regular (400) for reading, Bold (700) for structure and hero. Weight 600 appears only on button labels, handled in CSS via the Bold file. No intermediate weights. - **Size as the primary hierarchy tool**: With only two weights, the system differentiates levels almost entirely through size — 75px hero versus 10px caption is a 7.5x ratio. - **Tracking reserved for negative correction**: Large display text is tracked negatively (`-0.75px`) to tighten optically. Body and UI text is set at 0 or `0.1px` — no positive tracking as emphasis. - **Lining proportional figures throughout**: The `"lnum", "pnum"` feature setting means prices, sizes, and product numbers always align with body text without being tabular (monospaced) — the right balance for fashion retail. - **No uppercase as taxonomy**: Unlike many fashion brands, Our Legacy does not rely on `text-transform: uppercase` for navigation or category labels. The hierarchy is size and weight, not case. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block. Base unit: 5px (the most frequent extracted value alongside 7.5px and 15px), suggesting a 5px-or-15px rhythm rather than a strict 8px grid. Our Legacy's spatial personality is open and cinematic at the macro level, compact and utilitarian at the micro level. Hero sections offer little padding — photography claims the full viewport. At the component level, inputs and buttons use 15px padding, consistent and dense without being uncomfortable. ### Grid & Container - Max content width: approximately 1510px (the widest extracted breakpoint), content constrained to ~1280px on editorial pages - Product grid: flexible multi-column responsive layout; 3–4 columns on desktop, collapsing through tablet to single-column on mobile - Navigation: edge-to-edge strip with hamburger/icon-based mobile nav (hamburger visible in screenshot); utility icons (search, account, bag) right-aligned - Hero sections: full-bleed, no padding, photography touching all four viewport edges; text overlays positioned absolutely over imagery ### Whitespace Philosophy - Editorial sections use vertical rhythm created by section height (often full-viewport), not by explicit padding tokens between sections - Product components are compact — the 15px padding on buttons and the 7.5px grid values create a dense-but-structured feel - Generous whitespace is reserved for photography; text regions are matter-of-fact and efficient ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Product cards, editorial sections, navigation bar | | Hairline (Level 1) | `border-top: 1px solid {colors.border}` | Section dividers, list item separators | | Button outline (Level 1) | `border: 1px solid {colors.border-dark}` | Secondary button definition | | Modal (Level 3) | `box-shadow: {colors.shadow-soft} 0px 30px 70px 0px` | Overlay drawers and dialog panels | | Focus Ring | `outline: 2px inset solid {colors.focus-ring}` | Form elements on keyboard focus | **Shadow Philosophy**: Our Legacy is structurally flat. Product tiles carry no elevation. The single shadow value — a `30px 70px` spread at 30% opacity — exists only for modal-level drawers and panels that need to separate from the page. This restraint matches the editorial posture: depth is communicated through photography and scale, not shadow layers. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | All product cards, buttons, hero containers, section frames | | `sm` | 8px | Badges (low confidence — may be MUI default) | | `md` | 15px | Filter tags, dropdown option rows | | `lg` | 32px | Pill-adjacent span elements | | `pill` | 9999px | Circular icon buttons, search input pill shape | The system's primary shape decision is `{rounded.none}` for all commerce-facing components. Buttons, cards, product tiles, and hero containers are square. This is a strong brand signal — the absence of softness is itself a choice about the brand's character. The mid-radius values (`{rounded.md}`, `{rounded.lg}`) appear primarily in MUI-sourced filter UI and may not reflect intentional brand decisions. When in doubt, default to `{rounded.none}`. ## Components The complete component spec lives in the `components:` token block above. ### Button variants - **`button-primary`** — Near-black fill (`{colors.primary}`), near-white text (`{colors.on-primary}`), 0px radius, 15px/27px padding, no border. Used for "Add to Cart," checkout actions, form submissions. The stamp-like square geometry is the button's identity. - **`button-secondary`** — `{colors.background}` fill, `{colors.ink}` text, `1px solid {colors.border-dark}` border. Inverts on hover to near-black fill. Used for secondary commerce actions and cookie consent "Decline" buttons. - **`button-ghost`** — Transparent background, used for navigation link behavior in inverted header zones; text color adapts to context (`{colors.on-dark}` on dark headers). ### Cards Product cards follow the full-bleed photography-first model: `{rounded.none}`, no border, no shadow, zero padding. Product photography fills the card entirely; caption text appears below — product name in `{typography.body}`, price in the same size. No elevation on hover. The card-inverted variant hosts editorial content on `{colors.surface-dark}` for dark editorial tiles. ### Inputs Form inputs are rendered on `{colors.surface}` white with `1px solid {colors.border}` and `0px border-radius` — flush-field aesthetic matching the brand's square geometry. On focus, a `2px inset` outline in `{colors.focus-ring}` (near-black) appears, maintaining contrast without a dramatic color shift. The form fields are utilitarian rather than delightful. ### Badges / Tags Badges use `{colors.surface-dark}` fill on `{colors.on-dark}` text, rounding of `{rounded.sm}`, at the `{typography.caption}` scale (10px, weight 700). Tags for filtering use `{rounded.md}` with a `1px solid {colors.border}` outline, activating to a dark fill. The filter tag pattern is the system's most rounded component — even here, the brand tops out at 15px. ### Navigation The navigation strip is minimal: hamburger menu on the left (mobile-first), utility icons on the right (search, wishlist, account, bag). No logotype in the mobile nav chrome visible in the screenshot — brand identity is carried by the full-page editorial context. On desktop, the full category navigation is assumed to expand horizontally. The nav uses `{typography.nav-link}` and can inhabit either `{colors.background}` or `{colors.surface-dark}` depending on whether it's overlaid on dark photography. ## Do's and Don'ts ### Do - Set hero text in `{typography.display-hero}` (75px, weight 700, -0.75px tracking) directly over full-bleed photography — the near-black on near-dark imagery creates an editorial overlay effect the system relies on - Use `{colors.surface-dark}` for entire sections when inverting — not for decorative accents or individual components; the inversion is a structural section tool - Keep all buttons at `{rounded.none}` — the square stamp geometry is the brand's strongest interactive signal - Apply `{colors.border}` mid-grey (`#7d7d7d`) for all structural dividers, list separators, and filter borders — not the ink color and not a subtle off-white - Use Neue Haas Unica at weight 700 only for hero display and UI labels; set all reading text at weight 400 - Let lining proportional figures (`"lnum", "pnum"`) remain active — product prices and sizes should read precisely alongside prose - Apply the 0.15s fast micro-interaction timing for hover opacity and color shifts, and the 0.75s slower timing for section reveals and modal transitions ### Don't - Don't introduce a chromatic brand accent color — Our Legacy uses no color beyond the near-black/near-white binary; the garments carry all hue - Don't add border-radius to buttons, product cards, or hero containers — even `{rounded.sm}` on these elements contradicts the system's core shape decision - Don't use pure `#000000` or `#ffffff` — the system uses `{colors.ink}` (`#121110`) and `{colors.background}` (`#fffffc`) specifically; the warmth is intentional - Don't apply `text-transform: uppercase` as a category taxonomy device — Our Legacy relies on weight and size, not case, for hierarchy - Don't add card shadows or elevation to product tiles — the photography provides all visual depth - Don't introduce a second typeface — Neue Haas Unica in two weights handles every role; no serif editorial face, no monospace accent - Don't use `{colors.ink-muted}` (`#c8c8c8`) for navigation or button text — it signals inactive/disabled states only - Don't constrain photography with border-radius or card chrome — full-bleed with `object-fit: cover` is the photography contract --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile XS | < 500px | Single-column grid; hamburger nav; hero photography fills viewport; display type scales to ~40px | | Mobile | 500–601px | Single-column product grid; navigation icons only | | Tablet Small | 601–768px | Two-column product grid; navigation begins to expand | | Tablet | 768–1024px | Two to three column grid; full hero at ~60px display type | | Desktop | 1024–1280px | Full horizontal navigation; four-column product grid | | Large Desktop | > 1280px | Max container ~1510px; five-column grid; hero display at full 75px scale | ### Touch Targets - Primary buttons use `15px 27px` padding on 15px type — producing approximately 45–50px tap height, meeting minimum accessibility guidelines - Navigation icons (search, account, bag) are discrete tap targets — icon sizes should be supplemented with `min-width: 44px; min-height: 44px` padding zones - Product tiles are fully tappable card regions — the full photography area is the touch target ### Collapsing Strategy - **Navigation**: desktop horizontal category bar collapses to hamburger at mobile; utility icons remain visible at all sizes - **Hero sections**: full-bleed photography maintained at all breakpoints; headline text scales down proportionally, maintaining weight-700 boldness - **Product grid**: 4–5 columns (desktop) → 3 columns (tablet) → 2 columns (mobile) → 1 column (mobile XS) - **Typography**: display-hero scales from 75px to approximately 40px at mobile; body sizes remain stable at 13–15px ### Image Behavior - Product photography fills its grid cell edge-to-edge — no padding, no border, no radius - Hero images are full-viewport-width with `height: 100vh` on desktop; fixed aspect ratio on mobile - Images maintain their editorial composition via `object-fit: cover` rather than mechanical center-crop - Lazy loading deferred off-screen; aspect ratios preserved with height reservations to prevent layout shift --- ## Agent Prompt Guide ### Quick Color Reference - Background: Near-white `{colors.background}` (`#fffffc`) - Primary text: Near-black `{colors.ink}` (`#121110`) - Inverted canvas: `{colors.surface-dark}` (`#121110`) - Inverted text: `{colors.on-dark}` (`#fffffc`) - CTA fill: `{colors.primary}` (`#121110`) - CTA text: `{colors.on-primary}` (`#fffffc`) - Border: Mid-grey `{colors.border}` (`#7d7d7d`) - Muted: `{colors.ink-muted}` (`#c8c8c8`) ### Example Component Prompts - "Create an Our Legacy hero section. Background: full-bleed editorial photograph (`object-fit: cover; width: 100%; height: 100vh`). Overlay text absolutely positioned: brand name in `{typography.display-hero}` (75px Neue Haas Unica weight 700, -0.75px tracking) in `{colors.on-dark}`, left-aligned with 80px horizontal padding. Below the brand name: collection sub-title at `{typography.display}` weight 400. No background tint over the photograph — the text sits directly on the image." - "Build an Our Legacy primary button: `background-color: {colors.primary}` (near-black `#121110`), `color: {colors.on-primary}` (near-white `#fffffc`), 15px Neue Haas Unica weight 600 (`{typography.button-ui}`), `border-radius: 0`, `padding: 15px 27px`, no border, no shadow. Hover: `background-color` transitions to `{colors.primary-hover}` over 0.15s cubic-bezier(0.4, 0, 0.2, 1)." - "Design an Our Legacy product card. No border, no shadow, `border-radius: 0`. Full-bleed product photograph fills the card to the edges (`object-fit: cover`). Below the image: product name in 13px Neue Haas Unica weight 400 (`{typography.body}`) in `{colors.ink}`. Price on the same line or below in the same size and weight. Minimal bottom padding of 15px. On hover: no elevation, no scale — only the cursor changes." - "Create an inverted editorial section. `background-color: {colors.surface-dark}` (`#121110`). All text in `{colors.on-dark}` (`#fffffc`). Section headline in `{typography.display-hero}` (75px, weight 700, -0.75px tracking). Body copy in `{typography.body}` (13px, weight 400, line-height 1.35). Border-top: `1px solid {colors.border-light}` to separate from the preceding light section. Maintain identical padding and grid structure to the adjacent light sections — the inversion is the only design shift." - "Build a filter tag system for Our Legacy's product grid. Default tag: `background-color: {colors.background}`, `color: {colors.ink}`, `border: 1px solid {colors.border}` (mid-grey), `border-radius: {rounded.md}` (15px), `padding: 5px 15px`, 13px Neue Haas Unica weight 400. Active tag: `background-color: {colors.surface-dark}`, `color: {colors.on-dark}`, `border: 1px solid {colors.surface-dark}`. Transition on activation: 0.15s ease on background-color and border-color." - "Generate an Our Legacy navigation bar. `background-color: transparent` (overlaid on hero) or `{colors.background}` (on white pages). Left: hamburger icon in `{colors.ink}` or `{colors.on-dark}` depending on context. Right: search, wishlist, account, and bag icons in matching color. All icons use minimum 44px tap target zones. `{typography.nav-link}` (15px Neue Haas Unica weight 400, 0.1px tracking) for any text nav items. No border-bottom on the navigation bar itself." ### Iteration Guide 1. Start with `{colors.background}` (`#fffffc`) as the primary canvas — not pure white, not cream; this specific near-white is the brand's spatial baseline. 2. For editorial rhythm, alternate sections between `{colors.background}` and `{colors.surface-dark}` — the inversion is a structural device, not a decorative one. 3. Set all display and hero text in `{typography.display-hero}`: 75px, Neue Haas Unica weight 700, -0.75px tracking. Do not soften by reducing the weight to 400 — the boldness is the brand. 4. Apply `{rounded.none}` to every interactive component and container. If a radius appears, question whether it belongs in this system. 5. Use `{colors.border}` mid-grey (`#7d7d7d`) for all structural hairlines — not the near-black ink and not a subtle off-white. The mid-grey is the system's only "neutral third tone." 6. All hover states: 0.15s `cubic-bezier(0.4, 0, 0.2, 1)` — the brand does not linger on interaction feedback. 7. Photography is always full-bleed. No corner radii. No drop shadows. No decorative frames. The photograph is the wall; the component is the label beside it. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Our Legacy. Brand names and trademarks belong to their respective owners.