--- version: alpha name: "Fritz Hansen" description: "Achromatic Danish precision — proprietary HansenGrotesque at weight 400, hard-rectangle geometry, and atmospheric furniture photography as the only decoration, in the tradition of the Egg and Swan" colors: # Surface / canvas background: "#ffffff" surface: "#f5f5f5" # light off-white for alternate section backgrounds /* estimated — consistent with site's secondary panel tone */ # Text / ink ink: "#000000" # primary text — pure black, consistent with the extraction ink-secondary: "#333333" # warm dark for body copy and secondary labels ink-muted: "#888888" # was rgb(136,136,136) — subdued metadata and captions /* estimated — consistent with border extractions */ on-background: "#000000" on-surface: "#000000" # Brand accent — Fritz Hansen is achromatic primary: "#000000" # filled CTA and primary interactive — pure black on-primary: "#ffffff" primary-hover: "#333333" # button hover darkens slightly /* estimated */ # Interaction states text-hover: "#000000" # link hover — opacity shift, same base color focus-ring: "#000000" # Borders border: "#c6c6c6" # was rgb(198,198,198) — light grey structural divider, from extraction border-dark: "#000000" # bottom-border rule on nav and list items (1px solid black) # Shadow tints shadow-soft: "#000000" # rgba(0,0,0,0.15) flattened for hex requirement /* was rgba(0,0,0,0.15) — Google format requires hex */ typography: display-hero: fontFamily: "HansenGrotesque, Arial, Helvetica Neue, Helvetica, sans-serif" fontSize: 66px fontWeight: 400 lineHeight: 1.29 letterSpacing: 0px display: fontFamily: "HansenGrotesque, Arial, Helvetica Neue, Helvetica, sans-serif" fontSize: 34px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0px heading-section: fontFamily: "HansenGrotesque, Arial, Helvetica Neue, Helvetica, sans-serif" fontSize: 30px fontWeight: 400 lineHeight: 1.29 letterSpacing: 0px heading-sub: fontFamily: "HansenGrotesque, Arial, Helvetica Neue, Helvetica, sans-serif" fontSize: 22px fontWeight: 400 lineHeight: 1.32 letterSpacing: 0px body-large: fontFamily: "HansenGrotesque, Arial, Helvetica Neue, Helvetica, sans-serif" fontSize: 18px fontWeight: 400 lineHeight: 1.22 letterSpacing: 0px body: fontFamily: "HansenGrotesque, Arial, Helvetica Neue, Helvetica, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.56 letterSpacing: 0px nav-link: fontFamily: "HansenGrotesque, Arial, Helvetica Neue, Helvetica, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0px button-ui: fontFamily: "HansenGrotesque, Arial, Helvetica Neue, Helvetica, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.57 letterSpacing: 0px label-caps: fontFamily: "HansenGrotesque, Arial, Helvetica Neue, Helvetica, sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0px caption: fontFamily: "HansenGrotesque, Arial, Helvetica Neue, Helvetica, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.56 letterSpacing: 0px caption-small: fontFamily: "HansenGrotesque, Arial, Helvetica Neue, Helvetica, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 1.60 letterSpacing: 0px spacing: xs: 5px sm: 10px md: 20px lg: 30px xl: 40px 2xl: 60px 3xl: 80px 4xl: 120px rounded: none: 0px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 20px 40px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 20px 40px button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.primary}" borderColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 8px 27px button-secondary-hover: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 8px 27px card: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 20px input: backgroundColor: "{colors.background}" textColor: "{colors.ink-secondary}" borderColor: "{colors.border}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 18px 18px 16px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.border-dark}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 18px 18px 16px badge: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.caption-small}" rounded: "{rounded.none}" padding: 10px nav-item: textColor: "{colors.ink}" typography: "{typography.nav-link}" nav-item-hover: textColor: "{colors.primary-hover}" typography: "{typography.nav-link}" --- # Fritz Hansen Design System ## Overview Fritz Hansen's website carries the same economy of means as the objects it sells. The canvas is pure white (`{colors.background}`), utterly unadorned — a decision that reads not as austerity but as confidence. The furniture has been doing the work for 150 years; the interface is content to step aside. Photography occupies full-bleed regions in stark monochrome and restrained color, presenting an Egg chair or a Series 7 stool as an artifact deserving of considered attention rather than promotional excitement. What draws the eye is not typography, not ornament, not color — it is the objects themselves, quietly insisting on their own authority. The proprietary `HansenGrotesque` typeface — served in Regular, Medium, and Bold weights but almost exclusively used at Regular — establishes the brand's editorial voice as clean and undemonstrative. Headlines appear in uppercase at generous sizes with `text-transform: uppercase` applied throughout navigational and display registers, but the weight stays at 400. The display scale runs 66px at the hero, compressing to 30px and 22px through the section hierarchy, all with tight `1.29`–`1.32` line-heights that produce dense typographic blocks. This is text that expects to be read, not performed. The functional voice — buttons, labels, captions — operates at the same typeface, same regular weight, differentiated only by size and the occasional uppercase transform. HansenGrotesque is the single-typeface strategy taken to its logical conclusion: one font family, one weight, infinite register. The chromatic palette is an absolute binary. `{colors.primary}` — pure black — carries buttons, links, active states, and typographic weight. `{colors.on-primary}` — pure white — is the only other occupant. `{colors.border}` at `#c6c6c6` marks the single structural element that is neither black nor white: a light grey divider on select fields and filter panels, the only concession to a three-tone world. There are no shadows of consequence, no gradients, no decorative surface fills. Depth is a question the interface does not ask. Motion is equally restrained: 0.25s at `cubic-bezier(0.25, 0.01, 0.25, 1)` for buttons and links, 0.25s for navigation opacity — fast enough to feel responsive, measured enough to avoid digital snap. **Key Characteristics:** - Proprietary `HansenGrotesque` at weight 400 for all display, body, and UI text — the same typeface in every register - Zero border-radius across the entire system — every button, card, input, and badge is a hard rectangle - Absolute binary palette: `{colors.primary}` black and `{colors.background}` white, with `{colors.border}` grey as the sole structural neutral - Uppercase text-transform for display headings and key navigation items — authority through structure, not weight - Buttons use generous `{spacing.xl}` horizontal padding (40px) — the CTA is a full stamp, not a compact tag - `{typography.display-hero}` at 66px / 400 weight / line-height 1.29 — typographic mass without heaviness - Bottom-border rules (`1px solid {colors.border-dark}`) as structural dividers — no box decoration, only edge lines - Full-bleed product and atmospheric photography as the primary visual differentiator - Motion: `0.25s cubic-bezier(0.25, 0.01, 0.25, 1)` on all interactive transitions — uniform, unhurried - Spacing base at 10px with section intervals reaching 80–120px — intimate components, generous editorial breathing - Product tag badges: `{colors.background}` white, `{typography.caption-small}` 10px uppercase, `{rounded.none}` — an invisible label that annotates without intruding - Self-hosted WOFF2 fonts: `HansenGrotesque-Regular`, `HansenGrotesque-Medium`, `HansenGrotesque-Bold` — no external dependency ## Colors ### Primary Surfaces - **Pure White** (`{colors.background}`): The dominant canvas — product pages, editorial panels, the navigation bar. Never tinted, never supplemented with a surface warmth. The white is optically clean and without temperature. - **Off-White Surface** (`{colors.surface}`): A near-white alternate for secondary backgrounds and subtle section delineation, `#f5f5f5` — close enough to the canvas that the transition is atmospheric rather than structural. ### Text / Ink - **Pure Black** (`{colors.ink}`): Primary text and the system's single dominant tone. Navigation, headlines, product titles, body copy in emphasis contexts. - **Dark Charcoal** (`{colors.ink-secondary}`): Body reading copy and secondary labels at `#333333` — a slight softening of the absolute black for sustained reading comfort. - **Mid Grey** (`{colors.ink-muted}`): Subdued metadata, secondary captions, placeholder text — the system's only receding text tone. ### Brand Accent - **Black CTA** (`{colors.primary}`): The filled button, active link, and primary interactive element. Fritz Hansen has no chromatic brand accent — the primary is the universal black, consistent with a brand that considers chromatic accents a distraction from the objects it sells. ### Borders & Dividers - **Light Grey Rule** (`{colors.border}`): Used on select/filter input borders — `#c6c6c6`. The sole warm-neutral structural line; softens form chrome without breaking the binary palette. - **Black Rule** (`{colors.border-dark}`): Bottom-border structural elements on navigation, section dividers, and active indicators — `1px solid #000000`. The primary structural vocabulary. ### Shadow - **Shadow Base** (`{colors.shadow-soft}`): The basis for the site's single shadow token: `rgba(0,0,0,0.15) 0px 0px 30px 0px`, used sparingly on elevated elements. Flattened to `#000000` for token format compliance. ## Typography ### Font Family - **Primary**: `HansenGrotesque` — a bespoke grotesque designed for and named by the Fritz Hansen brand. Self-hosted WOFF2 in three weights: Regular (400), Medium (500), Bold (700). Fallbacks: `Arial, Helvetica Neue, Helvetica, sans-serif`. - **Loading source**: Self-hosted via CDN path `/dist/ConsumersAndProfessionals/` — no Google Fonts, no Adobe Fonts, no variable fonts. - **OpenType features**: No variable font axes or custom feature settings detected. The design uses size and transform for hierarchy, not font variation. *Note: HansenGrotesque is a proprietary face. For external implementations, Neue Haas Grotesk or DM Sans (Google Fonts, geometric grotesque) are the closest structural substitutes. Inter is acceptable at small sizes but lacks the geometric apertures that give HansenGrotesque its precision at display scales.* ### Hierarchy | Token | Use | |---|---| | `display-hero` | Full-viewport hero headlines — 66px / 400 / lh 1.29 / uppercase | | `display` | Section openers, product family names — 34px / 400 / lh 1.0 | | `heading-section` | Page-level section heads — 30px / 400 / lh 1.29 / uppercase | | `heading-sub` | Sub-section titles, product category labels — 22px / 400 / lh 1.32 / uppercase | | `body-large` | Feature descriptions, lead copy — 18px / 400 / lh 1.22 | | `body` | Standard reading copy, form labels — 16px / 400 / lh 1.56 | | `nav-link` | Navigation links, inline action text — 15px / 400 / lh 1.0 | | `button-ui` | CTA labels, form submit — 14px / 400 / lh 1.57 | | `label-caps` | Section eyebrows, category qualifiers — 14px / 700 / lh 1.0 / uppercase | | `caption` | Product metadata, pricing, auxiliary labels — 12px / 500 / lh 1.56 | | `caption-small` | Product tile tags, fine-print badges — 10px / 400 / lh 1.60 / uppercase | ### Principles - HansenGrotesque at weight 400 carries the entire editorial voice — from 66px hero statements to 12px captions. Weight escalation is not the hierarchy tool; size, uppercase, and line-height are. - `text-transform: uppercase` is applied to all display and most navigational registers. It signals category, section, and status without requiring bold weight or chromatic emphasis. - Line-height tightens at display sizes (1.0–1.29) and opens at reading sizes (1.56–1.57) — a mechanical scale that mirrors the semantic scale. - The `{typography.label-caps}` token at weight 700 is the system's only bold moment — reserved for the strictest functional labels where disambiguation from adjacent copy is essential. - Letter-spacing is unset (normal) across all tokens. HansenGrotesque does not require tracking correction at any size. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 10px. Fritz Hansen's spacing rhythm is built around a 10px base that yields clean multiples at every scale. Component internal padding clusters around 10–20px; section-level editorial intervals jump to 60–120px. The site breathes in two modes: the precise compression of a product data sheet and the generous negative space of a gallery installation shot. ### Grid & Container - Max content width: ~1200px, centered with auto margins - Hero: full-bleed viewport photography; headline overlay positioned typographically within the image - Product grid: typically 3-column on desktop with square product photography, collapsing gracefully through 2-column and single-column - Editorial sections: alternating full-bleed and constrained-container layouts for campaign content - Footer: multi-column grid with newsletter input, link clusters, and country/language selectors ### Whitespace Philosophy - **Photography is the furnishing**: Whitespace does not fill in for missing visual interest — the product photographs carry all visual weight. The white canvas is the deliberate negative space around them. - **Compression at the object level, expansion at the editorial level**: Product tile padding is compact (10–20px); between major editorial sections the system allows 80–120px of vertical air. - **Uppercase as spatial substitute**: Rather than spacing text farther apart to signal hierarchy, the system uses uppercase transform to create visual weight without padding inflation. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | All primary surfaces — product cards, navigation bar, page canvas | | Bottom Rule (Level 1) | `1px solid {colors.border-dark}` | Navigation items, list separators, section dividers | | Input Border (Level 1) | `1px solid {colors.border}` | Form inputs and select fields — grey tone for soft form chrome | | Elevated (Level 2) | `rgba(0,0,0,0.15) 0px 0px 30px 0px` | Modals, floating dialogs, expanded navigation drawers | | Focus Ring | `border: 2px outset {colors.primary}` | Focused form controls — keyboard accessibility | **Shadow Philosophy**: Fritz Hansen's shadow system is nearly absent by design. The site is flat by default; depth is communicated through photography scale and whitespace rhythm rather than layered surfaces. The single detected shadow value (`rgba(0,0,0,0.15) 0px 0px 30px 0px`) appears only in elevated overlay contexts — a functional marker of z-order, not a decorative treatment. The result reads as consistently flat: the interface has no architectural presence of its own, subordinating itself entirely to the furniture. ## Shapes The complete radius scale is in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Every component in the system — buttons, cards, inputs, badges, modals, selects | Fritz Hansen's shape language is a single value: zero. Every button is a hard rectangle, every card is a right-angle container, every input field has no rounding. The three detected instances of `4px` radius in the extraction belong to cookie consent and third-party review widgets — not brand-authored components. This geometric absolutism echoes the manufacturing vocabulary of the brand's most iconic pieces: Arne Jacobsen's Egg chair may curve in every direction, but the joinery, the base, the proportional system behind it are all geometric precision. ## Components The complete component spec lives in the `components:` token block above. Reference component tokens directly (`{components.button-primary}`, `{components.card}`) rather than reconstructing them. ### Button Variants - **`button-primary`** — Pure black rectangle (`{colors.primary}` fill), white text (`{colors.on-primary}`), `{typography.button-ui}` at 14px weight 400, `{rounded.none}` sharp corners, `20px 40px` padding. The CTA is deliberately wide — a full horizontal stamp, not a compact badge. Used for primary purchase and navigation actions. - **`button-primary-hover`** — Darkens to `{colors.primary-hover}` — minimal state change, the form is stable. - **`button-secondary`** — White background with black 1px solid border, black text. The outlined ghost variant for secondary actions on white surfaces. Used for "Sign up," "Book your timeslot," and secondary CTAs. - **`button-secondary-hover`** — Inverts to black fill with white text. The most decisive visual move in the system: the ghost becomes solid on contact. ### Cards - **`card`** — Pure white background, `{rounded.none}`, no shadow, no border at rest. Product photography occupies the visual field; the card is an invisible envelope around the object. Hover may add the elevation shadow (`rgba(0,0,0,0.15) 0px 0px 30px`) in product grid contexts. ### Inputs - **`input`** — White background, `{colors.border}` grey border (1px solid, `#c6c6c6`), `{rounded.none}`, `{typography.body}` 16px, `18px 18px 16px` padding. The select/filter input uses the same geometry. - **`input-focus`** — Border shifts to `{colors.border-dark}` black on focus — no glow, no shadow, the border sharpens to the system's dominant tone. ### Badges / Tags - **`badge`** — White background, `{colors.ink}` black text, `{typography.caption-small}` at 10px uppercase, `{rounded.none}`, 10px padding all sides. Used as product tile annotation labels ("New," "Limited," etc.). No border, no fill color — a minimal stamp. ### Navigation - Top bar: white or transparent-over-photography, containing the Fritz Hansen wordmark left-anchored and action icons (search, wishlist, bag) right-anchored. Navigation links in `{typography.nav-link}` — 15px HansenGrotesque, opacity-based hover at `0.25s cubic-bezier(0.25, 0.01, 0.25, 1)`. - Active states: `1px solid {colors.border-dark}` bottom border on the active navigation item. - Mobile: collapses to a hamburger pattern below tablet breakpoints, with the wordmark persisting and icon tray staying visible. ## Do's and Don'ts ### Do - Use `HansenGrotesque` weight 400 as the single typeface voice across all text — the system has one font family and one dominant weight - Apply `{rounded.none}` to every component — zero border-radius is unconditional - Use `text-transform: uppercase` for all display, heading, and navigational text — this is the hierarchy signal, not bold weight - Give primary buttons the full `20px 40px` padding from `{components.button-primary}` — the CTA reads as a block, not a label - Let `{colors.primary}` (`#000000`) carry all interactive weight — there is no chromatic accent to supplement it - Use `1px solid {colors.border-dark}` bottom-border rules for structural dividers — full box borders are not in the vocabulary - Keep photography full-bleed and untreated — no radius, no shadow frame, no gradient scrim over product images - Apply `0.25s cubic-bezier(0.25, 0.01, 0.25, 1)` to all interactive transitions — the easing is uniform across the system - Reserve `{colors.border}` (`#c6c6c6`) exclusively for form input chrome — it is the only neutral grey in a binary palette - Use generous section spacing of 80–120px between major editorial blocks — the gallery pace is intrinsic to the brand ### Don't - Don't add border-radius to any brand-facing component — even 2px disrupts the geometric discipline - Don't introduce a chromatic brand accent — Fritz Hansen's identity is achromatic by conviction, not by limitation - Don't use weight 700 (`HansenGrotesque-Bold`) for display headlines — authority comes from size and uppercase, not weight escalation - Don't add decorative shadows to flat surfaces — depth is expressed through photography scale, not surface layering - Don't use mixed-case or sentence-case for section headings and navigation — the uppercase contract is consistent across all display registers - Don't add gradients or surface tints beyond `{colors.surface}` (`#f5f5f5`) — the palette is binary; any color introduction breaks the monochromatic discipline - Don't reduce button padding below `20px 40px` for primary CTAs — the stamp proportion is part of the component's identity - Don't use `{colors.border}` grey (`#c6c6c6`) as a text color or section divider — it belongs exclusively to form input borders - Don't apply hover animations to photography — product images are static, authoritative; interactivity is reserved for chrome --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <350px | Single column, compressed nav, reduced headline scale | | Mobile | 350–576px | Single column, full-width photography, hamburger navigation | | Mobile Large | 576–768px | Two-column product grids begin; lead padding tightens | | Tablet | 768–1024px | Navigation transitions; 2–3 column product grids; section spacing scales | | Desktop | 1024–1200px | Full horizontal nav; 3-column product grids; editorial 2-up layouts | | Large Desktop | ≥1200px | Maximum container width; maximum editorial section spacing | *Fritz Hansen carries 34 tracked breakpoints — a notably granular responsive system. The high density of breakpoints between 700–1000px reflects careful handling of the editorial grid across mid-range viewport widths where product photography transitions between portrait and landscape display.* ### Touch Targets - Primary CTA buttons: `20px × 2 + 14px × 1.57 ≈ 62px` effective height — well above the 44px minimum - Navigation links: 15px at line-height 1.0 supplemented by container padding; effective tap target approximately 40–44px - Product cards: entire card surface is tappable; photography region included in the interactive area ### Collapsing Strategy - **Navigation**: Horizontal link row collapses to hamburger below 1024px; Fritz Hansen wordmark persists center or left; search and bag icons remain accessible - **Hero**: Full-bleed photography maintained at all widths; headline scale descends from `{typography.display-hero}` (66px) through `{typography.heading-section}` (30px) at mobile - **Product grids**: 3-column → 2-column → single-column; aspect ratios preserved with `object-fit: cover` - **Editorial 2-column**: Image-and-text pairs stack vertically at mobile; image always leads the content - **Section spacing**: Scales from `{spacing.4xl}` (120px) at desktop → `{spacing.3xl}` (80px) at tablet → `{spacing.2xl}` (60px) at mobile ### Image Behavior - Hero photography: full-bleed at all widths, no radius crop, no border treatment - Product photography: contained within grid cells, square or portrait aspect ratio preserved - No gradient scrim detected over photography — text-over-image compositions use position rather than overlay treatment - No art direction breakpoints detected in the extraction — single image serves all viewports via `object-fit: cover` --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (`#ffffff`) - Primary text: `{colors.ink}` (`#000000`) - Body copy: `{colors.ink-secondary}` (`#333333`) - Secondary text: `{colors.ink-muted}` (`#888888`) - CTA fill: `{colors.primary}` (`#000000`) - CTA text: `{colors.on-primary}` (`#ffffff`) - Form input border: `{colors.border}` (`#c6c6c6`) - Structural rule: `{colors.border-dark}` (`#000000`) ### Example Component Prompts - "Create a Fritz Hansen hero section: full-bleed product photograph covering the entire viewport with no scrim or overlay treatment. Overlaid bottom-left or bottom-center: a headline in HansenGrotesque (fallback: Arial, Helvetica Neue) 66px weight 400, line-height 1.29, `text-transform: uppercase`, color `{colors.on-primary}` (`#ffffff`). Below it, a primary CTA: background `{colors.primary}` (`#000000`), white text `{colors.on-primary}`, HansenGrotesque 14px weight 400, no radius, padding `20px 40px`. Transition: `background-color 0.25s cubic-bezier(0.25, 0.01, 0.25, 1)` on hover to `{colors.primary-hover}` (`#333333`)." - "Design a Fritz Hansen product card for a 3-column grid: white (`{colors.background}`) background, `0` border-radius, no box-shadow, no border. Square product photograph at top fills the card width. Below: a product tag badge in HansenGrotesque 10px weight 400 uppercase `{colors.ink}` on `{colors.background}`, `10px` padding all sides, no border. Product name in HansenGrotesque 22px weight 400 uppercase, `{colors.ink}`. Price and description in 16px weight 400 `{colors.ink-secondary}`. On hover: `box-shadow: rgba(0,0,0,0.15) 0px 0px 30px 0px` via `0.25s ease`." - "Build a Fritz Hansen navigation bar: white background, full-width. Center: 'FRITZ HANSEN' wordmark in HansenGrotesque weight 400 uppercase. Navigation links left: HansenGrotesque 15px weight 400, `{colors.ink}` black, `text-transform: uppercase`; hover → `opacity: 0.7` via `0.25s cubic-bezier(0.25, 0.01, 0.25, 1)`. Active item: `1px solid {colors.border-dark}` bottom border. Right: search, wishlist, bag icons in `{colors.ink}`. Bar height approximately 60px, no bottom border at rest." - "Create a Fritz Hansen editorial section: white background, `80px` vertical padding. Left column (55%): category eyebrow in HansenGrotesque 14px weight 700 uppercase `{colors.ink}` as section label. Below, section heading in HansenGrotesque 34px weight 400, line-height 1.0, `{colors.ink}`. Body paragraph in HansenGrotesque 16px weight 400 line-height 1.56, `{colors.ink-secondary}`. A primary CTA: `{colors.primary}` black fill, `{colors.on-primary}` white text, HansenGrotesque 14px weight 400, `0` radius, `20px 40px` padding, hover inverts via `0.25s cubic-bezier(0.25, 0.01, 0.25, 1)`. Right column (45%): full-height product photograph, no border, no shadow." - "Design a Fritz Hansen newsletter input form: white background, HansenGrotesque 16px weight 400 `{colors.ink-secondary}`, `1px solid {colors.border}` (`#c6c6c6`) full border, `0` border-radius, padding `18px 18px 16px`. Placeholder text in `{colors.ink-muted}` (`#888888`). On focus: border shifts to `1px solid {colors.border-dark}` (`#000000`), no glow, no shadow, no radius. Submit button immediately adjacent: `{colors.primary}` black fill, `{colors.on-primary}` white text, same HansenGrotesque 14px weight 400, `0` radius, `20px 40px` padding." - "Create a Fritz Hansen product collection section: `{colors.surface}` (`#f5f5f5`) background, `60px` vertical padding. Section heading: HansenGrotesque 14px weight 700 uppercase `{colors.ink}` as eyebrow. Below: HansenGrotesque 30px weight 400 uppercase line-height 1.29 in `{colors.ink}`. 3-column product grid, `20px` gutters. Each card: white background, no border, no shadow, no radius. Card hover: `box-shadow: rgba(0,0,0,0.15) 0px 0px 30px 0px` via `0.25s cubic-bezier(0.25, 0.01, 0.25, 1)`." ### Iteration Guide 1. Start with `{colors.background}` (`#ffffff`) pure white. Introduce `{colors.surface}` (`#f5f5f5`) only for full-width alternate sections that need subtle delineation. 2. Every component is a hard rectangle — `border-radius: 0` on all elements, unconditional. 3. Typography is a single typeface in a single weight: HansenGrotesque 400. Use size and `text-transform: uppercase` for hierarchy, not weight variation. 4. `{colors.primary}` (`#000000`) carries all interactive weight. There is no accent color. The binary black-white palette is the brand's permanent commitment. 5. Give primary buttons the full `20px 40px` padding — the CTA stamp proportion is identity, not convention. 6. Structural dividers are `1px solid {colors.border-dark}` bottom borders. No full box borders on cards or containers. 7. Photography is the decoration — design the grid to hold objects, not to fill the page with chrome. --- ## 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 Fritz Hansen. Brand names and trademarks belong to their respective owners.