---
version: alpha
name: Maharishi
description: A black-on-black-and-neutral canvas set in self-hosted Univers LT, where the brand's conviction — pacifism reimagined through military surplus — is expressed through restraint, compressed lettering in near-constant uppercase, and a single burnt-terracotta accent standing in for the warmth the palette otherwise withholds.

colors:
  # Surface / canvas
  background: "#ffffff"        # primary page canvas — stark white
  surface: "#f3f3f3"           # light-grey secondary panels, newsletter input zones
  surface-dark: "#1b1b1b"      # near-black surface for newsletter bands and dark UI panels

  # Ink / text
  ink: "#000000"               # dominant text, headings, navigation — absolute black
  ink-secondary: "#7c7c75"     # secondary copy, metadata, captions, muted UI labels
  on-dark: "#ffffff"           # text on dark or black surfaces

  # Brand accent — terracotta / burnt orange
  primary: "#ca4b04"           # brand fire — used for select CTAs and semantic alerts
  on-primary: "#ffffff"        # white text on terracotta
  primary-hover: "#f25a05"     # slightly brighter terracotta on hover

  # Borders
  border: "#000000"            # 1px solid black — inputs, buttons, key rules
  border-soft: "#dddddd"       # light rule — section dividers and secondary borders
  border-alpha: "#bbbbbb"      # mid-tone grey — product filters, grid separators

  # Semantic
  error: "#be2119"             # atlas-text-negative — form errors and alerts
  success: "#366d12"           # atlas-text-positive — availability and success states

  # Shadow tints
  shadow-soft: "#000000"       # was rgba(0,0,0,0.2) — Google format requires hex; used in modal/drawer blur

typography:
  display-hero:
    fontFamily: "Univers LT W01_63 Bold_1476034, Barlow, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: 0.5px
  display:
    fontFamily: "Univers LT W01_63 Bold_1476034, Barlow, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: 0.5px
  heading-section:
    fontFamily: "Univers LT W01_63 Bold_1476034, Barlow, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 700
    lineHeight: 1.25
    letterSpacing: 0.5px
  heading-sub:
    fontFamily: "Univers LT W01_63 Bold_1476034, Barlow, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.14
    letterSpacing: 0.5px
  heading-micro:
    fontFamily: "Univers LT W01_53 Extended, Barlow, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0.5px
  body-large:
    fontFamily: "Univers LT W01_55 Roman1475956, Barlow, Lucida Grande, Lucida Sans Unicode, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "Univers LT W01_55 Roman1475956, Barlow, Lucida Grande, Lucida Sans Unicode, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  nav-link:
    fontFamily: "Univers LT W01_63 Bold_1476034, Barlow, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "Univers LT W01_63 Bold_1476034, Barlow, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: 0px
  label:
    fontFamily: "Univers LT W01_55 Roman1475956, Barlow, Lucida Grande, Lucida Sans Unicode, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  caption:
    fontFamily: "Univers LT W01_63 Bold_1476034, Barlow, Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0.5px

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

rounded:
  none: 0px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 10px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    rounded: "{rounded.none}"
    padding: 8px 10px

  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 8px 10px
  button-secondary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.none}"
    padding: 8px 10px

  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    rounded: "{rounded.none}"
    padding: 8px 10px
  button-ghost-hover:
    textColor: "{colors.ink-secondary}"
    padding: 8px 10px

  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px
  card-product:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 0px 0px 16px
  input-focus:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px 0px 0px 16px

  input-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 0px 0px 0px 16px
  input-dark-focus:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.none}"
    padding: 0px 0px 0px 16px

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px 16px

  badge:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  badge-sale:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 4px 8px
---

# Maharishi Design System

## Overview

Maharishi's site is a compressed field of type and product — a black-on-white grid where almost everything communicates in uppercase Univers LT, and the silence between elements is as deliberate as the lettering. The brand was founded in London in 1994 by Hardy Blechman, and the site carries that founding conviction intact: military aesthetics stripped of aggression, reassigned to craft and philosophy. What you see is not minimalism for aesthetic effect — it is the visual logic of surplus and functionality, of removing ornamentation until only purpose remains.

The typographic engine is Univers LT in three cuts — Roman (55), Bold (63), and Extended (53) — self-hosted and serving the entire hierarchy from navigation to micro-labels. All three are compressed grotesques with even stroke weights and tightly controlled letter-spacing. The smallest active size is 10px, often set in uppercase with 0.5px tracking. The effect reads like stenciled cargo-crate text: declarative, industrial, unhurried. Where most contemporary retail sites introduce a serif for warmth or a variable-weight display face for campaign drama, Maharishi uses the same family in three weights at different scale — the only variation is how much of the canvas the letters consume.

The color system is a study in deliberate restraint. The primary canvas is white (`{colors.background}`) — not warm white, not off-white, not cream, though the garments photographed against it often carry olive, sand, and ochre tones that read as warmth. Against this, the dominant ink is absolute black (`{colors.ink}`), and the secondary step is a muted olive-grey (`{colors.ink-secondary}`) that echoes the brand's signature military-surplus palette. A single terracotta accent (`{colors.primary}`) surfaces on the most active CTAs and semantic error states — the only chromatic warmth the chrome allows itself. The rest is a deliberate monotone. Product photography — camouflage jackets, embroidered dragon motifs, technical outerwear in natural and military tones — carries all the color the interface refuses.

**Key Characteristics:**
- Univers LT W01 at three weights (55 Roman, 63 Bold, 53 Extended) handles every typographic role — no secondary face, no display type
- Nearly all UI text and navigation appear in uppercase with 0.5px letter-spacing (`{typography.nav-link}`, `{typography.heading-sub}`, `{typography.caption}`)
- Zero border-radius across the entire product — buttons, inputs, cards, modal overlays are all square-cornered (`{rounded.none}`)
- Dominant black (`{colors.ink}`) ink against white (`{colors.background}`) canvas; secondary copy in muted olive-grey (`{colors.ink-secondary}`)
- Terracotta accent (`{colors.primary}`) used sparingly — hover states on primary buttons and semantic error/alert roles only
- Product photography carries the entire palette — olive, sand, eucalyptus, indigo, and natural camouflage patterns are all image-delivered, not chrome-delivered
- Near-black surface panels (`{colors.surface-dark}`) appear in newsletter sign-up bands and immersive product sections — a dark mode stripe, not a dark mode
- Button padding is compact and tight (8px 10px) — text does the work, not the container
- Type hierarchy compresses from 48px hero to 10px micro-label with no step larger than doubling the previous — a tight, catalog-grade scale
- Links and interactive elements in hover states collapse from mid-grey (`{colors.ink-secondary}`) to black (`{colors.ink}`) — directionality without color

## Colors

### Surface & Canvas
- **White** (`{colors.background}`): The entire page canvas. No warmth, no tint. The product imagery provides all chromatic context.
- **Light Grey** (`{colors.surface}`): Tertiary UI zones — newsletter inputs, filter panels, secondary product backgrounds.
- **Near-Black** (`{colors.surface-dark}`): Dark band sections for newsletter sign-up strips and promotional panels. Not a dark mode — a tonal interruption.

### Ink / Text
- **Absolute Black** (`{colors.ink}`): Headings, body copy, navigation labels, button fills — every structural element defaults here.
- **Olive Grey** (`{colors.ink-secondary}`): Secondary metadata, price annotations, muted labels, filter copy. A mid-tone with a faint warm cast that echoes surplus military fabric colors.
- **White-on-Dark** (`{colors.on-dark}`): Text and icons on black button fills or dark-surface panels.

### Brand Accent
- **Terracotta** (`{colors.primary}`): The single chromatic event in the chrome. Applied to hover states on primary black buttons and to semantic error signals. References the oxidized hardware and warm earth-tone accessories in the brand's garment line.

### Semantic States
- **Error Red** (`{colors.error}`): Form validation errors and alert messages — the `--atlas-text-negative` CSS variable value.
- **Forest Green** (`{colors.success}`): Availability indicators and positive confirmation states — `--atlas-text-positive`.

### Borders & Structure
- **Black Rule** (`{colors.border}`): 1px solid black borders on inputs, buttons, and structural dividers.
- **Light Rule** (`{colors.border-soft}`): Section-level hairlines between catalog regions.
- **Mid Grey** (`{colors.border-alpha}`): Filter UI borders and product grid separators.

## Typography

### Font Family
- **Primary**: `Univers LT W01_55 Roman1475956`, self-hosted — the neutral roman cut for body text and extended reading
- **Bold**: `Univers LT W01_63 Bold_1476034`, self-hosted — headers, labels, buttons, navigation; the dominant voice
- **Extended**: `Univers LT W01_53 Extended`, self-hosted — select micro-labels and tags where width signals category distinction
- **Google Fonts fallback**: Barlow — closest available substitute for the Univers grotesque character, for environments where self-hosted fonts are unavailable
- **System fallback stack**: Helvetica Neue, Helvetica, Lucida Grande, Lucida Sans Unicode, Arial, sans-serif

### Hierarchy

The complete type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 48px / 700 — campaign headlines, hero title on editorial landing zones |
| `display` | 32px / 700 — major section headers, seasonal campaign titles |
| `heading-section` | 16px / 700 — product category labels, section headers within catalog |
| `heading-sub` | 14px / 400 — secondary product info, feature sub-heads in uppercase |
| `heading-micro` | 10px / 400 Extended — tag categories, collection filters, archive labels |
| `body-large` | 16px / 400 — editorial lead copy, brand-statement paragraphs |
| `body` | 15px / 400 — product descriptions, article body, standard copy |
| `nav-link` | 10px / 400 Bold — primary navigation items in uppercase with tracking |
| `button-ui` | 12px / 700 — button labels |
| `label` | 13px / 400 — product tile metadata, price display, filter options |
| `caption` | 10px / 400 Bold uppercase — SKU details, tag strings, badge content |

### Principles
- **Three cuts, one family**: the entire hierarchy is set in Univers LT Roman, Bold, and Extended. No secondary typeface is introduced at any scale.
- **Uppercase is the default register** for navigation, sub-headings, labels, and captions. Sentence-case appears only in body text and longer editorial passages.
- **Compressed scale**: from 10px micro-label to 48px display hero — each step reads as a doubling at most. The tightest cluster (10–16px) handles most of the functional UI.
- **Tracked precision**: 0.5px letter-spacing is applied consistently to uppercase labels and headings — not decorative, but a rendering correction that opens compressed grotesque caps at small sizes.
- **No display experimentation**: the system does not use gradient text, color text, oversized letterforms, or variable-font axis animation. The type is inert, structural, like stencil.

## Layout

### Spacing System
The full scale lives in the `spacing:` token block. Base unit: 8px. The scale is compact — the highest declared value is `{spacing.3xl}` at 48px. Inter-section whitespace is generous in the photography zones but compressed in the catalog grid.

### Grid & Container
- Product catalog runs in a dense multi-column grid — three to four columns at desktop, compressing to two columns on tablet and one on mobile
- Product photography fills tiles edge-to-edge with no card chrome
- Navigation is a flat, flush horizontal bar set in 10px uppercase Univers Bold
- Campaign and editorial sections use full-width photography with text overlaid or placed beneath
- Maximum content width appears to cap around 1440px; inner content containers at 1280px

### Whitespace Philosophy
- Catalog tiles are tight — image immediately above text, text immediately above the next tile
- Editorial sections and campaign hero zones breathe with larger inter-section gaps
- The layout rhythm alternates dense catalog passes with spacious editorial moments — compression and release

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; no border | Page canvas, navigation, product tiles at rest |
| Rule (Level 1) | `1px solid {colors.border}` | Input field boundaries, button outlines |
| Soft modal (Level 2) | `rgba(0,0,0,0.2) 0px 0px 18px 0px` | Fly-out drawers, size-selector overlays |
| Deep modal (Level 3) | `rgba(0,0,0,0.3) 0px 0px 24px 0px` | Cart drawer, navigation mega-menu |
| Large overlay (Level 4) | `rgba(0,0,0,0.15) 0px 0px 30px 0px` | Full-panel overlays — image lightbox, immersive views |

**Shadow Philosophy**: The system is almost entirely flat — elevation appears only at the panel and overlay level, never on product cards or navigation elements. Shadows are a single-layer blur without x/y offset, rendering as a soft emanation rather than a directional cast. The technique echoes how a garment laid on a table creates peripheral shadow rather than a cast shadow with a defined angle. The `{colors.shadow-soft}` tint is pure black, not warm-tinted.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every UI element — buttons, inputs, product tiles, modal panels, badges |

Maharishi uses one radius value: zero. Every element in the system is square-cornered. Buttons are flat rectangular slabs. Product photography sits in hard-edged containers. Form fields draw their boundary with a CSS border rather than a rounded suggestion. This is not oversight but posture — the corners are deliberate. Military surplus garments are cut to function, not to comfort; the UI follows the same logic.

## Components

The complete component spec lives in the `components:` token block.

### Button Variants

- **`button-primary`** — Black fill (`{colors.ink}`), white bold label (`{colors.on-dark}`), zero radius. The "Shop Now" CTA and primary purchase action. On hover, transitions from black to terracotta (`{colors.primary}`) — the moment the accent color activates.
- **`button-secondary`** — White fill with black border, black label. Used for secondary actions: "Read Journal", filter confirmations, newsletter submissions.
- **`button-ghost`** — Transparent background, black text, no border. Navigation and inline text-level actions. On hover, shifts to olive-grey (`{colors.ink-secondary}`).

### Cards

- **`card-product`** — Zero padding, zero radius, no shadow. Photography fills the tile completely. Product name and price in `{typography.label}` immediately below. The tile is the photograph.

### Inputs

- **`input`** — White background, 1px solid black border, zero radius, left-padding for text. Focus state draws a 2px solid black outline (`{colors.border}`), not a color-fill change.
- **`input-dark`** — Near-black background (`{colors.surface-dark}`), white text. Used in the newsletter sign-up band embedded in the dark surface panel. Same square geometry, same 2px outline on focus.

### Navigation

- **`nav-bar`** — White background, flat, borderless. Primary nav items in `{typography.nav-link}` — 10px uppercase Univers Bold with 0.5px tracking. No underline at rest; hover shifts to `{colors.ink-secondary}`.

### Badges

- **`badge`** — Black fill, white caption-level text, zero radius. Used for "New", "Exclusive", "Archive" product flags.
- **`badge-sale`** — Terracotta (`{colors.primary}`) fill, white text. The only badge variant that invokes the brand accent.

## Do's and Don'ts

### Do
- Use Univers LT Bold in uppercase for all navigation, labels, buttons, and micro-headings — this is the entire UI voice
- Apply 0.5px letter-spacing to all uppercase text at 14px and below — it opens the compressed grotesque caps and is the system's standard
- Keep every corner square (`{rounded.none}`) — inputs, buttons, cards, overlays, badges
- Let product photography carry all color — the chrome stays black, white, and grey
- Reserve terracotta (`{colors.primary}`) for the primary button hover state and semantic error signals — not for decorative fills
- Use olive-grey (`{colors.ink-secondary}`) for supporting metadata and secondary copy — the system's only mid-tone step
- Place product images edge-to-edge in tiles with no padding or card border
- Use the near-black surface (`{colors.surface-dark}`) for newsletter and dark-band sections as a tonal interruption, not a full dark mode

### Don't
- Don't introduce any border-radius — not 1px, not 2px, not 4px; zero is load-bearing to the identity
- Don't use terracotta (`{colors.primary}`) as a background fill on large surfaces or hero sections — it is a hover signal and badge accent only
- Don't substitute a serif or display typeface — the brand has no secondary font; all variation comes from weight, cut, and size within Univers LT
- Don't animate letter-spacing or apply variable tracking — the 0.5px is fixed, not responsive to pointer proximity
- Don't add directional drop shadows to cards, navigation, or buttons — box-shadow is reserved for overlay panels only
- Don't render body text in uppercase — the compressed capitals are a UI-layer signal; prose stays sentence-case in Univers Roman
- Don't lighten the black border on inputs to mid-grey or use a background fill to signal focus — the system uses a 2px solid black outline (`{colors.border}`) for focus; color does not shift
- Don't use the Tailwind ring-blue (`--tw-ring-color`) as a visible focus signal in production — it is present in the framework defaults but not in the brand's actual interaction pattern

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <480px | Single-column catalog; hero type scales to ~24px; navigation collapses to hamburger |
| Mobile | 480–767px | Single-column catalog; campaign text shifts to stacked below photography |
| Tablet | 768–1023px | Two-column catalog grid; navigation still hamburger at lower end, horizontal at 900px+ |
| Desktop | 1024–1279px | Three-to-four-column catalog; full horizontal navigation bar visible |
| Large Desktop | ≥1280px | Maximum container width at 1440px; generous section padding between editorial zones |

### Touch Targets
- Primary buttons at 8px 10px padding provide a compact hit area — touch affordance relies on full-tile tapping for product cards
- Navigation links in the mobile menu expand to full-row touch targets with generous vertical padding
- Product tile tap area is the full image frame — zero card padding means the entire photograph is interactive

### Collapsing Strategy
- **Navigation**: horizontal Univers Bold uppercase bar → hamburger icon; identity persists (same type, same uppercase, same zero-radius)
- **Product grid**: four-column → two-column → single-column; photography always edge-to-edge, spacing between tiles compressed on mobile
- **Hero sections**: 48px display headline scales to approximately 24px on mobile; the weight stays 700, legibility holds
- **Dark-band newsletter section**: persists at all breakpoints, full-width, stacked vertically on mobile

### Image Behavior
- Product photography fills tile containers at every breakpoint with `object-fit: cover` — no border-radius, no shadow, breakpoint-agnostic
- Campaign full-bleed images crop from center on mobile; text overlays shift from horizontal to stacked vertical arrangement
- Embroidery and camouflage detail shots are typically displayed at two-up on desktop, full-width on mobile to preserve pattern legibility

---

## Agent Prompt Guide

### Quick Color Reference
- Background: White (`{colors.background}`)
- Text: Black (`{colors.ink}`)
- Secondary text: Olive grey (`{colors.ink-secondary}`)
- Brand accent (hover/alert): Terracotta (`{colors.primary}`)
- Border: Black (`{colors.border}`)
- Dark panel surface: Near-black (`{colors.surface-dark}`)

### Example Component Prompts

- "Create a Maharishi product tile with zero padding and zero border-radius (`{rounded.none}`). The product photograph runs full-bleed, edge-to-edge, no shadow. Directly below: 13px Univers LT Roman product name in black (`{colors.ink}`), price in the same style, colorway note in 13px olive-grey (`{colors.ink-secondary}`). No card chrome — the tile is the photograph."
- "Design a Maharishi hero section on white (`{colors.background}`). Campaign headline at 48px Univers LT Bold 700, tracking 0.5px, uppercase, in black (`{colors.ink}`). Below: a compact black button — black fill, white 12px Univers Bold label, zero radius (`{rounded.none}`), 8px top/bottom and 10px left/right padding. On hover the button fill shifts to terracotta (`{colors.primary}`) with white text."
- "Build a navigation bar: white background, flat, no shadow. Left: wordmark in black. Center: nav items in 10px Univers LT Bold, uppercase, 0.5px letter-spacing (`{typography.nav-link}`), black at rest, olive-grey (`{colors.ink-secondary}`) on hover, 0.15s ease. Right: search icon and cart count in the same Univers Bold micro scale."
- "Create a dark newsletter band at `{colors.surface-dark}`. White headline in `{typography.heading-section}` uppercase. Below: an email input with near-black background (`{colors.surface-dark}`), white placeholder text (`{typography.body}`), 1px black border, zero radius (`{rounded.none}`), 16px left padding. On focus: 2px solid white outline. Submit button black fill, white Univers Bold label, same square geometry."
- "Design an archive badge: black fill (`{colors.ink}`), white 10px Univers Bold uppercase label (`{typography.caption}`), zero radius (`{rounded.none}`), 4px 8px padding. Reads 'ARCHIVE' or 'NEW'. For sale or discount states, swap fill to terracotta (`{colors.primary}`) — same geometry, same label treatment."

### Iteration Guide

1. Start on white (`{colors.background}`) with absolute-black Univers LT Bold. If the canvas has any warmth or tint, reset it — Maharishi's chrome is zero-compromise white.
2. Set all labels, navigation, and UI text in uppercase with 0.5px tracking. If lowercase appears in UI elements (not body prose), convert before proceeding.
3. Remove all border-radius from every element (`{rounded.none}`). The square corner is structural — it carries the same posture as a garment cut to function.
4. Terracotta (`{colors.primary}`) appears on button hover and badge-sale only. If it appears as a rest-state fill or background wash, it does not belong in the chrome.
5. Use olive-grey (`{colors.ink-secondary}`) for price, metadata, and secondary label copy — the system's only mid-tone between black and white.
6. Shadows appear only on overlays (panels, drawers, modals) — never on cards, buttons, or navigation. If an element has a box-shadow and it is not a drawer or modal, remove it.
7. Photography is the palette. Product cards should have no color of their own — the garment image delivers all warmth, camo, and earth-tone detail.

---

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