---
version: alpha
name: "Mejuri"
description: "Token-first design system reference for Mejuri — an editorial fine jewelry brand built on a near-black and warm-neutral palette, custom grotesque uppercase headings, monospaced body type, and photography-first layouts."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f6f6f6"          # light secondary surface for panels and tinted backgrounds
  surface-warm: "#ebebe8"     # warm off-white — approx rgb(235,235,232); panel and soft divider use

  # Text / ink
  ink: "#0a0a0a"              # near-black primary text — softer than pure #000000 at scale
  ink-secondary: "#68675e"    # warm muted neutral — rgb(104,103,94); secondary labels, captions
  on-background: "#0a0a0a"
  on-surface: "#0a0a0a"

  # Brand accent
  primary: "#000000"          # pure black — the brand's load-bearing action color (CTAs, key borders)
  on-primary: "#ffffff"
  primary-container: "#f6f6f6" # light gray tinted container for secondary interactive surfaces

  # State / interaction
  text-hover: "#68675e"       # warm muted used for hover states on links and secondary actions
  focus-ring: "#000000"
  focus-tint: "#e5e5e5"       # light gray tint on focused/pressed interactive elements

  # Borders
  border: "#000000"           # primary 1px solid border on buttons and key containers
  border-light: "#e5e5e5"     # light separator — rgb(229,229,229); most-used divider value (673 count)

  # Shadow tints (blue-dark neutral — rgba(19, 34, 68, 0.08) flattened to opaque approximation)
  shadow-soft: "#d1d6e0"      # was rgba(19,34,68,0.08) over white — Google format requires hex

typography:
  display-hero:
    fontFamily: "SyndicatGrotesk, Arial, Helvetica, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 2.4px
  display:
    fontFamily: "SyndicatGrotesk, Arial, Helvetica, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 1.6px
  heading-section:
    fontFamily: "SyndicatGrotesk, Arial, Helvetica, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: 1.2px
  heading-sub:
    fontFamily: "SyndicatGrotesk, Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 0.28px
  body-large:
    fontFamily: "SimonMono, Courier New, Courier, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.32px
  body:
    fontFamily: "SimonMono, Courier New, Courier, monospace"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "SyndicatGrotesk, Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0.28px
  button-ui:
    fontFamily: "SyndicatGrotesk, Arial, Helvetica, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: 1px
  caption:
    fontFamily: "SyndicatGrotesk, Arial, Helvetica, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.24px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px

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

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    borderColor: "{colors.border}"
  button-primary-hover:
    backgroundColor: "{colors.ink-secondary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    borderColor: "{colors.border}"
  button-secondary-hover:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    borderColor: "{colors.border}"
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 0px
  button-ghost-hover:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 0px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px
  card-product:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 12px
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.border-light}"
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 12px 16px
    borderColor: "{colors.focus-ring}"
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  nav:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    borderColor: "{colors.border-light}"
---

# Mejuri Design System

## Overview

Mejuri built a fine jewelry website that refuses to look like a fine jewelry website. Where the category defaults to serif opulence, gold gradients, and velvet-dark backgrounds, Mejuri arrives in near-black and white — stark, editorial, and quietly confident. The primary canvas is pure `{colors.background}` white. The primary action color is pure `{colors.primary}` black. There is no gold, no warm amber, no metallic treatment. The jewelry does that work; the chrome stays out of the way.

The typeface system tells the same story through a more unexpected choice. Display headings are set in SyndicatGrotesk — a custom grotesque — at weight 500, fully uppercase, with aggressive positive letter-spacing (1.2–2.4px). This is not the brand-softening practice of mixing in a serif "for warmth." Mejuri's headings read like print magazine categories: "THE SUMMER GUIDE", "ALL JEWELRY", "NEW IN". Body text and UI copy, however, flip entirely to SimonMono, a custom monospace — a contrast pairing that is technically bold and contextually natural in a brand that sells measured, handcrafted objects. The monospace carries weight metadata, SKU details, and product descriptions with quiet technical authority. No other brand in fine jewelry uses this combination.

Structurally, the site is a two-act editorial frame: full-bleed editorial photography fills the hero (warm skin tones, bright summer exteriors, close-cropped jewelry detail), and the product grid below organizes with surgical grid discipline. Borders are 1px solid `{colors.border}` black on buttons and navigation. Radius is essentially absent — every element is sharp-cornered, a design decision that rhymes with the precision of the jewelry itself. Depth is minimal: a single family of low-opacity navy shadows (`{colors.shadow-soft}` approximated) appears only on floating UI elements like the chat widget. The overall impression is a modern art gallery shop: every surface clean, every label precise, every photograph valued above the chrome that surrounds it.

**Key Characteristics:**
- SyndicatGrotesk (custom grotesque) for all headings — uppercase, medium weight, tracked wide
- SimonMono (custom monospaced) for all body, UI, and detail copy — the unexpected category differentiator
- Pure black (`{colors.primary}`) as the sole interactive accent — CTAs, borders, icon strokes
- `{colors.ink}` near-black (`#0a0a0a`) as the primary text rather than pure black — marginal softening at reading scale
- `{colors.ink-secondary}` warm neutral (`#68675e`) for secondary labels, captions, and subdued metadata
- `{colors.border-light}` light gray (`#e5e5e5`) as the dominant separator — used 673 times, the most common color value in the computed styles
- Sharp `{rounded.none}` corners on every button, card, and container — no radius, no softening
- `1px solid {colors.border}` black borders on all primary CTA buttons — outline-style clarity over filled urgency
- Uppercase letter-spacing on every heading level — 1px minimum, 2.4px at hero scale
- Editorial two-column hero split: environmental photography left, model/lifestyle photography right
- 8px spacing base with a 12px dominant rhythm in component padding

## Colors

### Primary
- **Pure Black** (`{colors.primary}`): Every primary CTA button border and fill, navigation hover strokes, icon outlines, and 1px solid UI borders. The lone action color — black chosen over gold is the brand's most significant design statement.
- **Off-Black** (`{colors.ink}`): Primary text at `#0a0a0a` — a near-black that reads softer than pure `#000000` at body scale. Used for all headings, product names, prices, and body copy.
- **Pure White** (`{colors.background}`): The page canvas. Default card backgrounds, button fills on dark surfaces, nav background.

### Neutral Range
- **Warm Muted** (`{colors.ink-secondary}`): Secondary labels, metadata, subdued captions — the `rgb(104,103,94)` warm gray that ties Mejuri's palette back toward skin-tone warmth without introducing a dedicated brand color.
- **Light Surface** (`{colors.surface}`): Tertiary panel background for promotional zones, tinted secondary containers, soft hover fills.
- **Warm Off-White** (`{colors.surface-warm}`): The warmest background tone — `rgb(235,235,232)`, used for selected filter states and occasional editorial content panels.

### Borders & Separators
- **Border Black** (`{colors.border}`): 1px solid on CTA buttons and primary dividers — sharp, unambiguous.
- **Border Light** (`{colors.border-light}`): The system's most-used color by count. Light gray separators between nav items, product grid cells, and footer columns. The structural skeleton of the layout.

### Shadow
- **Shadow Soft** (`{colors.shadow-soft}`): A very subtle blue-tinted shadow (`rgba(19, 34, 68, 0.08)` approximated to opaque) — used exclusively on floating UI elements like the live chat widget. Not a system-wide treatment.

## Typography

### Font Family
- **Display**: `SyndicatGrotesk` — a custom grotesque typeface. Self-hosted as `SyndicatGrotesk-Medium-DpkNCPc1.woff2` and `SyndicatGrotesk-Regular-KAIIE6vN.woff2`. Fallback: `Arial, Helvetica, sans-serif`.
- **Body / Mono**: `SimonMono` — a custom monospaced typeface. Self-hosted as `SimonMono-Regular-CDZgw6vh.woff2`. Fallback: `Courier New, Courier, monospace`.
- Both fonts are entirely self-hosted — no Google Fonts, no Adobe Fonts, no variable font axes.

*Note: For external implementations, DM Sans or Neue Haas Grotesk approximate the grotesque heading register. IBM Plex Mono or Courier Prime can substitute for the monospace body.*

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | Hero campaign headlines at 48px uppercase — "THE SUMMER GUIDE", seasonal landing titles |
| `display` | Section and collection heads at 32px uppercase — "NEW IN", "BESTSELLERS" |
| `heading-section` | Sub-category heads at 24px uppercase — product group labels, editorial callouts |
| `heading-sub` | Compact uppercase labels at 14px — filter chips, navigation dropdowns, pill labels |
| `body-large` | Product descriptions and editorial body at 16px SimonMono with open tracking |
| `body` | Standard body copy, cart UI, form content |
| `nav-link` | Primary nav links, footer columns — SyndicatGrotesk 14px |
| `button-ui` | CTA labels — 14px SyndicatGrotesk medium, 1px tracking, uppercase |
| `caption` | Legal copy, metadata footnotes, SKU labels — 12px SyndicatGrotesk |

### Principles
- Every heading level is uppercase. There are no sentence-case headings. This is not a decoration — it is the brand's voice register.
- Display headings in SyndicatGrotesk; body and UI in SimonMono. The two fonts never trade roles.
- Positive tracking on every heading: minimum 1px at small sizes, 2.4px at hero scale. This creates the measured, confident spread of editorial print.
- SimonMono at weight 400 for all body roles — no bold body copy, ever. The monospace weight itself carries authority.
- Line height on headings collapses to `1.0` for tight block-setting at display scale. Body stays at `1.5` for comfortable reading.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block above. Base unit: 4px (8px practical base for most component padding).

Mejuri's spacing has a distinct density logic. Component internals use the 12–16px register (`{spacing.md}` and `{spacing.lg}`) almost exclusively — buttons, nav items, cards all share this tight-but-not-cramped rhythm. Section breaks expand to 48–64px (`{spacing.3xl}`, `{spacing.4xl}`). The layout avoids mid-range chaos: either component-tight or section-generous.

### Grid & Container
- Max content width: approximately 1440px with centered columns
- Hero: two-column editorial split at desktop — environmental/still-life photography left, lifestyle/model photography right; both columns full-bleed to viewport
- Product grid: 4 columns at desktop, 2 at tablet, 1 at mobile
- Navigation: horizontal strip with `{colors.border-light}` bottom separator, logo left, primary links center/left, utility icons right
- Footer: 5-column link grid with `1px` top border in `{colors.border-light}`

### Whitespace Philosophy
- Whitespace is used with editorial economy, not the exaggerated luxury breathing room of higher-tier fine jewelry brands. Sections are generous but not vast.
- The two-column hero split creates visual density at the top of the page, balanced by the clean white grid below.
- Product grid gutters are tight (8–12px) — jewelry photography justifies close comparison rather than isolation.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow, no border | Page canvas, product cards, all primary content |
| Hairline (Level 1) | `1px solid {colors.border-light}` | Nav separator, grid dividers, footer top border |
| Outline (Level 2) | `1px solid {colors.border}` | CTA button borders, primary interactive containers |
| Float (Level 3) | `rgba(19,34,68,0.08) 0px 2px 8px 0px` | Chat widget, floating UI panels — rare |
| Dialog (Level 4) | `rgba(19,34,68,0.08) 0px 8px 32px 0px` | Drawers, modals, dropdown menus |
| Focus Ring | `{colors.focus-ring}` 2px outline | Keyboard accessibility focus indicator |

**Shadow Philosophy**: Mejuri is functionally shadow-free on its primary product and content surfaces. The two shadow values extracted — a 2px/8px soft navy blur and an 8px/32px deeper version — appear only on floating UI widgets (live chat bubble) and overlay dialogs. The product grid, hero, and all card surfaces use zero elevation. Separation is achieved through `{colors.border-light}` hairline borders and clean whitespace alone.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every button, card, input, badge, modal — the universal default |
| `sm` | 2px | SVG elements and minor icon corner smoothing only |
| `pill` | 9999px | Occasional promotional chip or tag if introduced (not present in base system) |

Mejuri's shape philosophy is binary and categorical: `{rounded.none}` for all intentional UI, with `{rounded.sm}` only appearing on SVG geometry. There are no medium-radius cards, no softened buttons. The sharpness rhymes with the precision of metalwork — cut clean, finished flush.

## 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 fill (`{colors.primary}`) with white type. Sharp corners `{rounded.none}`. CTA for add-to-cart, checkout, primary actions. Uppercase SyndicatGrotesk 14px at 1px tracking.
- **`button-secondary`** — white fill with `1px solid {colors.border}` black outline, black type. Same sharp geometry. Used for secondary actions, "Shop Now" editorial links, filter toggles.
- **`button-ghost`** — no background, no border. Uppercase SyndicatGrotesk with underline animation on hover. Used for navigation text links and editorial "See All" callouts.

### Cards

- **`card-product`** — pure white background, zero radius, product photography flush to top edge. Product name in `{typography.heading-sub}` SyndicatGrotesk, price in `{typography.body}` SimonMono. Hover reveals quick-add or wishlist affordances.
- **`card`** — white or `{colors.surface}` background panel for editorial callouts. Zero radius, 16px padding.

### Inputs

- Text inputs use `{rounded.none}` with `1px solid {colors.border-light}` default border shifting to `1px solid {colors.focus-ring}` on focus. SimonMono body text at 16px. No fill change on focus — only border transitions.

### Badges / Tags

- Promotional product badges: `{colors.primary}` fill, white `{typography.caption}` text, zero radius. Used sparingly — "New", "Gold Plated", "Sold Out" labels on product thumbnails.

### Navigation

- Sticky white nav with `{colors.border-light}` bottom separator. Logo "MEJURI" wordmark left-aligned in SyndicatGrotesk. Center: primary category links in `{typography.nav-link}`. Right: search, account, wishlist, cart icons. Promo bar above nav when active — full-width strip using `{colors.primary}` black background and white monospaced copy.

## Do's and Don'ts

### Do
- Use SyndicatGrotesk uppercase for every heading level — the brand voice is always uppercase, always tracked
- Default all body, product description, and UI label copy to SimonMono — the monospace is not decorative, it is the system's body font
- Apply `{colors.primary}` black as the only interactive color — buttons, borders, active states, icon fills
- Keep `{rounded.none}` on every interactive element — no mid-radius buttons, no softened cards
- Use `1px solid {colors.border}` black on primary CTA buttons rather than filled-black — Mejuri's default button aesthetic is outlined, not filled
- Use `{colors.border-light}` gray for all structural separators — grid lines, nav dividers, footer borders
- Let photography dominate. The hero exists to showcase the jewelry; the chrome frames it without competing
- Apply positive letter-spacing to every heading: at minimum 1px, up to 2.4px at 48px display scale
- Use `{colors.ink-secondary}` warm muted for metadata, secondary labels, and subdued captions — it adds warmth without a dedicated accent color

### Don't
- Don't introduce a warm gold, amber, or metallic accent — Mejuri explicitly rejects the category convention of gold-tinted design
- Don't set headings in sentence case or lowercase — the brand is fully uppercase at every display size
- Don't use SimonMono for headings or SyndicatGrotesk for body copy — the roles are strict and separated
- Don't add border-radius to buttons or cards — `{rounded.none}` is unconditional in the brand system
- Don't use serif typography anywhere, even for editorial moments — the grotesque/monospace pairing is the brand's typographic identity
- Don't apply shadows to product cards — flatness is the surface rule
- Don't mix a secondary brand accent color into the palette — `{colors.primary}` black is the sole action color
- Don't replace monospace body with a humanist sans — SimonMono's technical precision is a deliberate brand signal

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <380px | Single column, hero photography stacks, heading scale reduces to 28px |
| Mobile | 380–600px | Single column, 1-up product rows, abbreviated nav |
| Mobile Large | 600–768px | 2-column product grid begins, nav condenses to hamburger |
| Tablet | 768–1023px | 2–3 column grid, full horizontal nav restores at 1024px |
| Desktop | 1024–1199px | 4-column product grid, two-column hero split, full editorial layout |
| Large Desktop | >1199px | Maximum editorial scale, hero fills viewport width |

### Touch Targets
- All button elements maintain minimum 44px tap height via generous vertical padding
- Nav icon hit areas (search, wishlist, cart) are 44×44px minimum on mobile
- Product cards are fully tappable to product detail; no isolated sub-element tapping required

### Collapsing Strategy
- **Hero**: Two-column side-by-side → stacked single-column on mobile; both images retain full-bleed treatment
- **Navigation**: Full horizontal bar → hamburger drawer on mobile; wordmark stays visible at all sizes
- **Product grid**: 4-col → 2-col → 1-col; gutter tightens from 12px to 8px on small screens
- **Promo bar**: Persists at all breakpoints, text truncates or scrolls rather than wrapping
- **Typography**: Display-hero 48px → 28–32px on mobile; letter-spacing reduces proportionally but stays positive
- **Section spacing**: 64px desktop → 32px mobile; compresses but maintains the editorial cadence

### Image Behavior
- Product photography serves square (1:1) and portrait (3:4) aspect ratios depending on context
- Hero images maintain full-bleed at all breakpoints; art-directed alternates serve portrait mobile
- Lazy loading with opacity transition; no skeleton placeholders in the base system

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff pure white)
- Primary text: `{colors.ink}` (#0a0a0a near-black)
- Secondary text: `{colors.ink-secondary}` (#68675e warm muted)
- Brand action: `{colors.primary}` (#000000 pure black)
- On primary: `{colors.on-primary}` (#ffffff white)
- Border — button: `{colors.border}` (#000000)
- Border — separator: `{colors.border-light}` (#e5e5e5)
- Light surface: `{colors.surface}` (#f6f6f6)
- Default radius: `{rounded.none}` (0px — all elements)
- Default shadow: none on content surfaces

### Example Component Prompts

- "Create a Mejuri-style primary CTA button: `{colors.primary}` (#000000) background, `{colors.on-primary}` (#ffffff) text, SyndicatGrotesk 14px weight 500 letter-spacing 1px UPPERCASE, `{rounded.none}` (0px) radius, padding 12px 24px. Hover state: background lightens to `{colors.ink-secondary}` (#68675e). No border on filled state."
- "Design a Mejuri product card on `{colors.background}` (#ffffff) with zero border-radius. Portrait product photograph flush to the top edge-to-edge. Below: product name in SyndicatGrotesk 14px weight 500 `{colors.ink}` (#0a0a0a) UPPERCASE with 0.28px tracking; price in SimonMono 16px weight 400 same color; 'ADD TO CART' outlined button below (white fill, 1px solid black border, zero radius, 12px 24px padding). 12px card padding beneath image."
- "Build a Mejuri navigation bar: `{colors.background}` white background, `1px solid {colors.border-light}` (#e5e5e5) bottom border. Left: 'MEJURI' wordmark in SyndicatGrotesk weight 500 uppercase. Center: nav links in SyndicatGrotesk 14px weight 400 `{colors.ink}` (#0a0a0a). Right: search, account, wishlist, cart icons in `{colors.ink}`. Sticky on scroll. Promo bar above in `{colors.primary}` (#000000) background with SimonMono white text."
- "Create a Mejuri editorial hero section with two-column split. Left column: full-bleed product still-life or environmental photography (jewelry on stone or in nature). Right column: model photography with jewelry in warm natural light. Overlay text centered on left image: 'THE SUMMER GUIDE' in SyndicatGrotesk 48px weight 500 white UPPERCASE, letter-spacing 2.4px, line-height 1.0. Below: secondary caption in SimonMono 16px white, weight 400. CTA link in SimonMono underlined white below."
- "Style a Mejuri form input: `{colors.background}` (#ffffff) fill, `{rounded.none}` (0px) radius, `1px solid {colors.border-light}` (#e5e5e5) default border transitions to `1px solid {colors.focus-ring}` (#000000) on focus. SimonMono 16px weight 400 `{colors.ink}` text, placeholder in `{colors.ink-secondary}` (#68675e). Padding 12px 16px. No fill change on focus."
- "Design a Mejuri promotional badge: `{colors.primary}` (#000000) fill, `{colors.on-primary}` (#ffffff) text, SyndicatGrotesk 12px weight 400 uppercase letter-spacing 0.24px, `{rounded.none}` (0px) radius, padding 4px 8px. Use for 'NEW', 'GOLD PLATED', 'SOLD OUT' product card labels."

### Iteration Guide

1. Start with `{colors.background}` (#ffffff) white canvas — Mejuri never uses off-white, warm cream, or dark backgrounds as default page surfaces.
2. Apply `{colors.primary}` (#000000) pure black as the one action color. No secondary accent exists. Gold is explicitly rejected.
3. Every heading must be uppercase, set in SyndicatGrotesk, with positive letter-spacing (1px minimum). If it's a heading, it has tracking.
4. Body, product descriptions, and UI detail copy all use SimonMono. The monospace is not an accent — it is the body system.
5. Set `{rounded.none}` on every element unconditionally. Mejuri has no radius. Sharp corners are the brand signature.
6. Use `1px solid {colors.border}` on outlined buttons; use flat black fill on primary CTAs. The outlined version often reads as the primary Mejuri button style.
7. Separate everything with `{colors.border-light}` (#e5e5e5) hairline borders — it is the most-used color in the system and the structural grid of the layout.
8. Let photography carry all the warmth, color, and material richness. The chrome stays black, white, and gray.
9. Avoid shadows on content surfaces. Use `{colors.border-light}` borders for separation, not elevation.
10. If something needs warmth in a text role, reach for `{colors.ink-secondary}` (#68675e). It is the only warm note allowed in the non-photography system.

---

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