---
version: alpha
name: "Salomon"
description: "Mountain sports design system: pure black canvas with a sharp technical sans-serif, glacier-white contrast text, and the Salomon orange-yellow accent used as a precision stamp — trail-running velocity translated into clean, minimal digital form."

colors:
  # Surface / canvas
  background: "#ffffff"
  surface: "#f5f5f5"           # light off-white for secondary surfaces and product card backgrounds
  surface-dark: "#000000"      # primary dark canvas — hero zones, utility bar, dark editorial sections
  surface-mid: "#1a1a1a"       # near-black — secondary dark surfaces, footer

  # Ink / text
  ink: "#000000"               # primary text on light canvases
  ink-secondary: "#626364"     # extracted from dembrandt — secondary copy, metadata, muted labels
  ink-muted: "#b1b5b8"         # extracted — disabled text, placeholder copy
  on-dark: "#ffffff"           # text on dark surfaces and hero photography

  # Brand accent — Salomon orange-yellow
  primary: "#f5a623"           # Salomon brand orange-yellow — CTAs, focus states, logo accent /* estimated */
  on-primary: "#000000"        # black text on brand-yellow CTAs — maximum contrast
  primary-hover: "#e09000"     # darkened amber for CTA hover state /* estimated */

  # Interaction states
  focus-ring: "#f5a623"        # brand-yellow keyboard focus outline
  text-hover: "#626364"        # ink-secondary as default hover text shift

  # Borders
  border: "#f0eeee"            # extracted from dembrandt — hairline border color
  border-dark: "#333333"       # darker border for UI elements on light surfaces /* estimated */

  # Shadow tints
  shadow-soft: "#000000"       # was rgba(0,0,0,0.13) from extraction — flattened per Google format /* estimated */

typography:
  display-hero:
    fontFamily: "Salomon, Barlow Condensed, Oswald, Impact, sans-serif"
    fontSize: 72px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -1px
  display:
    fontFamily: "Salomon, Barlow Condensed, Oswald, Impact, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: -0.5px
  heading-section:
    fontFamily: "Salomon, Barlow Condensed, Oswald, Impact, sans-serif"
    fontSize: 32px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.25px
  heading-sub:
    fontFamily: "Salomon, Barlow, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: 0px
  body-large:
    fontFamily: "Salomon, Barlow, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body:
    fontFamily: "Salomon, Barlow, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Salomon, Barlow, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.5px
  button-ui:
    fontFamily: "Salomon, Barlow, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 700
    lineHeight: 1.0
    letterSpacing: 1px
  label-caps:
    fontFamily: "Salomon, Barlow Condensed, Oswald, Impact, sans-serif"
    fontSize: 12px
    fontWeight: 700
    lineHeight: 1.2
    letterSpacing: 1.5px
  caption:
    fontFamily: "Salomon, Barlow, Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0px

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

rounded:
  none: 0px
  xs: 2px
  sm: 3px
  md: 4px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-secondary:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.on-dark}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-ghost-hover:
    backgroundColor: "{colors.on-dark}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  card:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 16px
  card-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    rounded: "{rounded.none}"
    padding: 16px
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 12px 16px
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    borderColor: "{colors.focus-ring}"
    typography: "{typography.body}"
    rounded: "{rounded.xs}"
    padding: 12px 16px
  badge:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
    padding: 3px 8px
  badge-dark:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.label-caps}"
    rounded: "{rounded.none}"
    padding: 3px 8px
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 16px 24px
  utility-bar:
    backgroundColor: "{colors.surface-dark}"
    textColor: "{colors.on-dark}"
    typography: "{typography.caption}"
    padding: 8px 16px
---

# Salomon Design System

## Overview

Salomon arrived in Annecy, France in 1947 as a precision instrument maker before it became one of the most technically respected mountain sports brands on earth. That founding precision still runs through every design decision: the digital identity is built on pure black (`{colors.surface-dark}`) and sharp white (`{colors.background}`), with the brand's amber-orange (`{colors.primary}`) as the only chromatic intervention — used as selectively as a headlamp's beam in darkness. The result is a canvas that looks less like consumer e-commerce and more like engineered equipment laid out for inspection, with product photography doing the work of atmosphere.

The typographic system is built around Salomon's own custom sans-serif, a condensed grotesque with high x-height and tight vertical proportions. At display scale it has the velocity of a trail runner's stride — narrow, upright, fast — and at `{typography.display-hero}` size with negative tracking it compresses into something that feels structural, not decorative. Buttons and nav labels are set in uppercase with generous letter-spacing, a technical-manual clarity that pairs cleanly with the compressed display register. Nothing is set in a serif. Nothing softens.

Shape language reinforces the equipment logic. Border radii are essentially zero — `{rounded.none}` on nearly all product cards, hero containers, and buttons. The rare `{rounded.xs}` (2px) appears only on the smallest input controls; `{rounded.sm}` (3px) on certain dropdown pills. This is a brand that makes ski bindings and crampon-compatible boots: hardware doesn't have pillow corners.

**Key Characteristics:**
- Pure black (`{colors.surface-dark}`) hero canvas — dark-first visual identity with white-text contrast at `{colors.on-dark}`
- Salomon brand accent orange-yellow (`{colors.primary}`) — used exclusively on primary CTAs, badges, and focus states
- Custom condensed grotesque (`{typography.display-hero}`) — tight, fast, technical at display scale
- Uppercase button labels with tracked letterSpacing (`{typography.button-ui}`) — spec-sheet clarity for all CTAs
- Sharp zero-radius geometry (`{rounded.none}`) on virtually all containers, cards, and buttons
- Full-bleed mountain photography — trail, snow, and technical gear, never studio white
- Black utility bar (`{colors.surface-dark}`) as the topmost navigation layer — persistent brand dark
- Minimal color vocabulary: black, white, and one amber accent — the mountain palette at altitude
- Tight negative tracking on display text (`{typography.display-hero}` at -1px) — velocity and compression
- Extracted spacing scale anchored on 8px with generous section-level rhythm at 64–96px

## Colors

### Surface & Canvas
- **Pure White** (`{colors.background}`): Product page canvas, PDP backgrounds, editorial text sections. The primary light surface.
- **Light Gray** (`{colors.surface}`): Product card background, secondary section fills, form field backgrounds.
- **Pure Black** (`{colors.surface-dark}`): The dominant hero and utility surface. The entire dark-mode editorial register lives on this.
- **Near-Black** (`{colors.surface-mid}`): Secondary dark surfaces, footer backgrounds, hover states on dark buttons.

### Ink / Text
- **Black** (`{colors.ink}`): Primary text on all light surfaces.
- **Mid Gray** (`{colors.ink-secondary}`): Extracted value `#626364` — secondary copy, product metadata, nav sub-labels, muted UI text.
- **Light Gray** (`{colors.ink-muted}`): Extracted value `#b1b5b8` — disabled states, placeholder copy, fine-print annotations.
- **On Dark** (`{colors.on-dark}`): White text on `{colors.surface-dark}` and over photography.

### Brand Accent
- **Salomon Orange-Yellow** (`{colors.primary}`): The brand's single chromatic anchor. Used on primary CTA buttons, promotional badges, the Salomon "S" logomark accent, and keyboard focus rings. Extremely restrained — one or two instances per viewport at most. (`/* estimated — amber-orange per brand identity; dembrandt extraction blocked */`)
- **On Primary** (`{colors.on-primary}`): Pure black text on the brand-yellow background — maximum contrast against the amber.
- **Primary Hover** (`{colors.primary-hover}`): Darkened amber for hover state on yellow CTAs.

### Interaction & Borders
- **Focus Ring** (`{colors.focus-ring}`): Brand-yellow outline on keyboard focus — maintains brand color even in accessibility context.
- **Border** (`{colors.border}`): Extracted hairline `#f0eeee` — pale warm-white used as section dividers and product grid separators.
- **Border Dark** (`{colors.border-dark}`): Darker hairline for light-surface form fields and component outlines.

### Shadow Tints
- **Shadow Soft** (`{colors.shadow-soft}`): Flattened from `rgba(0,0,0,0.13)` per extraction — used in the rare floating-panel elevation moments.

## Typography

### Font Family
- **Primary**: Salomon custom grotesque (condensed, high-x-height sans-serif, self-hosted). Closest Google Font substitute: **Barlow Condensed** for display sizes, **Barlow** for body. Fallback: `Arial, sans-serif`. The custom face is not available via CDN.
- **Display register**: Narrow, upright, compressed at large sizes — designed to communicate speed and technical precision simultaneously.
- **OpenType Features**: Tabular figures on prices and performance stats; standard ligatures off (the compressed face handles them natively). No swash, no discretionary.

### Hierarchy

The complete type scale is declared in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 72px / 700 / -1px — main hero headline over photography and on dark canvas |
| `display` | 48px / 700 / -0.5px — campaign and category landing section heads |
| `heading-section` | 32px / 700 / -0.25px — feature section titles, PDP heads |
| `heading-sub` | 20px / 600 — product feature callouts, section sub-heads |
| `body-large` | 18px / 400 — editorial lead copy, PDP intros, story pages |
| `body` | 16px / 400 — standard running copy, product descriptions |
| `nav-link` | 14px / 600 / 0.5px tracking — primary navigation categories |
| `button-ui` | 14px / 700 / 1px tracking / UPPERCASE — all CTA labels |
| `label-caps` | 12px / 700 / 1.5px tracking / UPPERCASE — promotional badges, category chips |
| `caption` | 12px / 400 — smallest metadata, size guides, fine print |

### Principles
- **Condensed weight carries display authority**: The custom grotesque at 700 weight and negative tracking (-0.5px to -1px) compresses into something that reads like a race number bib — high-information density at large sizes.
- **Uppercase + tracking is the UI register**: All buttons, nav, and label caps run in uppercase with generous positive tracking (0.5–1.5px), transitioning from compressed display into legible UI chrome.
- **No serif counterpoint**: The entire system is sans-serif throughout — display, body, and UI chrome all share the grotesque family. Variety comes from weight (400 / 600 / 700) and tracking, not typeface mixing.
- **Tight display, open body**: Display tokens run at 0.95–1.1 line-height for visual density; body sits at 1.5 for editorial readability.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. Extracted spacing values from the site include 8px (component internals), 29px (~`{spacing.lg}` + 5px for adjusted section rhythm), 33px, and 67px — suggesting a loose 8px anchor with pragmatic section-level values. Dominant gaps for section rhythm fall in the 64–96px range.

### Grid & Container
- Max content width: 1440px with full-bleed photography breaking the container at hero scale
- Product grid: 4-up desktop, 2-up tablet, 1-up mobile — tight 16px gutters, no card borders at rest
- Hero zones: full-bleed dark photography or pure black background with centered or left-anchored display typography
- Navigation: full-width horizontal bar with mega-menu dropdown; collapses to hamburger below ~768px

### Whitespace Philosophy
- **Dark silence, not bright air**: Unlike Arc'teryx's white-canvas breathing room, Salomon uses black sections as visual resets between product grid moments. The whitespace is chromatic — it's made of darkness.
- **Photography and product as the sole decoration**: No illustrative icons, no gradient fills, no decorative dividers. The page structure is photography → grid → photography → dark editorial.
- **Tight product chrome**: Product tiles run compact with minimal internal padding; hero and campaign sections breathe at 64–96px.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Default for all product cards, persistent nav chrome, grid tiles |
| Hairline (Level 1) | `1px solid {colors.border}` | Product grid dividers, section rules, nav bottom edge |
| Panel (Level 2) | `rgba(0,0,0,0.13) 0px 2px 9px -1px` | Floating nav panels, mega-menu dropdowns; extracted from site |
| Modal (Level 3) | `rgba(0,0,0,0.25) 0 8px 24px -2px` | Cart drawer, overlays, dialog surfaces |
| Focus Ring | `0 0 0 2px {colors.focus-ring}` | Keyboard focus indicator in brand amber |

**Shadow Philosophy**: Salomon is nearly flat. The interface hierarchy is built through dark/light canvas alternation and photography, not through box-shadow stacking. The single confirmed shadow (`rgba(0,0,0,0.13) 0px 2px 9px -1px`, extracted directly) is used sparingly for floating navigation panels. Cards and buttons are shadowless. This matches the technical-equipment ethos — a ski binding doesn't cast a shadow for decorative effect.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Everything: product cards, buttons, image containers, hero zones |
| `xs` | 2px | Smallest interactive controls, form inputs |
| `sm` | 3px | Extracted from borderRadius data — dropdown pills, certain popups |
| `md` | 4px | Secondary UI elements, tooltips |
| `pill` | 9999px | Search pill, occasional filter chips |

The system is binary in practice: `{rounded.none}` (0px) is default for nearly all UI. The 2–3px micro-radii (`{rounded.xs}`, `{rounded.sm}`) appear only on smallest interactive controls and are extracted directly from the site's computed styles. There are no rounded product cards, no soft-cornered modals, no pill buttons in primary UI. Salomon's shape language is a piece of hardware.

## Components

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

### Button Variants
- **`button-primary`** — Brand amber (`{colors.primary}`) fill, black text (`{colors.on-primary}`), 0px radius, `12px 24px` padding, 14px 700 uppercase with 1px tracking. Hover: darkened amber (`{colors.primary-hover}`). Used for highest-priority CTAs: "ADD TO CART", "SHOP NOW".
- **`button-primary-hover`** — Deepened amber on hover (`{colors.primary-hover}`), same geometry and typography.
- **`button-secondary`** — Pure black fill (`{colors.surface-dark}`), white text, 0px radius. Used for secondary CTAs on light backgrounds.
- **`button-secondary-hover`** — Near-black (`{colors.surface-mid}`) on hover — a subtle shift that maintains the dark identity.
- **`button-ghost`** — Transparent fill, white text, white 1px border — used over photography and on dark editorial zones. Hover inverts to white fill with dark text.

### Cards
- **`card`** — White (`{colors.background}`) surface, 0px radius, no shadow, no border at rest. Product tile: photograph + product name (14px `{typography.nav-link}`) + price + colorway count.
- **`card-dark`** — Pure black surface (`{colors.surface-dark}`) with white text — editorial story cards on dark backgrounds.

### Inputs
- **`input`** — Light gray (`{colors.surface}`) fill, 2px radius (`{rounded.xs}`), 12px 16px padding. **`input-focus`** gains `{colors.focus-ring}` (brand amber) border outline — the only accent color appearing in form chrome.

### Badges
- **`badge`** — Brand amber fill, black text, 0px radius, uppercase 12px 700 with 1.5px tracking — used for "NEW", "SALE", performance feature callouts.
- **`badge-dark`** — Pure black fill, white text — category and sport tags on light card surfaces.

### Navigation
- **`utility-bar`** — Pure black strip above the primary nav (`{colors.surface-dark}`), white `{typography.caption}` text for promotions and shipping notices.
- **`nav-bar`** — White background, black text categories, 14px `{typography.nav-link}` uppercase. 1px `{colors.border}` bottom edge. Hover: an underline indicator animates below the active category.

## Do's and Don'ts

### Do
- Use pure black (`{colors.surface-dark}`) for all hero zones and dark editorial sections — the dark canvas is the Salomon brand signature
- Apply `{colors.primary}` (brand amber) exclusively for primary CTAs, badges, and focus rings — its scarcity is its power
- Set all display headlines in the custom condensed grotesque at weight 700 (`{typography.display-hero}`) with negative tracking
- Run button and nav labels in uppercase with `{typography.button-ui}` (1px letter-spacing) — the spec-sheet clarity register
- Keep `{rounded.none}` (0px) on all buttons, cards, and containers — the zero-radius geometry is the brand's equipment language
- Use full-bleed mountain photography — alpine terrain, trail running, technical gear in real conditions
- Keep `{colors.surface-dark}` as the topmost utility bar background — it sets the brand darkness from the first pixel
- Apply negative tracking (-0.5px to -1px) on all display text — compressed velocity at large sizes

### Don't
- Don't introduce a second chromatic color alongside the brand amber — the palette is black, white, and one accent
- Don't round buttons, cards, or image containers — the 0px radius is the system's geometry signature
- Don't use `{colors.primary}` on secondary CTAs, decorative elements, or text links — preserve its stamp quality
- Don't introduce soft, warm shadows — the shadow system uses pure `rgba(0,0,0,...)` tints with no warm brown or colored tint
- Don't apply positive tracking on display headlines — the condensed grotesque has its own tight internal rhythm
- Don't use the brand amber as a background for large dark sections — it belongs on action components at small scale
- Don't add gradient overlays on hero photography — choose images with built-in compositional contrast
- Don't introduce a serif face — the entire system is grotesque-only, from display to caption

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <390px | Single column; display drops to ~40px; hamburger nav; 1-up product grid |
| Mobile | 390–480px | Single column; hero at ~48px; full-bleed photography maintained |
| Tablet | 481–768px | 2-up product grid; compact inline nav; hero at ~56px |
| Desktop | 769–1440px | 4-up product grid; full horizontal nav with mega-menu; 72px display hero |
| Large Desktop | >1440px | Max 1440px container; full hero size; generous section padding |

### Touch Targets
- CTA buttons: `12px 24px` padding provides adequate tap height at mobile; primary amber CTA is the clearest hit target
- Nav collapse: hamburger full-screen panel below ~768px, minimum 48px row heights
- Product tiles: entire card is the tap target — image and label both resolve to the product

### Collapsing Strategy
- **Navigation**: Utility bar remains at all breakpoints; primary nav collapses to hamburger below ~768px
- **Hero**: Display headline scales from 72px desktop down to ~40px on smallest mobile; uppercase and 0px radius maintained
- **Product grid**: 4-up → 2-up → 1-up with consistent sharp geometry and no border change
- **Photography**: Full-bleed at all breakpoints; art-directed portrait crops on mobile with subject preserved in frame
- **Spacing**: Section padding compresses from 96px toward 32–48px on mobile; component internals stay tight at 8–16px

### Image Behavior
- Hero photography always full-bleed, edge-to-edge, no container radius
- Product images maintain square or fixed aspect ratio across breakpoints
- Dark photography preferred — subjects shot in mountain terrain with high natural contrast

---

## Agent Prompt Guide

### Quick Color Reference
- Background: `{colors.background}` (#ffffff)
- Dark canvas / hero: `{colors.surface-dark}` (#000000)
- Primary text: `{colors.ink}` (#000000)
- Secondary text: `{colors.ink-secondary}` (#626364)
- Brand accent / CTA: `{colors.primary}` (#f5a623)
- CTA text: `{colors.on-primary}` (#000000)
- White on dark: `{colors.on-dark}` (#ffffff)
- Border hairline: `{colors.border}` (#f0eeee)
- Focus ring: `{colors.focus-ring}` (#f5a623)

### Example Component Prompts

- "Create a Salomon-style dark hero section: pure black (`{colors.surface-dark}`) full-bleed background or mountain photography. Center a 72px Salomon condensed grotesque bold headline 'TRAIL IN MOTION' in white (`{colors.on-dark}`), `-1px` letter-spacing, `0.95` line-height. Below: a 16px body copy line in white. Then two side-by-side buttons: one brand-amber fill (`{colors.primary}`) with black text, 14px 700 uppercase, 1px letter-spacing, 0px radius, `12px 24px` padding; one transparent with white 1px border and white text, same typography."
- "Build a Salomon product card: white (`{colors.background}`) surface, 0px radius, no shadow. Full-bleed square product photo at top. Below the image: 14px 600 uppercase product name in `{colors.ink}`, 14px 400 price, and a `{colors.ink-secondary}` caption for colorway count (e.g., '5 colors'). On hover: image scales very slightly (1.03) over 0.25s ease."
- "Design the primary nav: white background, pure black horizontal category labels in 14px 600 uppercase with 0.5px tracking (`{typography.nav-link}`). Salomon 'S' logomark left (~80px wide). Right: search, account, and bag icons in `{colors.ink}`. 1px `{colors.border}` bottom edge. Active category gets a 2px bottom indicator in `{colors.primary}` (brand amber) animating up on hover."
- "Create a primary CTA button: `{colors.primary}` (#f5a623) fill, `{colors.on-primary}` (#000000) text, **0px radius**, `12px 24px` padding, 14px 700 uppercase with 1px letter-spacing. On hover: background transitions to `{colors.primary-hover}` (#e09000) over 0.2s ease. No shadow at any state."
- "Build a product feature badge: brand amber (`{colors.primary}`) fill, black text (`{colors.on-primary}`), 0px radius, 12px 700 uppercase 1.5px tracking, `3px 8px` padding. Label: 'GORE-TEX'. Position top-left on product card image."
- "Create a dark editorial section on `{colors.surface-dark}` (#000000): 64px condensed grotesque headline in white (`{colors.on-dark}`) at -0.5px tracking. Below: 18px body copy in `{colors.ink-secondary}` (#626364) — the mid-gray on black contrast reads as secondary without being invisible. A single amber CTA (`{colors.primary}`) with black text anchors the section."

### Iteration Guide

1. Start with pure black (`{colors.surface-dark}`) for hero zones and white (`{colors.background}`) for commerce — alternate these registers as the page scrolls; the dark/light rhythm is the brand's visual heartbeat.
2. Brand amber (`{colors.primary}`) appears once per section maximum, on the primary CTA. If no CTA is present, no amber should appear.
3. Set all display headlines in 700-weight condensed grotesque with negative tracking. If it's a headline and it's not compressed and heavy, it's wrong for this system.
4. Uppercase + tracked letterSpacing (`{typography.button-ui}`) is mandatory on all buttons, nav links, and label badges. Lowercase CTAs read as casual — this brand is technical.
5. All buttons and containers sit at `{rounded.none}` (0px). Check every border-radius before finalizing — the zero geometry is the non-negotiable signature.
6. Shadows appear only on floating nav panels (`rgba(0,0,0,0.13)` from the extraction). Every other surface is flat.
7. The color hierarchy is strict: white text on black, black text on amber, black text on white. No mid-tones in brand moments.

---

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