---
version: alpha
name: "Totême"
description: "A Scandinavian womenswear system built on a proprietary geometric sans, a near-black canvas, and a lightness doctrine that treats weight 300 as a complete statement."

colors:
  # Surface / canvas
  background: "#090909"         # site's dominant canvas — near-black, from CSS lyt-theme
  surface: "#121212"            # elevated surfaces — drawers, cards on dark ground
  surface-light: "#ffffff"      # white used for inverted campaign sections

  # Ink / text
  ink: "#ffffff"                # primary text on dark canvas
  ink-secondary: "#b0b0b0"     # secondary labels, metadata, captions on dark ground
  ink-ghost: "#666666"          # placeholder text, disabled states on dark ground

  # Brand — Totême has no chromatic accent; white and near-black carry all authority
  primary: "#ffffff"            # CTA fill — white stamp on near-black
  on-primary: "#090909"         # text on white CTA surface
  primary-container: "#121212"  # secondary button fill — elevated surface

  # Interactive states (all rgba flattened to opaque hex)
  primary-hover: "#e0e0e0"      # button hover softens white to light gray
  text-hover: "#ffffff"         # was rgba(0,0,0,0.1) hover on border — Google format requires hex
  focus-ring: "#ffffff"         # focus outline on dark surface

  # Semantic
  border: "#090909"             # was rgb(9,9,9) — used on buttons and structural rules
  border-light: "#dfdedb"       # was rgb(223,222,219) — hairline for light-mode dividers
  border-subtle: "#1a1a1a"      # was rgba(0,0,0,0.1) — subtle top-border on list items

  # Shadow tints (used by elevation table)
  shadow-soft: "#000000"        # was rgba(0,0,0,0.2) — soft modal shadow tint

typography:
  display-hero:
    fontFamily: "Toteme Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: 0px
    textTransform: uppercase
  display:
    fontFamily: "Toteme Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 300
    lineHeight: 1.25
    letterSpacing: 0px
    textTransform: uppercase
  heading-section:
    fontFamily: "Toteme Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Toteme Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.14px
  body-large:
    fontFamily: "Toteme Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Toteme Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0.14px
  nav-link:
    fontFamily: "Toteme Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.45
    letterSpacing: 0.28px
    textTransform: uppercase
  button-ui:
    fontFamily: "Toteme Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 0px
    textTransform: uppercase
  caption:
    fontFamily: "Toteme Sans, -apple-system, system-ui, Helvetica, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 300
    lineHeight: 1.55
    letterSpacing: 0px

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

rounded:
  none: 0px
  pill: 9999px    # chat/support widget and toggle controls only — functional, not brand

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: "1px solid {colors.primary}"
    textTransform: uppercase
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    border: "1px solid {colors.primary-hover}"

  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
    border: "1px solid {colors.ink}"
    textTransform: uppercase
  button-secondary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.ink}"
    border: "1px solid {colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 0px

  input:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 10px 0px
    borderBottom: "1px solid {colors.border-subtle}"
  input-focus:
    borderBottom: "1px solid {colors.ink}"
    outline: "none"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 0px
    borderBottom: "1px solid {colors.border-subtle}"

  badge:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    rounded: "{rounded.none}"
    padding: 2px 0px
    textTransform: uppercase
---

# Totême Design System

## Overview

Totême's digital presence is as disciplined as its garments: a near-black canvas (`{colors.background}`) holds almost nothing except a sparse white typographic system and photography that arrives like a statement rather than an invitation. The brand wordmark — TOTÊME, in weight-300 Toteme Sans, set in uppercase with a breath of tracking — sits at the top of an interface that refuses to compete with what it sells. Navigation is a single horizontal band, lightly ruled at its base with a near-invisible `1px solid {colors.border-subtle}` — the only structural mark on the entire page. White text on near-black: not a fashion cliché, but a considered position that communicates season-agnostic permanence over trend-reactive brightness.

The proprietary typeface, Toteme Sans, is the system's most legible brand signal. Self-hosted in three weights — Light (300), Regular (400), Bold (700) — it reads as a refined geometric grotesque with an unusual restraint for display use: headings appear at 24–32px in weight 300, uppercase, the lightest possible setting for a display role. This is the system's defining move. Where most luxury brands use bold or medium for display authority, Totême uses Light — the confidence to be barely there, trusting that restraint communicates status more efficiently than presence. Body and navigation copy runs at 14px in Light, with a hair of `0.14–0.28px` letter-spacing that opens the face into clarity without pushing it toward fashion-editorial excess.

Color is strictly architectural: `{colors.background}` near-black and `{colors.primary}` white are the only surfaces and inks. There is no chromatic brand accent, no seasonal palette, no state-color vocabulary beyond the structural vocabulary of borders and buttons. Motion is equally contained — `0.2s ease-in-out` on color and opacity, no transforms, no lift animations. The experience lands somewhere between a gallery and a showroom: cool, deliberate, and entirely confident that you came here already knowing what you wanted.

**Key Characteristics:**
- Near-black canvas (`{colors.background}` `#090909`) — the system's signature inversion: dark ground in a category that defaults to white
- Single proprietary typeface, **Toteme Sans**, in three weights across every typographic role — display, body, navigation, button, caption
- Display typography in weight 300 (`{typography.display-hero}`) — the system's most distinctive decision: ultra-light at large sizes, confident through restraint
- No chromatic brand accent — `{colors.primary}` white and `{colors.background}` near-black carry all CTA and structural authority
- Hard-corner geometry across all UI elements: `{rounded.none}` on buttons, inputs, cards, image frames
- Uppercase navigation and category labels in `{typography.nav-link}` with `0.28px` tracking — formality through spacing, not weight
- Hairline `border-bottom: 1px solid {colors.border-subtle}` on nav and list items — the only structural mark on the dark canvas
- Motion economy: `0.2s ease-in-out` on color and opacity transitions only; no transforms, no scale, no parallax
- Underline-only input fields: no box, no fill change, no glow on focus — typographic form, not form chrome
- Product photography always edge-to-edge, always against the dark canvas or a white sweep that creates a clear temperature boundary
- Button labels in `{typography.button-ui}` weight 700 uppercase at 12px — the sole use of Bold weight in the system

## Colors

### Surface & Canvas
- **Near-Black** (`{colors.background}`): The dominant page canvas. `#090909` — not pure black, which reads as graphic; this near-black reads as photographic, like an unlit studio wall. Every page surface, header, and footer uses this ground.
- **Elevated Surface** (`{colors.surface}`): `#121212` — a subtle step up from the canvas, used for drawers, product tiles with backgrounds, and secondary panels. The shift is perceptible but not startling.
- **White Panel** (`{colors.surface-light}`): Pure white for inverted editorial sections and campaign moments where photography against a light ground requires a different temperature.

### Ink / Text
- **White Ink** (`{colors.ink}`): All primary text on the dark canvas. Pure white. Navigation, product names, headings, CTAs — the only text-color in active use.
- **Midgray** (`{colors.ink-secondary}`): `#b0b0b0` — secondary labels, metadata, supporting copy. Legible on the near-black canvas without competing with primary white type.
- **Ghost Gray** (`{colors.ink-ghost}`): `#666666` — placeholder text, disabled states, fine print. The lowest-contrast tier permitted on the dark ground.

### Brand Accent
- **White CTA** (`{colors.primary}`): Button fill and primary interactive surface. Totême's inversion of the category norm — the "accent" is the lightest possible tone, white, against the dark canvas.
- **Near-Black on White** (`{colors.on-primary}`): CTA label text on the white button fill. Mirrors the canvas color — the button surface and the page share the same architectural temperature, just exchanged.

### Text States
- **Hover Gray** (`{colors.primary-hover}`): White button hover softens to light gray `#e0e0e0` — a step back from absolute white, not a hue shift. Subtle confirmation, not celebration.
- **Focus Ring** (`{colors.focus-ring}`): White outline on dark canvas for keyboard focus — legible and on-system.

### Borders
- **Structural Border** (`{colors.border}`): `#090909` — near-black, used on button outlines in inverted contexts and structural rules.
- **Subtle List Border** (`{colors.border-subtle}`): `#1a1a1a` — was `rgba(0,0,0,0.1)` — nearly invisible on the dark canvas; applied as top-rule on navigation list items and the nav bar base border.
- **Light Divider** (`{colors.border-light}`): `#dfdedb` — used in light-mode panels and inverted sections; a warm off-white hairline rule.

## Typography

### Font Family
- **Primary**: `Toteme Sans`, with fallbacks: `-apple-system, system-ui, Helvetica, Arial, sans-serif`. Self-hosted as `TotemeSansWeb-Light.woff2`, `TotemeSansWeb-Regular.woff2`, `TotemeSansWeb-Bold.woff2` (and their italic companions). A proprietary geometric grotesque in three weights (300 Light, 400 Regular, 700 Bold) that serves every typographic role.
- **OpenType Features**: Uppercase transformation applied via CSS `text-transform: uppercase` on display, navigation, and button labels. Letter-spacing of `0.14–0.28px` on body and navigation widens the face for reading; display roles run without additional tracking and let the geometric architecture speak.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 32px Light uppercase — section and campaign titles at their most restrained |
| `display` | 24px Light uppercase — secondary feature moments, category headings |
| `heading-section` | 16px Regular — product group headers, editorial sub-labels |
| `heading-sub` | 14px Regular / 0.14px tracking — product card names, list group headers |
| `body-large` | 16px Regular — editorial paragraphs, expanded product descriptions |
| `body` | 14px Light / 0.14px tracking — product descriptions, form labels, running copy |
| `nav-link` | 14px Light uppercase / 0.28px tracking — desktop top navigation, footer link lists |
| `button-ui` | 12px Bold uppercase — CTA and action labels: "ADD TO BAG", "VIEW ALL" |
| `caption` | 12px Light — size selectors, color swatch labels, fine print |

### Principles
- **Light as authority**: Display type in weight 300 at large sizes — the most distinctive typographic choice in the Totême system. Heaviness signals effort; lightness signals confidence.
- **Single face, three weights**: Toteme Sans alone in Light, Regular, and Bold across every role. The Bold weight appears only on button labels, creating a maximum contrast between CTA and editorial copy.
- **Uppercase as register**: Navigation and CTAs set in uppercase with modest tracking (`0.28px`) — formal without being aggressive. Editorial and product copy is sentence case.
- **Minimal tracking**: Unlike many luxury brands that rely on wide letter-spacing for authority, Totême uses `0px–0.28px` throughout. The geometry of the face carries the brand identity; spacing is a reading tool, not a signaling tool.
- **Scale under 32px**: No type role exceeds 32px. The system communicates through restraint in scale as much as restraint in color.

## Layout

### Spacing System
The complete spacing scale is in the `spacing:` token block. Base unit: 8px, with common values at 4px (micro gaps), 16px, 24px, 32px, 48px (component breathing room).

Totême's pages are tightly controlled. The near-black canvas means empty space reads as void rather than air — the system compensates with confident photography that fills sections completely and type that occupies its zone precisely. Spacing is generous at the macro level (section gaps approaching `{spacing.3xl}` on desktop) but close at the component level — product grids run at tight gutters.

### Grid & Container
- Max content width: approximately 1440–1600px, with inner gutters around 12–24px
- Desktop product grid: typically 3–4 columns, close gutters, no card chrome
- Hero sections: full-bleed campaign photography edge-to-edge, type floated within
- Navigation: flat horizontal bar with TOTÊME wordmark; left nav items (Clothing, Bags, Shoes, Accessories, New, Sale) and right utilities (search, account, bag)

### Whitespace Philosophy
- The dark canvas makes negative space feel like a void — so sections are held tighter than a white-canvas system
- Photography fills its zones completely — images bleed to the container edge, never framed by visible margins
- No decorative chrome between sections — `{colors.border-subtle}` hairlines are the only structural marks

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | All page surfaces — product cards, editorial sections, navigation |
| Hairline (Level 1) | `border-bottom: 1px solid {colors.border-subtle}` | Nav bar base, list item dividers |
| Input Focus (Level 1) | `border-bottom: 1px solid {colors.ink}` | Input focus state — bottom border only, no box |
| Button Border (Level 1) | `1px solid {colors.primary}` on white button | Primary CTA outline |
| Soft Float (Level 2) | `box-shadow: 0px 0px 18px rgba(0,0,0,0.2)` | Cart drawer, modal overlays |
| Deep Float (Level 3) | `box-shadow: 0px 0px 24px rgba(0,0,0,0.3)` | Full-screen panels, highest-layer overlays |

**Shadow Philosophy**: Totême uses shadow only to lift floating panels (cart drawers, search overlays) from the dark canvas. The near-black background means shadow is a contrast problem, not a depth signal — soft, spread shadows with zero offset are the only viable approach. Every product surface is perfectly flat.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Buttons, product cards, inputs, image frames, navigation panels — all primary UI |
| `pill` | 9999px | Chat/support widget, toggle switches — functional infrastructure only |

The system is architecturally square. The single pill element (the chat widget, imported third-party) sits outside the brand language. Every designed surface — buttons, cards, drawers, image containers — carries `{rounded.none}`. This is a Swedish modernist position: the rectangle is the form, and any softening would be a concession.

## Components

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

### Button variants
- **`button-primary`** — `{colors.primary}` white fill, `{colors.on-primary}` near-black text, `{typography.button-ui}` (12px Bold uppercase), `{rounded.none}`, `padding: 12px 24px`, `border: 1px solid {colors.primary}`. Hover softens fill to `{colors.primary-hover}` via `0.2s ease-in-out`. Used for "ADD TO BAG", "SHOP NOW", primary CTAs.
- **`button-secondary`** — Transparent fill, `{colors.ink}` white text, same geometry, `border: 1px solid {colors.ink}`. Hover fills to `{colors.primary-container}`. Used for "VIEW ALL", "SAVE", secondary actions.

### Cards
- **`card`** — `{colors.surface}` elevated-dark fill, no border, no shadow, `{rounded.none}`, `padding: 0px`. Product photography fills the tile edge to edge; `{typography.heading-sub}` product name and `{typography.body}` price appear below as text labels with minimal clearance. The card is a presentation stage, not a chrome container.

### Inputs
- **`input`** — Transparent fill, `border-bottom: 1px solid {colors.border-subtle}` underline only, no box, `{rounded.none}`, `{typography.body}` 14px Toteme Sans Light, `{colors.ink}` white text. Focus: underline updates to `1px solid {colors.ink}`. No glow, no fill shift, no box-shadow.

### Badges / Tags
- **`badge`** — No fill, 12px Toteme Sans Light in `{colors.ink-secondary}` midgray. Typographic-only label positioned over product tiles for NEW, SALE designations. No chip background, no border.

### Navigation
- **`nav-bar`** — `{colors.background}` fill, `{colors.ink}` white text, `{typography.nav-link}` (14px Light, uppercase, `0.28px` tracking). TOTÊME wordmark in the nav in spaced weight-400 type. Link hover transitions `color` and `opacity` in `0.2s ease-in-out`. `border-bottom: 1px solid {colors.border-subtle}` as the only structural rule below the bar.

## Do's and Don'ts

### Do
- Use `{colors.background}` (`#090909`) as the only canvas — the near-black is the system's primary signal; white-canvas sections are deliberate inversions for specific editorial moments
- Set all display and heading type in Toteme Sans weight 300 (`{typography.display-hero}`, `{typography.display}`) — the Light weight at large sizes is the system's most distinctive choice
- Keep all UI elements at `{rounded.none}` — buttons, cards, inputs, image frames, and drawers are hard-cornered without exception
- Apply uppercase with `0.28px` tracking to navigation (`{typography.nav-link}`) and `text-transform: uppercase` to CTAs (`{typography.button-ui}`) — formality through spacing, not weight
- Use `{typography.button-ui}` weight 700 exclusively for action labels — Bold is reserved for the single CTA moment, not headings or body copy
- Animate only via `color` and `opacity` at `0.2s ease-in-out` — no transforms, no scale lifts, no parallax
- Use full-bleed photography to fill campaign sections — the image occupies the zone completely, no margins, no chrome

### Don't
- Don't introduce a chromatic brand accent — `{colors.primary}` white and `{colors.background}` near-black are the only permitted fills; any hue would read as a season-specific decision
- Don't increase display type weight to Regular or Bold for "impact" — weight 300 at large sizes is the system's authority mechanism; heavier would be louder and less Totême
- Don't round corners beyond `{rounded.none}` on any designed element — the pill radius belongs only to functional third-party widgets
- Don't introduce a light-mode default — the near-black canvas is not a dark-mode toggle; it is the brand's primary position
- Don't add box-shadows or hover lifts to product cards — all product surfaces are flat; depth is handled by the camera, not the browser
- Don't use `{colors.ink-ghost}` or `{colors.ink-secondary}` for interactive text — they are metadata and supporting roles; all interactive labels use `{colors.ink}` white
- Don't introduce additional typefaces — Toteme Sans Light, Regular, and Bold are the complete weight range; no serif contrast, no display alternate, no monospace
- Don't use wide letter-spacing (>0.5px) as a styling device — tracking in this system is a reading tool, not an expressiveness signal

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | < 480px | Single-column; hamburger nav; display type ~20px; bottom utilities |
| Mobile | 480–767px | Single-column product grid; nav collapsed to hamburger; compact spacing |
| Tablet | 768–1023px | Two-column product grid; nav still collapsed; wider inner padding |
| Desktop | 1024–1599px | Full horizontal nav visible; 3-column product grid; section gaps at full scale |
| Large Desktop | ≥ 1600px | 4-column grid; max container ~1440px; full editorial section rhythm |

### Touch Targets
- Primary buttons use `padding: 12px 24px` — effective tap height around 40–44px
- Navigation links on mobile expand to full tap-row height within the hamburger drawer
- Product tiles are fully tappable card regions, not just the title text
- Input fields expand to full-width on mobile with minimum 44px effective height

### Collapsing Strategy
- **Navigation**: flat horizontal bar → hamburger icon on mobile; full-screen slide-in panel with flat links in `{typography.nav-link}` uppercase style
- **Type scale**: `{typography.display-hero}` (32px) scales toward 20–24px on mobile; body and nav-link hold at 14px; caption may reduce to 11px
- **Product grids**: 4-column desktop → 2-column tablet → 1-column mobile; tight gutters maintained at each breakpoint; no card chrome at any size
- **Spacing**: `{spacing.3xl}` (64px) vertical gaps compress to `{spacing.xl}` (32px) on mobile while preserving the dark-canvas void quality

### Image Behavior
- Campaign photography is always full-bleed — no max-width cap on hero images
- Product tile images maintain a consistent portrait aspect ratio at every breakpoint
- Image frames are always `{rounded.none}` — photography never clips to a rounded container
- Light-sweep product photography against the dark canvas creates a clear temperature boundary — images are not meant to dissolve, but to arrive

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Near-black (`{colors.background}`)
- Primary text: White (`{colors.ink}`)
- CTA fill: White (`{colors.primary}`)
- CTA text: Near-black (`{colors.on-primary}`)
- Secondary text: Midgray (`{colors.ink-secondary}`)
- Nav border: `{colors.border-subtle}`
- Input border (resting): `{colors.border-subtle}`
- Input border (focus): `{colors.ink}`

### Example Component Prompts

- "Build a full-bleed campaign hero on `{colors.background}` (`#090909`). Fill the viewport height with a model photograph against a white sweep — the image arrives as a temperature boundary against the dark canvas, not a dissolve. At lower left, place `{typography.display-hero}` (32px Toteme Sans weight 300, uppercase, `letter-spacing: 0px`) in `{colors.ink}` white. Below, a `{components.button-primary}`: white fill, near-black text, `{typography.button-ui}` (12px Bold uppercase), `padding: 12px 24px`, `border-radius: 0`, `border: 1px solid {colors.primary}`. No overlay, no tint, no decorative element."

- "Create a primary CTA button: `{colors.primary}` white fill, `{colors.on-primary}` near-black text, `{typography.button-ui}` (12px Toteme Sans Bold, `text-transform: uppercase`), `border-radius: 0`, `padding: 12px 24px`, `border: 1px solid {colors.primary}`. Hover: `background-color` transitions to `{colors.primary-hover}` (`#e0e0e0`) via `transition: background-color 0.2s ease-in-out`. No shadow, no scale, no lift."

- "Design a product card: `{colors.surface}` fill (`#121212`), `border-radius: 0`, no shadow, no border. Full-width portrait product image edge-to-edge at top — photography against the near-black canvas with a clear white-ground boundary. Below: `{typography.heading-sub}` (14px Toteme Sans Regular, 0.14px tracking) product name in `{colors.ink}`, then `{typography.body}` (14px Light, 0.14px tracking) price in `{colors.ink-secondary}`. No card chrome — stage, not container."

- "Build a desktop navigation bar on `{colors.background}`. TOTÊME wordmark in Toteme Sans Regular or weight 400, `{colors.ink}` white. Left nav items (Clothing, Bags, Shoes, Accessories, New, Sale) and right utilities (search icon, account icon, bag icon) — all `{typography.nav-link}` (14px Light, uppercase, `letter-spacing: 0.28px`). `border-bottom: 1px solid {colors.border-subtle}` at the nav base. Hover: `color` transitions via `0.2s ease-in-out`. No underline animation, no background highlight, no shadow."

- "Create a text input on the dark canvas: transparent fill, `border-bottom: 1px solid {colors.border-subtle}`, no box border, `border-radius: 0`, `{typography.body}` (14px Toteme Sans Light, `letter-spacing: 0.14px`), `{colors.ink}` white text, `{colors.ink-ghost}` placeholder. Focus state: `border-bottom: 1px solid {colors.ink}`. No glow, no box-shadow, no fill change. Pair with a `{components.button-primary}` SEARCH button to the right."

- "Render a product grid: 4-column layout on desktop, 12–16px gutters (`{spacing.sm}`–`{spacing.md}`), `{colors.background}` canvas throughout. Each tile is a `{components.card}` (zero chrome, portrait image top, name in `{typography.heading-sub}` Regular, price in `{typography.body}` Light). Section heading above grid: `{typography.display}` (24px Toteme Sans Light, uppercase) in `{colors.ink}`. Between sections: `{spacing.3xl}` (64px) vertical gap."

### Iteration Guide

1. Start on `{colors.background}` (`#090909`) — the near-black canvas is the system's primary position, not a dark-mode toggle. If anything is using a white or light canvas as default, it is an editorial inversion and must be scoped accordingly.
2. Set every typographic role in Toteme Sans. Display and heading roles use weight 300 — the system's signature. If headings appear in Regular or Bold weight at display sizes, reduce to Light. Bold is reserved exclusively for `{typography.button-ui}`.
3. Apply `border-radius: 0` to all UI elements. No softened corners on buttons, cards, inputs, or image frames. The only pill-radius element is a functional third-party widget.
4. Confirm all interactive text uses `{colors.ink}` white. Midgray (`{colors.ink-secondary}`) and ghost gray (`{colors.ink-ghost}`) are for metadata and placeholders — never for links or navigation items.
5. Check uppercase application: navigation links and CTA labels use `text-transform: uppercase`. Editorial headings, product names, and body copy are sentence case. Uppercase is a register signal, not a global style.
6. Verify motion: `transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out` on interactive elements. Remove any `transform`, `translate`, or `scale` animation. No hover lifts, no card elevations.
7. Audit shadows: only floating panels (cart drawers, search overlays, modals) may carry shadow — soft, spread, zero-offset. All product surfaces are flat without exception.
8. Check letter-spacing: `{typography.nav-link}` carries `0.28px`, body and heading-sub carry `0.14px`, everything else runs at `0px`. Wide tracking is not used as a signaling device — these values are reading tools 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 Totême. Brand names and trademarks belong to their respective owners.