--- version: alpha name: "Merit" description: "Token-first design system reference for Merit Beauty — monochromatic black-and-white canvas, two-typeface serif/grotesque pairing, and barely-there elevation for a no-nonsense clean-beauty aesthetic." colors: # Surface / canvas background: "#ffffff" surface: "#faf9f7" # warm near-white panel — approximated from linear-gradient stop rgb(250,249,247) surface-elevated: "#f5f5f5" # Text / ink ink: "#000000" ink-muted: "#62605e" # warm mid-gray — rgb(98,96,94); secondary labels, subdued metadata ink-subtle: "#333333" # dark near-black — rgb(51,51,51); tertiary UI chrome on-background: "#000000" on-surface: "#000000" # Brand accent primary: "#000000" # pitch black — the sole brand color: CTAs, borders, type on-primary: "#ffffff" primary-container: "#faf9f7" # State / interaction text-hover: "#62605e" # warm mid-gray on hover — mirrors ink-muted focus-ring: "#0057ff" # electric blue — rgb(0,87,255); extracted from input focus-ring; accessibility anchor only # Borders border: "#000000" # 1px solid black — the system's workhorse separator border-subtle: "#7d7d7d" # mid-gray bottom-border — rgb(125,125,125); form dividers # Shadow tints shadow-soft: "#cccccc" # rgb(204,204,204) — used in one low-confidence card shadow at 2px blur typography: display-hero: fontFamily: "adobe-caslon-pro, Georgia, 'Times New Roman', serif" fontSize: 40px fontWeight: 400 lineHeight: 1.36 letterSpacing: 0px display: fontFamily: "adobe-caslon-pro, Georgia, 'Times New Roman', serif" fontSize: 25px fontWeight: 400 lineHeight: 1.16 letterSpacing: 0.52px heading-section: fontFamily: "adobe-caslon-pro, Georgia, 'Times New Roman', serif" fontSize: 24px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0px heading-sub: fontFamily: "akzidenz-grotesk-std-med, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.20 letterSpacing: 1.95px body-large: fontFamily: "akzidenz-grotesk-std, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0px body: fontFamily: "akzidenz-grotesk-std, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.50 letterSpacing: 0.52px nav-link: fontFamily: "akzidenz-grotesk-std-med, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.20 letterSpacing: 1.95px button-ui: fontFamily: "akzidenz-grotesk-std-med, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 13px fontWeight: 500 lineHeight: 1.20 letterSpacing: 1.95px caption: fontFamily: "akzidenz-grotesk-std, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.40 letterSpacing: 0.48px label-micro: fontFamily: "akzidenz-grotesk-std, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 11px fontWeight: 400 lineHeight: 1.25 letterSpacing: 1.32px label-micro-bold: fontFamily: "akzidenz-grotesk-std-med, 'Helvetica Neue', Helvetica, Arial, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 1.40 letterSpacing: 0.40px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px 4xl: 80px 5xl: 100px rounded: none: 0px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 16px 24px border: 1px solid {colors.primary} button-primary-hover: backgroundColor: "{colors.ink-muted}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 16px 24px button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 16px 24px border: 1px solid {colors.border} button-secondary-hover: backgroundColor: "{colors.ink}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.none}" padding: 16px 24px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 24px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 0px 16px 0px 0px border: 0px 0px 1px solid {colors.border} input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.none}" padding: 0px 16px 0px 0px borderColor: "{colors.focus-ring}" outline: 3px solid {colors.focus-ring} badge: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.label-micro}" rounded: "{rounded.none}" padding: 4px 8px nav-item: textColor: "{colors.ink}" typography: "{typography.nav-link}" backgroundColor: "{colors.background}" nav-item-hover: textColor: "{colors.ink-muted}" typography: "{typography.nav-link}" backgroundColor: "{colors.background}" --- # Merit Design System ## Overview Merit Beauty occupies a clean, no-ceremony corner of the beauty world, and its website reflects the product philosophy at every layer: nothing surplus, nothing decorative, everything functional. The page opens on a pure white canvas (`{colors.background}`) with type and photography doing all the work. There are no illustrative flourishes, no gradient hazes, no background-color theatrics. The entire chromatic range runs from black (`{colors.ink}`) to white (`{colors.background}`) with one warm mid-gray (`{colors.ink-muted}`) as the sole tertiary note. It reads like a very well-designed magazine insert, printed on matte paper, shot in natural daylight. The typeface pairing is the system's most distinctive decision: Adobe Caslon Pro for all display-level headlines, and Akzidenz-Grotesk Std for all UI chrome, navigation, buttons, and body text. Caslon is a classical old-style serif with optical warmth and pronounced stroke contrast, selected by Merit specifically to signal heritage and deliberation in a DTC beauty landscape saturated with geometric sans. Akzidenz-Grotesk, the foundational Swiss grotesque that predates Helvetica, reinforces that same archival confidence without the corporate polish of its descendants. Together they perform a studied Americana-meets-Continental editorial tone. Capital-lettered labels with tight tracking (`1.95px`) sit next to serifed headline text at editorial sizing — the combination feels like a well-typeset product pamphlet, not a Shopify theme. Borders do the heavy lifting that other brands assign to color or elevation. A `1px solid {colors.border}` appears on buttons, inputs, and structural dividers; the page's sense of containment comes from these hairlines rather than shadow or fill. The button system is rectangular with zero radius — sharp corners as far as the eye can see. Only the close-button circles on modals break the geometry (using `50%` radius), and those are considered functionally out-of-system. **Key Characteristics:** - Monochromatic palette: `{colors.ink}` black, `{colors.background}` white, `{colors.ink-muted}` warm gray — no brand color in the conventional sense - Adobe Caslon Pro at 40px weight 400 for editorial headlines — classical serif in a DTC context - Akzidenz-Grotesk Std Med at 13px with `1.95px` letter-spacing for all caps nav and button labels - `{rounded.none}` corner radius on every interactive element — sharp rectangle system, no pills - 1px black borders as the structural workhorse — buttons, inputs, dividers all rely on hairlines - Warm near-white surface tone (`{colors.surface}`) for background fades and panel moments - Accessibility-grade focus ring in electric blue (`{colors.focus-ring}`) — the only non-monochrome color on the page - `cubic-bezier(0.19, 1, 0.22, 1)` easing dominates motion — an Expo-out curve that snaps quickly then trails off gracefully - Long-form media transitions at `0.5–0.6s` for product image carousels; UI feedback at `0.2–0.3s` - Section spacing at `80–100px` vertical — generous but not editorial-luxe; practical breathing room - No logo mark — wordmark "MERIT" in capitalized grotesque, minimal and direct ## Colors ### Primary - **Merit Black** (`{colors.ink}`): All primary text, headings, button fills, icon strokes, 1px borders. The only brand color with full saturation. Black is the primary in every sense. - **Pure White** (`{colors.background}`): The page canvas. No softening, no off-white. Sections that need separation shift to the warm panel tone rather than changing the base canvas. ### Warm Neutrals - **Warm Gray** (`{colors.ink-muted}`): Secondary labels, hover state on links, subdued metadata. The `rgb(98, 96, 94)` value has a slight warm undertone — it reads as a desaturated taupe rather than a cool gray, aligning Merit with the greige warmth of its product packaging. - **Dark Mid** (`{colors.ink-subtle}`): Tertiary chrome, flickity carousel button states. Used sparingly at small sizes. - **Warm Panel** (`{colors.surface}`): Near-white with a faint warm tinge (`rgb(250, 249, 247)`). Functions as the gradient stop behind drawer menus and fades — it creates a subtle surface separation without introducing a visible panel color. ### Interaction - **Focus Blue** (`{colors.focus-ring}`): `rgb(0, 87, 255)` — the only chromatic departure on the page. Appears only as the 3px solid outline on focused text inputs. Its role is exclusively accessibility; it never appears in decorative contexts. ### Borders & Structural - **Border Black** (`{colors.border}`): 1px solid borders on inputs (bottom-only inset style), buttons, and structural containers. The visual grammar equivalent of a pencil rule. - **Border Mid** (`{colors.border-subtle}`): `rgb(125, 125, 125)` bottom-border on select dividers — used for sub-threshold separation within dense form layouts. - **Shadow Pale** (`{colors.shadow-soft}`): `rgb(204, 204, 204)` at 2px spread — appears in one low-confidence context; treat as a barely-there chrome detail rather than a design system element. ## Typography ### Font Family - **Display/Editorial**: `adobe-caslon-pro`, with fallbacks `Georgia, 'Times New Roman', serif` — commissioned commercial serif for all headline moments - **UI/Body**: `akzidenz-grotesk-std` and `akzidenz-grotesk-std-med`, with fallbacks `'Helvetica Neue', Helvetica, Arial, sans-serif` - **Variable/Light**: `AktivGrotesk_Lt` and `AktivGroteskVF_Wght` — secondary grotesque presence, self-hosted via woff2 *Note: Adobe Caslon Pro requires an Adobe Fonts subscription. Georgia is the most faithful web-safe fallback; for free implementations, EB Garamond (Google Fonts) captures the old-style serif DNA. Akzidenz-Grotesk is available from Linotype/Berthold; Aktiv Grotesk (the digital update by Dalton Maag) is a near-identical licensed alternative. For a free substitute, IBM Plex Sans carries comparable structural clarity.* ### Hierarchy | Token | Use | |---|---| | `display-hero` | Primary editorial headings — 40px Caslon 400, 1.36 lh | | `display` | Sub-hero feature text — 25px Caslon 400, 0.52px tracking | | `heading-section` | Section-level titles — 24px Caslon 400 | | `heading-sub` | Uppercase labels, section eyebrows — 13px Akzidenz Med, 1.95px tracking, all-caps | | `body-large` | Lead paragraphs, introductory body — 16px Akzidenz 400 | | `body` | Standard reading text — 13px Akzidenz 400, 0.52px tracking | | `nav-link` | Navigation items — 13px Akzidenz Med, 1.95px tracking, all-caps | | `button-ui` | All button labels — 13px Akzidenz Med, 1.95px tracking, all-caps | | `caption` | Metadata, product details — 12px Akzidenz 400, 0.48px tracking | | `label-micro` | Fine labels, fine print — 11px Akzidenz 400, 1.32px tracking, all-caps | | `label-micro-bold` | Smallest UI chrome — 10px Akzidenz 400, 0.40px tracking | ### Principles - **Two typefaces, two registers**: Caslon reads the editorial — product stories, headlines, brand moments. Akzidenz reads the functional — navigation, buttons, captions, metadata. They never cross into each other's territory. - **All-caps with generous tracking for UI chrome**: Every button label, nav item, and section eyebrow runs uppercase at 1.95px letter-spacing. This creates a quiet, recessive authority — the labels announce themselves without shouting. - **Weight 400 throughout**: Neither typeface uses bold. Caslon at 400 is already visually substantial (old-style proportions feel heavier than geometric equivalents at the same weight). Akzidenz Med (`akzidenz-grotesk-std-med`) is technically weight 500 — that's the ceiling. No bold, no heavy. - **Serif for identity, grotesque for legibility**: At small sizes (10–13px), Caslon would sacrifice crispness for character. Akzidenz at that scale with tracking is perfectly readable on screen. The pairing is pragmatic as much as aesthetic. - **No italic, no ornamental weights**: The system uses only regular and medium. Emphasis is achieved through sizing and spacing, not stylistic variation. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 4px, with the practical working unit being 8px. Merit's spacing reads as considered generosity — not the editorial-luxe sprawl of Glossier at 125px section breaks, but a clean editorial pace at 80–100px between major sections. The tight sub-grid (4px, 8px, 16px) handles UI chrome density while the section scale (80px, 100px) gives the page room to exhale between product moments. ### Grid & Container - Max content width: approximately 1440px at full desktop; Tailwind arbitrary values suggest precise per-section container widths - Product grid: 4-column at 1200px+, collapsing to 2-column at 768px, 1-column below 640px - Full-bleed photography sections break the container for hero and campaign moments - Breakpoints cluster tightly around 1200–1441px (four breakpoints in a 241px window) suggesting careful per-breakpoint tuning of the primary desktop layout ### Whitespace Philosophy - Editorial cadence: section breaks at 80–100px keep the page moving without feeling rushed - Dense product grids with 16–24px gutters contrast with wide atmospheric sections — the rhythm alternates between focused and expansive - Photography carries atmospheric weight; negative space in the UI chrome keeps the eye moving toward product ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow, no fill | Page canvas, all product cards, navigation, default surface | | Hairline (Level 1) | `1px solid #000000` | Button outlines, input borders, structural dividers — graphic separation, no depth | | Fade Panel (Level 2) | `linear-gradient(#faf9f7 40px, rgba(250,249,247,0) 100%)` | Drawer menu top fade — creates a soft content reveal without a visible hard edge | | Soft Cloud (Level 3, rare) | `rgb(204,204,204) 0px 0px 2px 2px` | One isolated card or badge context; treat as not-in-system for authoring | | Focus Ring (Accessibility) | `rgb(0,87,255) 0px 0px 6px 2px` + `3px solid` outline | Keyboard-focused inputs — the only elevation system serving an accessibility role | **Shadow Philosophy**: Merit is nearly shadow-free. The system uses `1px` hairlines and surface color changes to create spatial zones. Where Glossier leans on photography for atmospheric depth and nécessaire uses clean planes, Merit creates hierarchy through typographic contrast between its serif and grotesque voices. The rare blur (2px at opacity on one chrome element) is not a design system primitive — it's an edge case. Authors should default to flat, separated by rules. ## Shapes The complete radius scale is declared in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | All interactive elements — buttons, inputs, cards, modals, drawers | | `pill` | 9999px | Intended for future use or out-of-system exceptions (currently: modal close-circle at 50%) | Merit is a sharp-rectangle system with no ambiguity. The only circular element is the modal close button (50% on a square, creating a circle), which is functionally distinct from the design language of the rest of the UI. All visible product chrome is rectangular. ## 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`** — Black fill, white type, 1px black border, `{rounded.none}` radius, `{typography.button-ui}` (uppercase 13px Akzidenz Med, 1.95px tracking). The workhorse CTA. Hover shifts fill to `{colors.ink-muted}` warm gray. - **`button-secondary`** — White fill, black type, 1px black border. Same geometry as primary. Hover inverts: black fill, white type. Used for secondary actions where the primary CTA is already visible. - Buttons have no border-radius — `0px` hard stops at every corner. No softening, no pill shapes, no rounding. ### Cards Product cards have no explicit border or shadow by default (`{colors.surface}` background, `{rounded.none}`). Photography fills the top of each card flush to the edge. Title appears in `{typography.display}` or `{typography.heading-section}` Caslon; price and metadata in `{typography.body}` Akzidenz. Internal padding follows the `lg` spacing token (24px). ### Inputs Bottom-border-only style: `0px 0px 1px solid {colors.border}` — no full rectangle border, just a baseline underline. Placeholder and label text in `{typography.body}` Akzidenz at `{colors.ink}`. On focus, the electric blue ring (`{colors.focus-ring}`) appears as `3px solid outline` and `box-shadow 0px 0px 6px 2px` — high-contrast, WCAG-compliant. Zero border-radius matches the system-wide sharp geometry. ### Badges / Tags Flat rectangles (`{rounded.none}`), `{colors.surface}` background, `{colors.ink}` text, `{typography.label-micro}` styling (11px Akzidenz with 1.32px tracking, uppercase). No border. Used for "NEW", category markers, editorial callouts. ### Navigation Sticky top bar on a white canvas, no visible shadow on default state. Logo "MERIT" wordmark left-aligned in Akzidenz Med uppercase. Navigation links in `{typography.nav-link}` — 13px Akzidenz Med, 1.95px tracking, all-caps, `{colors.ink}`. Hover shifts link color to `{colors.text-hover}` warm gray — no underline. Mobile: hamburger triggers a full-width drawer with the warm panel fade (`{colors.surface}` gradient) at the top. ## Do's and Don'ts ### Do - Use Adobe Caslon Pro for all display headlines and editorial moments — it carries the brand voice - Use Akzidenz-Grotesk Std Med for every UI label, button, nav item — uppercase with 1.95px tracking is the system's signature UI voice - Keep all corners at `{rounded.none}` — sharp rectangles define the system's geometry - Apply `1px solid {colors.border}` (black) for buttons, inputs, and structural dividers - Use bottom-border-only inputs (`0px 0px 1px`) — full-rectangle borders break the editorial underline convention - Use `{colors.focus-ring}` exclusively for keyboard accessibility — never as a decorative accent - Apply `{colors.ink-muted}` only for secondary and hover states — it's the warm gray, not an independent brand color - Keep button labels in uppercase with `{typography.button-ui}` tracking — lowercase buttons break the system's editorial authority - Use `cubic-bezier(0.19, 1, 0.22, 1)` easing for all media transitions; `ease-out` for UI interactions - Let photography and typographic hierarchy do the decorative heavy-lifting — UI chrome should be invisible ### Don't - Don't mix the display serif (Caslon) into UI contexts — labels, buttons, and nav are grotesque-only - Don't use any border-radius between `0px` and `9999px` — the system is sharp or (future) pill, nothing in between - Don't introduce chromatic brand colors beyond the monochrome triad — no taupe panels, no gold accents, no blush tones - Don't use `{colors.focus-ring}` blue as a button fill or accent — it exists only for keyboard accessibility - Don't add drop shadows to cards or containers — use hairline borders or surface color for separation - Don't lowercase button labels — Merit's CTA voice is uppercase Akzidenz Med at 1.95px tracking, always - Don't use weight 600+ anywhere — the type ceiling is Akzidenz Med (500) and Caslon Regular (400) - Don't create full-rectangle input borders — the underline-only input is the system's form convention - Don't tile gradients as decorative fills — the warm gradient (`{colors.surface}`) is strictly for drawer fades - Don't place pills (`{rounded.pill}`) on buttons or cards — reserve for future system additions or exceptions only --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <376px | Single-column, hamburger nav, small Caslon headings (18–24px) | | Mobile | 376–640px | Single-column product grid, full-bleed hero photography | | Mobile Large | 640–768px | 2-column grid begins, type scale modest | | Tablet | 768–1024px | 2-column product grid, condensed nav, 24–32px headings | | Desktop Small | 1024–1200px | 3-column grid, full nav bar revealed | | Desktop | 1200–1440px | 4-column grid, full editorial spacing, 40px Caslon heroes | | Large Desktop | >1440px | Layout scales within container; multiple breakpoints at 1441–1800px for fine-tuned padding | ### Touch Targets - Primary CTAs: minimum 44px tap height; 16px 24px padding maintains target across mobile - Nav links: full-row targets in mobile drawer — minimum 48px tall - Product cards: entire card surface is tappable to PDP - Close and carousel controls: 44×44px minimum hit area ### Collapsing Strategy - **Nav**: Horizontal link bar at desktop collapses to hamburger at 768px; full-screen drawer overlay with warm-panel top fade - **Product grid**: 4-column → 2-column → 1-column; gutters maintain 16px regardless of breakpoint - **Typography**: Caslon headings scale down from 40px to 24–28px on mobile; Akzidenz UI labels stay fixed at 13px - **Section spacing**: 100px desktop → 48–64px mobile; editorial breathing room preserved but not maximized - **Photography**: Full-bleed hero images reframe for portrait orientation; product card images stay square throughout ### Image Behavior - Product photography fills card width edge-to-edge with no border or radius - Hero imagery goes full-bleed — no container constraint, no gradient overlay - Art-directed mobile alternates likely served for portrait orientation hero shots --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (`#ffffff`) - Primary text: `{colors.ink}` (`#000000`) - Secondary text / hover: `{colors.ink-muted}` (`#62605e`, warm gray) - Warm panel surface: `{colors.surface}` (`#faf9f7`) - CTA fill: `{colors.primary}` (`#000000`) - CTA text: `{colors.on-primary}` (`#ffffff`) - Border system: `{colors.border}` (`#000000`) - Accessibility focus: `{colors.focus-ring}` (`#0057ff`) - Default radius: `{rounded.none}` (0px) - Default shadow: none ### Example Component Prompts - "Create a Merit Beauty product card on `{colors.background}` white with zero border-radius and no shadow. Product photography fills the top edge-to-edge in a 4:5 portrait ratio. Below the image: product name in `{typography.display}` (Adobe Caslon Pro 25px weight 400, 0.52px tracking); price in `{typography.body}` (Akzidenz-Grotesk 13px weight 400); 'Add to bag' button in `{colors.primary}` black fill with `{colors.on-primary}` white type at `{typography.button-ui}` (Akzidenz Med 13px, 1.95px tracking, uppercase, 16px 24px padding)." - "Build a Merit-style primary CTA button: `{colors.primary}` background, `{colors.on-primary}` text, `{typography.button-ui}` (Akzidenz-Grotesk Std Med 13px, 1.95px letter-spacing, uppercase), `{rounded.none}` radius, 16px 24px padding, `1px solid {colors.border}`. Hover state: background shifts to `{colors.ink-muted}` (`#62605e`), text stays white." - "Design a Merit-style email capture input: bottom-border-only style (`border: 0px 0px 1px solid {colors.border}`), no full rectangle border, `{rounded.none}`, `{typography.body}` Akzidenz 13px placeholder text in `{colors.ink-muted}`. Focus state: `outline: 3px solid {colors.focus-ring}` plus `box-shadow: {colors.focus-ring} 0px 0px 6px 2px`. Pair with an uppercase Akzidenz Med label using `{typography.heading-sub}` (13px, 1.95px tracking)." - "Create a Merit-style editorial hero section: full-bleed photography, no gradient overlay. Overlay text in `{typography.display-hero}` (Adobe Caslon Pro 40px weight 400, 1.36 line-height) in `{colors.on-primary}` white for photography-contrast, or `{colors.ink}` black on a white panel beneath. Below the image: a sub-headline in `{typography.heading-sub}` (Akzidenz Med 13px uppercase 1.95px tracking) followed by a primary CTA button." - "Build a Merit-style navigation bar: `{colors.background}` white canvas, sticky positioning, no visible shadow. 'MERIT' wordmark left-aligned in Akzidenz-Grotesk Med uppercase at `{typography.nav-link}` sizing. Nav links in `{typography.nav-link}` (13px Akzidenz Med, 1.95px tracking, uppercase, `{colors.ink}`). Hover: `{colors.text-hover}` (`#62605e`) — no underline. Cart and search icons as minimal SVGs, right-aligned, 44px tap target." - "Create a Merit-style section eyebrow + headline pair: eyebrow label in `{typography.heading-sub}` (Akzidenz Med 13px uppercase 1.95px tracking, `{colors.ink-muted}`), followed by a section headline in `{typography.display-hero}` (Caslon Pro 40px weight 400, `{colors.ink}`). 8px gap between eyebrow and headline; 48px above the pair as a section opener." ### Iteration Guide 1. Start with `{colors.background}` pure white — no tinting, no off-white. Pull in the warm panel surface (`{colors.surface}`) only for drawer fades or subtle background differentiation. 2. Set every corner to `{rounded.none}` from the start — no radius overrides later. The system is sharp rectangles, period. 3. Use `{typography.display-hero}` and `{typography.heading-section}` Caslon for any headline or editorial moment; switch to `{typography.heading-sub}` Akzidenz Med (uppercase, 1.95px tracking) for any label, eyebrow, or UI element. Never swap the roles. 4. Default button is `{colors.primary}` black fill with `{colors.on-primary}` white Akzidenz type — uppercase, 1.95px tracking, 16px 24px padding, `1px solid` border included. 5. Inputs use bottom-border only (`0px 0px 1px`), not full-rectangle borders — this is the system's form convention. 6. Transitions: use `cubic-bezier(0.19, 1, 0.22, 1)` for product image and media animations at `0.5–0.6s`; `ease-out` for button and UI feedback at `0.2–0.3s`. 7. The only non-monochrome color is `{colors.focus-ring}` blue — deploy it exclusively on keyboard-focused inputs for accessibility. Never use it decoratively. --- ## 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 Merit. Brand names and trademarks belong to their respective owners.