--- version: alpha name: "Chamberlain Coffee" description: "Token-first design system reference for Chamberlain Coffee." colors: # Canvas / surface background: "#ffffff" surface: "#f9f6f1" # warm off-white for secondary panels surface-dark: "#13294b" # deep navy — footer, dark feature sections # Text / ink ink: "#102341" # --kl-reviews-primary: deep navy-black, replaces pure black ink-secondary: "#215732" # forest green — secondary text, icon tint on-background: "#102341" on-surface: "#102341" # Brand accent primary: "#215732" # forest green — primary CTAs, nav accent on-primary: "#ffffff" primary-container: "#e0ebe4" # light green tint; was rgba(33,87,50,0.12) — flattened to hex # Interaction states focus-ring: "#215732" text-hover: "#13294b" # ink darkens on hover — was rgba(16,35,65,0.85) — flattened # Semantic error: "#dc1e37" # --bg-butterfly; form validation red # Borders border: "#e5e0d8" # warm neutral border; was rgba(0,0,0,0.08) — flattened border-dark: "#13294b" # navy border for high-contrast sections # Shadow tints shadow-soft: "#acabab" # was rgba(172,171,171,0.3) — flattened approximation # SKU palette — product colorways exposed as CSS variables sku-tan: "#d8bfaa" # --bg-tan: Tan / classic roast sku-peach: "#ffe1d1" # --bg-peach: Peach / light roast sku-sunshine: "#fec66d" # --bg-sunshine: Sunshine / golden blends sku-lime: "#9bc319" # --bg-lime: Matcha / green blends sku-matcha: "#64714a" # --bg-matcha-candle: Matcha Candle sku-pink: "#f04b6e" # --bg-pink: Strawberry / flavored sku-pistachio: "#e0717f" # --bg-pistachio: rosy pink SKU sku-turquoise: "#a5d2eb" # --bg-turquoise: iced / cold brew sku-bliss: "#f88f17" # --bg-bliss: Bliss / seasonal warm typography: display-hero: fontFamily: "Wunderpunkt, Georgia, 'Times New Roman', serif" fontSize: 50px fontWeight: 700 lineHeight: 1.0 letterSpacing: -1.5px display: fontFamily: "Wunderpunkt, Georgia, 'Times New Roman', serif" fontSize: 36px fontWeight: 700 lineHeight: 1.0 letterSpacing: -1.08px heading-section: fontFamily: "Wunderpunkt, Georgia, 'Times New Roman', serif" fontSize: 28px fontWeight: 600 lineHeight: 0.86 letterSpacing: -0.84px heading-sub: fontFamily: "Wunderpunkt, Georgia, 'Times New Roman', serif" fontSize: 19px fontWeight: 700 lineHeight: 1.5 letterSpacing: -0.48px body-large: fontFamily: "KP Sans, ui-sans-serif, system-ui, Arial, sans-serif" fontSize: 18px fontWeight: 300 lineHeight: 1.33 letterSpacing: -0.54px body: fontFamily: "KP Sans, ui-sans-serif, system-ui, Arial, sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 1.5 letterSpacing: -0.48px nav-link: fontFamily: "KP Sans, ui-sans-serif, system-ui, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0px button-ui: fontFamily: "Wunderpunkt, Georgia, 'Times New Roman', serif" fontSize: 16px fontWeight: 700 lineHeight: 1.0 letterSpacing: -0.48px label-ui: fontFamily: "KP Sans, ui-sans-serif, system-ui, Arial, sans-serif" fontSize: 14px fontWeight: 300 lineHeight: 1.6 letterSpacing: -0.48px caption: fontFamily: "KP Sans, ui-sans-serif, system-ui, Arial, sans-serif" fontSize: 12px fontWeight: 500 lineHeight: 1.0 letterSpacing: -0.36px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 80px 4xl: 112px rounded: none: 0px sm: 6px md: 15px lg: 30px xl: 50px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 12px 24px button-primary-hover: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 12px 24px button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.border}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 12px 24px button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" borderColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.md}" padding: 12px 24px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px card-product: backgroundColor: "{colors.background}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 16px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.border}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 12px 16px input-focus: backgroundColor: "{colors.background}" textColor: "{colors.ink}" borderColor: "{colors.focus-ring}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 12px 16px badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px badge-sku: backgroundColor: "{colors.sku-tan}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 10px --- # Chamberlain Coffee Design System ## Overview Chamberlain Coffee opens on a clean white canvas that immediately yields to personality — not through a single dominant brand color, but through a shifting mosaic of product-driven colorways. Each SKU brings its own hue: a peachy nude for the light roast, buttery sunshine gold for the golden blend, watercolor turquoise for the cold brew, a coral-pink for the strawberry flavor. The white surface doesn't compete; it holds everything together, letting each product's natural palette breathe. The effect is warm and curated without feeling loud, like a well-lit café shelf where the bags themselves are the art. The typography system is built around two custom typefaces with a clear hierarchy. Wunderpunkt — a proprietary serif with clean geometric bones — carries all the character work: headlines, callouts, button labels, and brand voice copy. It has the weight and optical authority of a quality serif but reads fresh rather than stuffy, in keeping with Emma Chamberlain's audience. KP Sans handles the functional layer — body copy, navigation links, metadata, and supporting UI — where legibility and neutral efficiency are the goals. Together the pair creates a split-personality system: warm and editorial at the top, clean and direct at the utility level. Tight negative tracking on Wunderpunkt at display sizes (`-1.08px` to `-1.5px`) gives headlines a locked, confident mass. The shapes are generously rounded. A dominant 30px radius on product imagery, cards, and interactive containers gives every element a soft, handled quality — as if plucked from a specialty grocery shelf. Buttons hit 15px. Major UI panels round to 50px. The system never uses sharp corners in any branded context, anchoring the visual language in warmth and approachability. Depth comes from two places: a subtle navigation shadow (`rgba(172,171,171,0.3) 0px -1px 10px`) on scroll, and occasional deep navy drop shadows (`rgba(0,0,0,0.15) 0px 0px 30px`) behind hero product imagery. The rest is flat — color and roundness do the heavy lifting. **Key Characteristics:** - White canvas (`{colors.background}`) as the neutral ground — the SKU colorways fill it, never a branded tint - Two-font system: Wunderpunkt (serif, display + CTAs) and KP Sans (sans, body + nav) - Tight negative tracking on display: `-1.08px` at 36px, `-1.5px` at 50px — headlines lock into mass - 30px radius on product cards and major containers (`{rounded.lg}`) — the signature soft shelf quality - 15px radius (`{rounded.md}`) on buttons and interactive elements — rounded without going full pill - Deep forest green (`{colors.primary}`) as the single consistent CTA and brand accent - Deep navy (`{colors.surface-dark}`) for footer, dark panels, and secondary anchor surfaces - SKU chromatic palette: 9+ product colorways as CSS custom properties for per-flavor surfaces - Button scale animation on hover (`matrix(1.09831, 0, 0, 1.09831, 0, 0)`) — a subtle, confident affordance - KP Sans at weight 300 for body and supporting copy — lightness signals premium, not economy - No gradients in UI; gradients belong to product photography and packaging illustration only - Emma Chamberlain's illustrated animal characters (bears, bunnies) as editorial art — never generic stock ## Colors ### Primary - **White Canvas** (`{colors.background}`): The default page surface — pure white, completely neutral. The products provide all the warmth. - **Warm Panel** (`{colors.surface}`): A soft off-white (`#f9f6f1`) for secondary sections, cards on white, and footer panel backgrounds. Slightly buttery, never clinical. - **Deep Navy** (`{colors.surface-dark}`): Footer, dark feature panels, and high-contrast promotional moments. The grounding dark of the system. ### Brand Accent - **Forest Green** (`{colors.primary}`): The single branded accent color — applied to primary CTAs, active nav states, focus rings, and selected UI elements. Evokes the craft-coffee sourcing story without leaning earthy. - **Green Container** (`{colors.primary-container}`): A soft green tint for badges, category chips, and label backgrounds where green identity is needed without full saturation. ### Text - **Navy Ink** (`{colors.ink}`): Deep navy-black for all primary text — heading, body, captions. Not pure black; the navy warmth prevents clinical coldness. - **Forest Green Ink** (`{colors.ink-secondary}`): Secondary text, icon tints, and light supporting copy where a warm accent is needed within body flow. - **Hover Deepened** (`{colors.text-hover}`): The ink color intensifies slightly on interactive text — was `rgba(16,35,65,0.85)`, flattened to `#13294b`. ### Semantic - **Error Red** (`{colors.error}`): Form validation and error states (`#dc1e37`), sourced from `--bg-butterfly`. ### Borders & Shadow - **Warm Border** (`{colors.border}`): Hairline dividers and input outlines — a warm off-white that reads as structural without competing. - **Navy Border** (`{colors.border-dark}`): High-contrast borders on dark panels and navigation chrome. - **Shadow Soft** (`{colors.shadow-soft}`): Nav and scroll-shadow tint. Was `rgba(172,171,171,0.3)` — used for the sticky header shadow at low opacity. ### SKU Palette Chamberlain Coffee exposes per-product colorways as CSS custom properties. Each flavor family has a named surface color (`--bg-*`) that drives product card backgrounds, flavor selectors, and seasonal campaign surfaces: - **Tan** (`{colors.sku-tan}`): Classic / original roast - **Peach** (`{colors.sku-peach}`): Light roast, soft morning flavor - **Sunshine** (`{colors.sku-sunshine}`): Golden blends, matcha-adjacent warm - **Lime** (`{colors.sku-lime}`): Matcha and green blends - **Turquoise** (`{colors.sku-turquoise}`): Iced and cold brew - **Pink / Pistachio / Bliss** (`{colors.sku-pink}`, `{colors.sku-pistachio}`, `{colors.sku-bliss}`): Seasonal and flavored variants ## Typography ### Font Family - **Display / Brand Voice**: `Wunderpunkt`, with fallbacks: `Georgia, 'Times New Roman', serif`. Self-hosted in Light (300), Regular, and Bold (700) cuts. The brand typeface — used for all display headlines, CTAs, product callouts, and editorial copy. - **Body / UI**: `KP Sans`, with fallbacks: `ui-sans-serif, system-ui, Arial, sans-serif`. Self-hosted in Light (300), Medium, Bold (700), and Black cuts. The functional typeface — body, navigation, metadata, captions. *Note: Both typefaces are proprietary custom fonts. For external implementations, Wunderpunkt can be approximated by `Recoleta`, `Playfair Display`, or `DM Serif Display`; KP Sans by `DM Sans`, `Plus Jakarta Sans`, or `Nunito Sans` at equivalent weights.* ### Hierarchy | Token | Use | |---|---| | `display-hero` | Hero headlines, product story headers — Wunderpunkt 700 at 50px, -1.5px tracking | | `display` | Section heads, campaign callouts — Wunderpunkt 700 at 36px, -1.08px tracking | | `heading-section` | Sub-section labels, product card titles — Wunderpunkt 600 at 28px | | `heading-sub` | Inline callouts, emphasis copy, feature labels — Wunderpunkt 700 at 19px | | `body-large` | Lead paragraphs, intro copy — KP Sans 300 at 18px, 1.33 line-height | | `body` | Standard reading text — KP Sans 300 at 16px, 1.5 line-height | | `nav-link` | Navigation, utility links — KP Sans 400 at 16px | | `button-ui` | All button labels, CTA text — Wunderpunkt 700 at 16px | | `label-ui` | Supporting metadata, price secondary, fine UI labels — KP Sans 300 at 14px | | `caption` | Legal text, footnotes, badges — KP Sans 500 at 12px | ### Principles - **Wunderpunkt carries personality; KP Sans carries information.** Every editorial moment belongs to Wunderpunkt; every functional moment belongs to KP Sans. The split is strict — neither typeface does the other's job. - **Light weight is a premium signal.** KP Sans at weight 300 for body and supporting copy communicates refinement, not absence. The brand's tone is "quality everyday" — heavy body type would feel cheap. - **Tight tracking at display sizes.** Wunderpunkt at 36–50px uses `−1.08px` to `−1.5px` letter-spacing. Headlines lock into a dense confident shape; the tracking should feel like the letters belong together, not like they're merely adjacent. - **Bold Wunderpunkt for CTAs.** Button labels use the same font as display headlines (Wunderpunkt 700). This keeps CTAs visually connected to the brand voice — they don't devolve into generic sans buttons. - **KP Sans remains at 400 only for navigation.** Nav links step up from the body's 300 to 400 for legibility and affordance clarity, but never reach bold weight in standard states. ## Layout ### Spacing System The complete spacing scale is in the `spacing:` token block above. Base unit: 8px. Spacing leans toward generous section breathing at the macro level (80–112px between major page sections) while staying tight inside component groups (8–16px between list items, 24px for card padding). The page doesn't feel sparse — the product photography fills the visual budget — but section transitions breathe deliberately, pacing the scroll like a curated editorial. ### Grid & Container - Max content width: ~1280px; most sections respect a centered container with 24–32px horizontal padding - Hero: Full-bleed product imagery or video, text overlay centered or left-aligned - Product grid: 3–4 columns desktop, each card on its SKU-colored surface - Feature sections: 2-column text+image pairs, occasionally full-bleed - Breakpoints: 1024px, 768px, 480px, 375px cadence (Tailwind-influenced arbitrary values internally) ### Whitespace Philosophy - **Product imagery fills the space budget.** Pages rarely need expansive whitespace to feel premium because the photography and illustration work does that job. Layout whitespace is structural, not atmospheric. - **Generous macro, tight micro.** 80–112px between sections, but within sections components sit 8–24px apart. The visual rhythm is "chapters separated by air, paragraphs tightly composed." - **Color as section identity.** Some sections swap the white canvas for a SKU palette color as the background — the peach panel, the sunshine panel — using color shift rather than whitespace as the section break. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Body text, inline elements, most cards | | Nav Glow (Level 1) | `rgba(172,171,171,0.3) 0px -1px 10px 0px` | Sticky header — appears on scroll | | Card Lift (Level 2) | `rgba(0,0,0,0.15) 0px 0px 30px 0px` | Hero product imagery, featured call-outs | | Modal (Level 3) | `rgba(0,0,0,0.3) 0px 32px 68px 0px` | Overlays, dialogs, drawer panels | | Focus Ring | `0 0 0 2px {colors.focus-ring}` | Interactive focus state on inputs and buttons | **Shadow Philosophy**: Chamberlain Coffee's depth system is minimal and warm. The nav shadow on scroll is the most-seen treatment — a barely-there soft halo that lifts the header off the content. Product photography has the largest shadow allowance (`0px 0px 30px rgba(0,0,0,0.15)`) because a well-lit product on a light background benefits from just enough grounding. Everything else is flat. The system trusts color and roundness to do more depth work than shadow. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Internal structural use only — not exposed in branded UI | | `sm` | 6px | Input fields, small chips, cookie consent UI | | `md` | 15px | Buttons, secondary cards, selector pills — the interactive standard | | `lg` | 30px | Product image frames, major content cards, hero panels — the dominant radius | | `xl` | 50px | Large feature panels, mobile drawer tops — generous architectural rounding | | `pill` | 9999px | Tag chips, promotion badges, flavor selectors | Chamberlain Coffee's radius language is unmistakably soft. The 30px dominant on product containers evokes a product label with rounded corners — handled, physical, trustworthy. The 15px on buttons feels naturally derived from the 30px system: interactive elements are softer than structural ones, not sharper. The system has no use for sharp corners in brand contexts. ## Components The complete component spec lives in the `components:` token block above. ### Button variants - **`button-primary`** — Forest green (`{colors.primary}`) fill, white label in Wunderpunkt 700, 15px radius. The branded action: "Shop Now", "Add to Cart", "Subscribe". Hover: scale animation (~10% scale-up via CSS transform matrix) + background shifts to deep navy. - **`button-secondary`** — White background, navy ink, warm border, 15px radius. Used for secondary actions and explore CTAs. Hover: surface tints to `{colors.surface}`, border shifts to forest green. - **`button-ghost`** — No background, no border, Wunderpunkt bold ink text. Navigation utility and minimal-context CTAs (e.g., "View All" links in section footers). ### Cards **Product Card** — White background, 30px radius, 16px padding. SKU surface color can override the white background for flavor-matched merchandising. Wunderpunkt heading-sub for product name; KP Sans label-ui for price and metadata. **Editorial Card** — Warm panel (`{colors.surface}`) background, 30px radius, 24px padding. Used for blog, recipe, and lifestyle content. Generous padding gives long-form content room to breathe. ### Inputs - Standard border: `1px solid {colors.border}`, 6px radius, 12px 16px padding, KP Sans body - Focus: border transitions to `{colors.focus-ring}` (forest green), no glow halo - Newsletter pair: input + submit joined, 7px asymmetric radius (`7px 0 0 7px` / `0 7px 7px 0`) ### Badges / Tags **Category Badge** — Green container (`{colors.primary-container}`) fill, forest green text, KP Sans 500 12px, pill radius, 4px 10px padding. Category labels and product tags. **SKU Badge** — Per-flavor surface color (e.g., `{colors.sku-peach}`), navy ink, pill radius. Flavor selectors and collection filters — chromatic product system in pill form. ### Navigation - Sticky header: white background, subtle shadow on scroll - Logo (Chamberlain Coffee wordmark) left-aligned - Center links: KP Sans 400 16px, navy ink, hover shifts to forest green - Right: cart icon, account icon — 44px tap targets - Mobile: hamburger collapse below 768px ## Do's and Don'ts ### Do - Use `{colors.primary}` (forest green) as the singular CTA color — every primary action gets this treatment - Apply `{rounded.lg}` (30px) to product imagery and major containers — the soft shelf quality is the brand - Pair Wunderpunkt for display and brand voice with KP Sans for all functional copy — no exceptions - Use tight negative tracking on Wunderpunkt headlines (`-1.08px` at 36px, `-1.5px` at 50px) - Set KP Sans body copy at weight 300 — lightness signals quality, not absence - Apply the SKU palette colors as product card backgrounds — the chromatic system is the merchandising - Let photography carry the warmth — the white canvas is a neutral stage, not a competitor - Use the 15px button radius and 30px card radius consistently — the shape language is non-negotiable - Reserve `{colors.surface-dark}` (deep navy) for footer, dark panels, and high-contrast hero moments - Scale buttons up ~10% on hover via CSS transform — it's subtle and confident ### Don't - Don't mix KP Sans and Wunderpunkt within the same text block — keep the roles completely separate - Don't substitute a third typeface for branded moments — Wunderpunkt's proprietary character is the brand identity - Don't use sharp (0px) radius on any branded UI element — softness is structural, not decorative - Don't use pure black (`#000000`) for text — always `{colors.ink}` (deep navy `#102341`) - Don't add gradients to UI surfaces — gradients belong to photography and packaging only - Don't apply `{colors.primary}` to secondary buttons or decorative elements — preserve its CTA stamp - Don't overcrowd the white canvas with color — the SKU palette colors are applied selectively per product context, not as ambient decoration - Don't use KP Sans at weights above 400 in body contexts — bold weight in body feels generic and off-brand - Don't use `{colors.sku-*}` colors for text or borders outside of product-surface contexts — they are SKU surface swatches, not semantic colors --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <375px | Single column, hero display drops to 28–32px | | Mobile | 375–480px | Single column, 36px hero, stacked CTAs, full-width product cards | | Tablet Small | 480–768px | 2-column product grid, 40px hero, condensed nav | | Tablet | 768–1024px | 2–3 column grids, 44px hero, desktop nav revealed | | Desktop | 1024–1280px | Full 3–4 column grid, 50px hero, standard container | | Large Desktop | ≥1280px | Max container, generous section padding (112px), cinematic hero imagery | ### Touch Targets - Primary CTAs: 44px minimum height, 15px radius maintained - Product cards: full card is the tap target — no nested conflicting zones - Nav icons (cart, account): 44px minimum tap area - SKU selectors: pill chips at minimum 36px height with 10px padding on smallest breakpoints ### Collapsing Strategy - **Nav**: Horizontal link row collapses to hamburger below 768px; full-screen overlay menu in white - **Hero**: Centered text over full-bleed product image on mobile; side-by-side on tablet+ - **Product grid**: 3–4 col desktop → 2 col tablet → 1 col mobile; 30px card radius maintained throughout - **Section spacing**: 112px desktop → 80px tablet → 48px mobile — compresses but never collapses entirely - **Display type**: 50px desktop hero → 40px tablet → 28px mobile; tight tracking maintained proportionally ### Image Behavior - Product photography: fluid scaling with `object-fit: cover` within rounded containers - 30px card radius preserved at all breakpoints — the shape is too important to flatten on mobile - Illustrated animal characters: scale proportionally, occasionally hidden at smallest breakpoints - No art-direction swap — the same warm photography reads across all viewports --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (`#ffffff`) - Warm panel: `{colors.surface}` (`#f9f6f1`) - Primary text: `{colors.ink}` (`#102341`) - Forest green accent: `{colors.primary}` (`#215732`) - On-primary: `{colors.on-primary}` (`#ffffff`) - Deep navy: `{colors.surface-dark}` (`#13294b`) - Focus ring: `{colors.focus-ring}` (`#215732`) - Error: `{colors.error}` (`#dc1e37`) - Border: `{colors.border}` (`#e5e0d8`) ### Example Component Prompts - "Build a product hero on white (`{colors.background}`). Headline at 50px Wunderpunkt weight 700, line-height 1.0, letter-spacing -1.5px, color `{colors.ink}`. Subhead at 18px KP Sans weight 300, line-height 1.33. Primary CTA: forest green (`{colors.primary}`) background, white text in Wunderpunkt 700 16px, 15px radius, 12px 24px padding. Apply a 10% scale hover transform." - "Design a product card on a peach SKU surface (`{colors.sku-peach}`), 30px radius, 16px padding. Product name in Wunderpunkt 700 19px, letter-spacing -0.48px. Price in KP Sans 300 14px. Add-to-cart button: forest green fill, white Wunderpunkt 700 label, 15px radius." - "Create a flavor selector row with pill chips (`{rounded.pill}`) — each chip uses its SKU surface color as background (`{colors.sku-tan}`, `{colors.sku-sunshine}`, `{colors.sku-turquoise}`, etc.), navy ink text in KP Sans 500 12px, 4px 10px padding. Active chip adds a 2px forest green border." - "Design a newsletter section on deep navy (`{colors.surface-dark}`). Headline in Wunderpunkt 700 36px white, letter-spacing -1.08px. Email input: white background, 7px radius on left (`7px 0 0 7px`), KP Sans 300 body. Submit button: forest green fill, white label, `0 7px 7px 0` radius — forms a joined unit." - "Build a category badge: green container (`{colors.primary-container}`) fill, forest green (`{colors.primary}`) text, KP Sans 500 12px, pill radius, 4px 10px padding. Use for product category tags like 'Medium Roast' or 'Ready-to-Drink'." - "Compose an editorial card on warm panel (`{colors.surface}`), 30px radius, 24px padding. Article title in Wunderpunkt 700 28px, letter-spacing -0.84px. Body in KP Sans 300 16px, line-height 1.5. 'Read More' ghost button: no background, forest green text, Wunderpunkt 700." ### Iteration Guide 1. Start with white (`{colors.background}`) as the canvas — never tint the base to warm it; warmth comes from product photography and SKU surface swatches 2. Forest green (`{colors.primary}`) is the only branded accent in the UI — protect it for CTAs and active states only 3. Wunderpunkt for every headline, callout, and button label; KP Sans for every navigation link, body, and caption — never mix within a text block 4. Apply tight negative tracking to Wunderpunkt display: `-1.5px` at 50px, `-1.08px` at 36px, `-0.48px` at 19px and below 5. 30px radius for product surfaces and major containers; 15px for buttons and interactive elements — the shape ratio is consistent 6. Assign SKU palette colors (`{colors.sku-*}`) as card backgrounds per product family — chromatic merchandising is how products tell themselves apart 7. KP Sans at weight 300 for all body copy — the lightness is intentional, not a contrast failure 8. Add `transform: scale(1.098)` on button hover — the scale-up is the primary affordance signal 9. Deep navy (`{colors.surface-dark}`) anchors the footer and high-contrast panels — the only dark in an otherwise light system 10. No drop shadows on flat UI — reserve shadow for the sticky nav and hero product imagery only --- ## 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 Chamberlain Coffee. Brand names and trademarks belong to their respective owners.