---
version: alpha
name: "Onyx Coffee Lab"
description: "Stark black ink on bone-white, Helvetica Neue at extended tracking, flat-zero decoration, specialty coffee authority through editorial restraint."

colors:
  background: "#ffffff"
  surface: "#eee9df"  # warm bone/cream — secondary panels, promo banners
  surface-alt: "#fbfaf3"  # near-white tint — feature section alternates
  ink: "#1a1a1a"  # near-black primary text — richer than true black
  ink-secondary: "#303030"  # charcoal — links, secondary text /* estimated from dembrandt #303030 raw color */
  ink-muted: "#767676"  # mid-gray — metadata, roast indicators, small labels /* estimated */
  on-background: "#1a1a1a"
  on-surface: "#1a1a1a"
  primary: "#000000"  # true black — primary CTA, logo mark, high-emphasis elements
  on-primary: "#ffffff"
  primary-container: "#1a1a1a"  # nearly identical to primary for solid dark panels
  text-hover: "#000000"  # hover state — full black on near-black transitions /* was rgb(0,0,0) from dembrandt */
  focus-ring: "#1a1a1a"  # matches ink — consistent monochromatic focus treatment /* estimated */
  border: "#a9a9a9"  # silver-gray border — inputs, light dividers /* was rgb(169,169,169) from dembrandt */
  border-subtle: "#d6d0c6"  # warm-tinted hairline — bone-cream surface separators /* estimated */
  shadow-soft: "#d6d0c6"  # warm gray — reserved, rarely used; site is essentially shadow-free /* estimated */
  error: "#cc3333"  # standard form error /* estimated */
  success: "#2a7a4f"  # standard confirmation /* estimated */

typography:
  display-hero:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 72px
    fontWeight: 300
    lineHeight: 1.0
    letterSpacing: 6px  # wide-tracked uppercase display — Onyx signature
  display:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 300
    lineHeight: 1.05
    letterSpacing: 4px
  heading-section:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.15
    letterSpacing: 3px
  heading-sub:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.3
    letterSpacing: 2px
  body-large:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 300
    lineHeight: 1.7
    letterSpacing: 0.5px
  body:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.8  # from dembrandt extraction
    letterSpacing: 0px
  nav-link:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 2px  # uppercase spaced navigation
  button-ui:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 2.5px  # UPPERCASE spaced button labels
  label:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 3px  # extreme tracking on smallest labels — "ROAST LEVEL", "ORIGIN"
  caption:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 2.7  # from dembrandt extraction
    letterSpacing: 1px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  2xl: 64px
  3xl: 96px
  4xl: 128px

rounded:
  none: 0px
  sm: 4px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 28px
  button-secondary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 28px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.primary}"
    borderBottomColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px 0px
  card-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 20px 0px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    borderColor: "{colors.border}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    borderColor: "{colors.primary}"
    focusRing: "2px solid {colors.focus-ring}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 4px 10px
  badge-outline:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    borderColor: "{colors.border}"
    typography: "{typography.label}"
    rounded: "{rounded.none}"
    padding: 3px 8px
  nav-primary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.nav-link}"
    borderBottomColor: "{colors.border-subtle}"
    padding: 0px 0px
  nav-primary-active:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    borderBottomColor: "{colors.primary}"
    typography: "{typography.nav-link}"
    padding: 0px 0px
---

# Onyx Coffee Lab Design System

## Overview

Onyx Coffee Lab does not persuade you with warmth or atmosphere. The site opens on a white page (`{colors.background}`) and immediately announces its position: this is a laboratory, not a cafe. The grid is rigorous. The typeface — Helvetica Neue, always — runs at extreme letter-spacing in uppercase, giving even secondary labels a kind of authority usually reserved for museum signage. The ink (`{colors.ink}`) is near-black rather than true black, a precision call that prevents harshness at the cost of zero approachability. The palette is essentially a study in restraint: white, a warm bone cream (`{colors.surface}`), a charcoal midpoint (`{colors.ink-secondary}`), and true black as the lone accent. There are no decorative colors, no brand-specific hue, no warm amber to signal "coffee." The design earns its credibility by refusing those shortcuts.

The signature move is spaced uppercase Helvetica. Navigation items, section labels, button text, flavor descriptors — "DARK CHOCOLATE | MOLASSES | RED WINE" — all run in extended tracking between 2px and 6px. At display scale (48–72px), this produces monumental spaced headlines that read like archival catalog entries. At caption scale (10–11px), the same treatment creates a taxonomy feeling for roast levels and origin metadata. The entire typographic system is one typeface, one principle — tracking encodes hierarchy, not weight variation. It is a brutal constraint applied with total consistency, and it works.

The supporting texture is bone cream (`{colors.surface}`) deployed as an alternating section surface rather than a mood tone. Where most DTC sites use cream to signal warmth, Onyx uses it as pure visual rhythm — every other major section lifts off white onto bone, then returns. No gradients, no shadows, no radiused corners. The button is a hard rectangle; the card has no chrome. The photography carries all the emotion: extreme macro shots of coffee grounds, processing machinery, origin farm landscapes in high contrast. The design system's job is to hold still while the photography does the work.

**Key Characteristics:**
- True white (`{colors.background}`) as page canvas — no warmth implied by the base layer
- Helvetica Neue at extreme letter-spacing (2–6px) carries the entire brand personality
- UPPERCASE at every level from nav links to product labels — creates a catalog taxonomy feel
- Bone cream (`{colors.surface}`) used as a structural alternating surface, not a mood color
- Near-black ink (`{colors.ink}`) in place of pure black — slightly softer but still high contrast
- Charcoal `{colors.ink-secondary}` for secondary text and links — tonal layering without hue
- Zero border-radius on interactive elements — hard rectangles throughout
- No drop shadows, no gradients, no illustrative decoration — photography provides all depth
- Flavor note descriptors set in tracked uppercase function as both content and graphic texture
- `{colors.border}` silver-gray for input outlines and hairlines — the only non-ink structural color
- 0.2s ease-in transitions on border-color for links — the only motion signature in the system
- Product cards foreground flavor notes as the primary differentiator over names or roast labels

## Colors

### Primary
- **White** (`{colors.background}`): The page canvas. Hard, clean, non-warm — this is not a coffee-shop cream.
- **Near-Black** (`{colors.ink}`): All primary text. Chosen over pure black to read as deliberately considered rather than defaulted.

### Secondary Surfaces
- **Bone Cream** (`{colors.surface}`): The alternating section surface — warm but not sentimental. Used for hero panels, promotional banners ("Free Shipping On Orders $40+"), and secondary content zones.
- **Off-White** (`{colors.surface-alt}`): A near-white tint for very subtle surface differentiation in feature sections.

### Brand Accent
- **True Black** (`{colors.primary}`): The single chromatic accent. CTAs, the Onyx logo mark, product launch badges. Not a "brand color" in the decorative sense — it is the absence of color used as authority.

### Text Hierarchy
- **Charcoal** (`{colors.ink-secondary}`): Links, secondary text, nav items in resting state — perceptibly softer than ink without introducing any hue.
- **Mid-Gray** (`{colors.ink-muted}`): Metadata, timestamps, fine-print labels. Drops to the minimum contrast threshold.

### Structural
- **Silver Border** (`{colors.border}`): Input outlines, table dividers, hairline separators. The only color in the system with notable chroma (cool silver rather than warm gray).
- **Warm Hairline** (`{colors.border-subtle}`): Section separators on bone-cream surfaces where silver would read too cool.

### States
- **Hover Black** (`{colors.text-hover}`): Full black on transition for link hover states. The 0.2s ease-in on border-color is the only animated property declared.
- **Focus Ring** (`{colors.focus-ring}`): Monochromatic — matches ink. No blue, no brand-tinted ring.

### Semantic
- Semantic error (`{colors.error}`) and success (`{colors.success}`) are implementation utilities, not brand expressions. They appear only in form validation and cart confirmation.

## Typography

### Font Family
- **Primary**: Helvetica Neue, with fallbacks: `Helvetica, Arial, sans-serif`
- No secondary typeface. The system is strict mono-font.
- No custom web fonts, no variable font axis — standard system-class sans throughout.
- **OpenType Features**: Extended letter-spacing is the only typographic treatment. No ligatures, no alternate glyphs, no numeric variants. The typeface is used as a neutral substrate for tracking to act upon.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Full-width origin campaign headlines — "C O L O M B I A" spaced at 6px, 72px, weight 300 |
| `display` | Section openers, product page headline — 48px, 4px tracked uppercase |
| `heading-section` | Category headings, page section titles — 28px, 3px tracking |
| `heading-sub` | Product card names, secondary section heads — 18px, 2px tracking |
| `body-large` | Lead copy, about page prose, tasting notes paragraphs — 18px, weight 300 |
| `body` | Standard product descriptions, collection copy — 15px, 1.8 line-height from extraction |
| `nav-link` | Header navigation, footer column headers — 13px, 2px tracking, UPPERCASE |
| `button-ui` | All CTA labels — 12px, 2.5px tracking, weight 500, UPPERCASE |
| `label` | "ROAST LEVEL", "ORIGIN", "PROCESS" field labels — 11px, 3px tracking |
| `caption` | Fine print, shipping notes, footnotes — 10px, 2.7 line-height from extraction |

### Principles
- One typeface, one weight range (300–500), one variable: letter-spacing. All hierarchy is encoded in size and tracking, never in font switching.
- Weight 300 for large display text — extreme tracking at light weight creates authority without aggression.
- Weight 400 for body reading — neutral and transparent.
- Weight 500 only for UI controls (buttons, labels, badges) — just enough visual mass to distinguish interactive from reading text.
- UPPERCASE throughout the system except long-form body copy. This is a rigorous constraint, not a stylistic tic.
- No italic usage — the system is strictly roman. Italics would introduce warmth that contradicts the lab aesthetic.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 8px.

Onyx uses generous vertical rhythm to place expensive whitespace around product photography — the space around an image is part of the premium signal. Horizontal content is tightly managed; vertical gaps between sections are large (64–128px) to slow the pace and force consideration.

### Grid & Container
- Max content width: approximately 1280px, centered
- Product grid: 3–4 column on desktop, strict equal-column layout
- Hero: full-bleed photography with overlaid text, or split 50/50 image/text at section level
- Large typographic moments (origin campaign headers) run edge-to-edge
- Footer: multi-column link structure, bone-cream background, matching nav tracking

### Whitespace Philosophy
- Whitespace is the luxury signal — abundant vertical spacing between sections communicates that nothing needs to compete for attention.
- Images bleed edge-to-edge or sit in exact grid cells with no chrome (no card borders, no radius, no shadow).
- Flavor notes and origin descriptions are set loosely with 1.7–1.8 line-height — reading space as considered as the content itself.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border, no radius | Page canvas, body text, product photography frames |
| Hairline (Level 1) | `1px solid {colors.border-subtle}` | Section separators, footer column dividers |
| Input Edge (Level 2) | `1px solid {colors.border}` | Form inputs, search fields, subscription fields |
| Focus (Level 3) | `2px solid {colors.focus-ring}` | Keyboard focus on inputs and CTAs |
| Button Edge | `1px solid {colors.primary}` | Outline button variant — border IS the button |

**Shadow Philosophy**: Onyx has no drop shadows at any layer. The dembrandt extraction confirms zero shadow declarations. Depth is communicated through two mechanisms only: photography scale (full-bleed images fill the entire visual weight budget) and surface alternation (white → bone cream → white creates a paged rhythm without any Z-axis simulation). A drop shadow on an Onyx card would read as a design error, not an emphasis.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything interactive — buttons, inputs, cards, badges |
| `sm` | 4px | Utility-only: tooltip containers, dropdown menus where no sharp edge is practical |
| `pill` | 9999px | Tags and status indicators if a fully-rounded element is ever introduced |

Onyx is a hard-edge system. The `{rounded.none}` treatment on buttons and inputs is not an omission — it is the most visible signal of the brand's character. Round corners suggest friendliness; this system is not friendly. It is authoritative.

## 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`** — solid black rectangle (`{colors.primary}` fill, `{colors.on-primary}` text), hard 0px corners, UPPERCASE label at 12px weight 500 with 2.5px tracking. The most typographically visible button in specialty coffee.
- **`button-secondary`** — black outline on transparent background. Same sharp rectangle, same UPPERCASE label. Hover inverts to filled black.
- **`button-ghost`** — no background, no border. Text underline on hover. Used for "View Coffees →" inline navigation links.

### Cards

Product cards are grid cells without chrome: no background panel, no border, no shadow, no radius. Photography sits directly on white. Below: flavor note descriptor in uppercase spaced label, then product name in `{typography.heading-sub}`, then price in body weight. The card hover shifts the underlying surface from `{colors.background}` to `{colors.surface}` — the only visual affordance.

### Inputs

Hard rectangles. `1px solid {colors.border}` at rest. `2px solid {colors.focus-ring}` (full black) on focus. No radius, no inner shadow. Placeholder text in `{colors.ink-muted}`. The form aesthetic matches the button aesthetic: scientific instrument, not friendly field.

### Badges / Tags

Solid black fill (`{colors.primary}`), white text (`{colors.on-primary}`), hard 0px corners, UPPERCASE label at 11px weight 500, 3px tracking. Used for: "NEW ARRIVAL", "SUBSCRIPTION", process type indicators ("WASHED", "NATURAL"). A badge reads like a stamp on a lab sample container.

### Navigation

Horizontal top-of-page nav: white background, logo wordmark centered or left, menu items in `{typography.nav-link}` UPPERCASE with 2px tracking. Links use `{colors.ink-secondary}` by default, transition to `{colors.text-hover}` on hover via `0.2s ease-in border-color`. The only animated state in the system. Secondary nav bar for promotional messaging uses `{colors.surface}` background, matching typeface.

## Do's and Don'ts

### Do
- Set ALL interactive label text in UPPERCASE with minimum 2px letter-spacing — this is the typographic foundation of the brand
- Use `{colors.surface}` (bone cream) for alternating sections — it is a structural pacing tool, not a mood setter
- Keep all buttons and inputs at `{rounded.none}` — the hard edge is the identity signal
- Apply `{colors.primary}` (black) to primary CTAs, the logo, and high-emphasis badges only — it is the sole accent color
- Use weight 300 for display text — lightness at scale combined with tracking creates the right authority
- Let photography bleed edge-to-edge or sit in flush grid cells — never add border-radius or drop-shadow to images
- Use flavor note descriptors as typographic texture — tracked uppercase strings of tasting notes function as both content and pattern
- Maintain the `0.2s ease-in` transition for link hover border-color — it is the only motion in the system
- Use `{colors.ink-secondary}` for links at rest and `{colors.text-hover}` on hover — do not introduce color in this transition

### Don't
- Don't introduce a warm amber, coffee brown, or earthy brand accent — Onyx deliberately refuses the visual shorthand of coffee color
- Don't add border-radius to buttons, inputs, or product cards — even 2px undermines the system's character
- Don't use drop shadows at any layer — depth is achieved by photography scale and surface alternation only
- Don't introduce a second typeface — the entire system is Helvetica Neue; a decorative serif would undo the lab identity
- Don't use mixed-case for labels, badges, or navigation text — UPPERCASE with tracking is non-negotiable for chrome elements
- Don't use weight 700 or 800 anywhere in the system — the heaviest weight deployed is 500, for button labels only
- Don't use decorative illustration, hand-drawn ornament, or icon libraries — the system is photography-only for visual richness
- Don't use blue or any chromatic focus ring — focus states are monochromatic black (`{colors.focus-ring}`)
- Don't center-align long body copy — the system uses left alignment throughout for a rigorous editorial register
- Don't use `{colors.surface}` as a primary page background — it is an accent surface, not a canvas alternative

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, display scales to 32–40px |
| Mobile | 375–500px | Single column; 500px is the primary breakpoint per extraction |
| Tablet | 500–768px | 2-column product grid, display 40–48px, stacked hero |
| Desktop | 768–1280px | 3–4 column grid, full display scale, side-by-side editorial sections |
| Large Desktop | >1280px | Max content width ~1280px maintained, outer margin expands |

### Touch Targets
- Primary CTAs: 44px minimum tap height
- Navigation items: 44px row tap target with generous horizontal padding
- Product quick-add: full card width as tap zone on mobile
- No pill-radius targets — hard rectangles maintained on mobile

### Collapsing Strategy
- **Nav**: Horizontal nav collapses to hamburger icon; menu opens full-screen overlay on white
- **Display type**: 72px → 48px → 32px progressive scaling; letter-spacing proportionally reduced but never dropped below 2px
- **Product grids**: 4-col → 3-col → 2-col → 1-col; card aspect ratios maintained
- **Section spacing**: 128px desktop → 64px tablet → 40px mobile — generous spacing preserved at all sizes
- **Full-bleed photography**: Maintained at all breakpoints — mobile hero images bleed to all edges

### Image Behavior
- Full-bleed hero photography scales with viewport — no cropping, fill behavior
- Product photography maintains strict aspect ratio in grid cells
- No image rounded corners or drop shadows at any breakpoint
- High-contrast processing and macro photography translates cleanly to small screens

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (white)
- Alternate surface: `{colors.surface}` (bone cream)
- Primary text: `{colors.ink}` (near-black)
- Secondary text / links: `{colors.ink-secondary}` (charcoal)
- Muted text: `{colors.ink-muted}` (mid-gray)
- Brand accent / CTA: `{colors.primary}` (true black)
- On-primary: `{colors.on-primary}` (white)
- Border: `{colors.border}` (silver-gray)

### Example Component Prompts

- "Build a hero section on a white (`{colors.background}`) canvas. Center-aligned headline in Helvetica Neue 72px weight 300, `{colors.ink}`, letter-spacing 6px, UPPERCASE — 'SINGLE ORIGIN'. Below it: origin line in 13px weight 400, `{colors.ink-secondary}`, 3px letter-spacing. CTA button: `{colors.primary}` fill, `{colors.on-primary}` text, 0px border-radius, 14px 28px padding, 12px Helvetica Neue weight 500, 2.5px letter-spacing, UPPERCASE — 'SHOP NOW'."
- "Design a product card with no border, no shadow, no radius. Product photography fills top of card flush. Below: flavor notes string in 11px Helvetica Neue weight 500, `{colors.ink-secondary}`, 3px tracking, UPPERCASE — 'DARK CHOCOLATE | MOLASSES | RED WINE'. Product name below in 18px weight 400, `{colors.ink}`, 2px tracking. Price in 15px weight 400, `{colors.ink-muted}`. Card hover: background transitions from `{colors.background}` to `{colors.surface}`."
- "Create an origin campaign section on bone cream (`{colors.surface}`). Full-bleed spaced headline: 'C O L O M B I A' in 72px Helvetica Neue weight 300, `{colors.ink}`, 6px letter-spacing. Below: origin metadata in 11px weight 500, `{colors.ink-secondary}`, 3px tracking UPPERCASE — 'ALTITUDE: 1800M | PROCESS: WASHED | VARIETY: CATURRA'. Body paragraph in 18px weight 300, `{colors.ink}`, 1.7 line-height."
- "Build a newsletter signup bar on `{colors.primary}` (black) background. Label: 'SUBSCRIBE & SAVE' in 11px Helvetica Neue weight 500, `{colors.on-primary}`, 3px tracking. Input: no border-radius, 1px solid `{colors.border}`, 12px 16px padding, `{colors.background}` fill, `{colors.ink}` text. Submit button next to it: `{colors.on-primary}` fill, `{colors.primary}` text, 0px radius, same height as input, 12px weight 500 UPPERCASE."
- "Create a product badge for 'WASHED PROCESS': solid `{colors.primary}` fill, `{colors.on-primary}` text, 0px border-radius, 4px 10px padding, 11px Helvetica Neue weight 500, 3px letter-spacing, UPPERCASE. Place it flush to the top-left corner of a product photography frame with no shadow or outline."

### Iteration Guide

1. Start with `{colors.background}` white canvas and `{colors.ink}` near-black text — the system has no warm base layer
2. Apply Helvetica Neue throughout with UPPERCASE and minimum 2px letter-spacing for any chrome element
3. Use weight 300 for display-scale text (48px+), weight 400 for body, weight 500 for interactive labels only
4. Deploy `{colors.surface}` bone cream to alternate section backgrounds — not as mood, as rhythm
5. Keep all interactive elements at `{rounded.none}` — hard rectangles are the identity
6. Use `{colors.primary}` (true black) for primary CTAs and high-emphasis labels only — it is the sole accent color
7. No drop shadows, no gradients, no decorative illustration — photography carries all emotional weight

---

## 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 Onyx Coffee Lab. Brand names and trademarks belong to their respective owners.