---
version: alpha
name: Stone Island
description: "A near-black industrial canvas set entirely in Monument Grotesk Mono — small, uppercase, tracked wide — where the compass badge is the only decoration and textile experimentation makes the product its own visual argument."

colors:
  # Surface / canvas
  background: "#0a0a0a"          # near-black — the dominant page canvas
  surface: "#111111"             # slightly lighter dark surface for secondary zones
  surface-mid: "#1a1a1a"         # card and panel backgrounds on dark canvas
  surface-light: "#f0f0f0"       # light mode product detail backgrounds

  # Ink / text
  ink: "#ffffff"                 # primary text on dark canvas
  ink-secondary: "#888888"       # secondary copy, metadata, navigation sub-labels
  ink-muted: "#555555"           # disabled text, placeholder copy
  on-light: "#0a0a0a"            # text on light surfaces and product images

  # Brand accent — Stone Island uses near-white and occasional teal in specific campaign contexts
  primary: "#ffffff"             # primary CTA — white on dark is the brand's main action color
  on-primary: "#0a0a0a"          # text on white CTAs
  primary-teal: "#1a6b6b"        # campaign teal / deep teal seen in imagery contexts /* estimated */
  on-teal: "#ffffff"             # text on teal surfaces

  # Interaction states
  text-hover: "#cccccc"          # text dims on hover — near-white to medium gray
  focus-ring: "#ffffff"          # keyboard focus outline — white on dark
  overlay: "#0a0a0a"             # was rgba(10,10,10,0.85) — Google format requires hex /* estimated */

  # Borders
  border: "#2a2a2a"              # subtle dark border for cards and dividers on dark canvas
  border-light: "#dddddd"        # light border for product detail panels

  # Shadow tints
  shadow-soft: "#000000"         # deep shadow used under floating nav panels

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

rounded:
  none: 0px

typography:
  display-hero:
    fontFamily: "ABCMonumentGroteskMono, Monument Grotesk Mono, Courier New, monospace"
    fontSize: 48px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0.1em
  display:
    fontFamily: "ABCMonumentGroteskMono, Monument Grotesk Mono, Courier New, monospace"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.1
    letterSpacing: 0.08em
  heading-section:
    fontFamily: "ABCMonumentGroteskMono, Monument Grotesk Mono, Courier New, monospace"
    fontSize: 18px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.08em
  heading-sub:
    fontFamily: "ABCMonumentGroteskMono, Monument Grotesk Mono, Courier New, monospace"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0.1em
  body-large:
    fontFamily: "ABCMonumentGroteskMono, Monument Grotesk Mono, Courier New, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.04em
  body:
    fontFamily: "ABCMonumentGroteskMono, Monument Grotesk Mono, Courier New, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0.04em
  nav-link:
    fontFamily: "ABCMonumentGroteskMono, Monument Grotesk Mono, Courier New, monospace"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.12em
  button-ui:
    fontFamily: "ABCMonumentGroteskMono, Monument Grotesk Mono, Courier New, monospace"
    fontSize: 11px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.15em
  label-mono:
    fontFamily: "ABCMonumentGroteskMono, Monument Grotesk Mono, Courier New, monospace"
    fontSize: 10px
    fontWeight: 600
    lineHeight: 1.0
    letterSpacing: 0.2em
  caption:
    fontFamily: "ABCMonumentGroteskMono, Monument Grotesk Mono, Courier New, monospace"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.06em

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.text-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px

  button-secondary:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px
  button-secondary-hover:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 12px 24px

  button-ghost:
    backgroundColor: "transparent"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.none}"
    padding: 0px
  button-ghost-hover:
    textColor: "{colors.ink}"
    padding: 0px

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

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

  badge:
    backgroundColor: "{colors.surface-mid}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
    padding: 4px 8px
  badge-new:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.none}"
    padding: 4px 8px

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

  select:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.none}"
    padding: 8px 0px
  select-focus:
    backgroundColor: "transparent"
    textColor: "{colors.ink}"
    rounded: "{rounded.none}"
    padding: 8px 0px
---

# Stone Island Design System

## Overview

Stone Island's interface is what you get when an Italian research laboratory decides it also needs a website. The canvas is near-black (`{colors.background}`) — not fashionable charcoal or editorial midnight, but the flat, dense dark of a studio light-table stripped down for work. Against that darkness, everything is set in **ABC Monument Grotesk Mono**, a monospaced grotesque with fixed-width characters, and it runs at sizes so small and spaced so wide (`{typography.nav-link}`, `{typography.button-ui}`) that reading the navigation feels like deciphering a technical spec sheet. It is not an accident. Stone Island has been dyeing and bonding and laminating fabrics in Ravarino since 1982; their site communicates the same register as their treatment labels — precise, industrial, not trying to seduce you.

The type never gets large. There are no 80px hero headlines, no display-weight statements, no gradient logotype. The compass badge, a geometric rose rendered in structural steel tones, carries the entire brand identity. Text exists to identify — sizes, categories, product codes — and does so in uppercase, tracked wide, in monospace. The result is a screen that looks like it was set on a Teletype or a fabric-testing machine readout rather than designed for commerce. Yet it is distinctive in exactly the way that Stone Island's output is distinctive: the restraint is a technical choice, not a reductive one.

The geometry is absolute zero-radius (`{rounded.none}`) — the same sharp rectangle logic you would find on a garment tag, a woven patch, a cargo pocket. Product photography — jackets in extreme conditions, close-ups of bonded membranes, textile detail shots at macro scale — provides the only tonal warmth in the system. The campaign imagery is characteristically dark: editorial lighting, deep shadows, graphite and slate environmental tones that rhyme with the background. The product photograph is the canvas's only exception.

**Key Characteristics:**
- Near-black canvas (`{colors.background}` `#0a0a0a`) — darker than most dark-mode systems, read as workshop space not consumer dark
- **ABC Monument Grotesk Mono** — the single, exclusive typeface at every scale; monospaced, uppercase, tracked wide
- Type is intentionally small: `{typography.nav-link}` at 11px and `{typography.button-ui}` at 11px — the system communicates precision, not legibility
- Wide positive letter-spacing (`0.1–0.2em`) at every level — the characters breathe in their fixed-width grid
- Zero border-radius everywhere (`{rounded.none}`) — the UI is a grid of hard rectangles from buttons to containers
- White (`{colors.primary}`) as the primary CTA color — the only fully light surface in a system built on darkness
- Compass badge logo: geometric, multi-panel, rendered in structural tones — the only brand decoration in the system
- Product photography in extreme-environment or textile-detail style — no lifestyle, no model face, rarely color
- Flat elevation throughout — no card shadows, no panel blur, no decorative depth
- Typography weight variation is minimal: `400` for body and display, `600` for navigation and labels
- Site maintenance page itself is on-brand: dark, monospace, compass geometric, grid-text — the design system runs at 100% even when the site is down

## Colors

### Surface & Canvas
- **Near-Black** (`{colors.background}`): The total page canvas. Not a conventional dark mode — this reads as a workshop floor under industrial lighting, not a consumer-brand night theme.
- **Dark Surface** (`{colors.surface}`): Secondary zones and section alternation within the dark canvas. A nearly imperceptible step up.
- **Card Dark** (`{colors.surface-mid}`): Card and panel backgrounds. Distinguishes product tiles and floating elements from the raw canvas.
- **Light Panel** (`{colors.surface-light}`): Product detail and specification zones where photography requires a neutral light ground.

### Ink / Text
- **White** (`{colors.ink}`): Primary text at every level on the dark canvas — navigation, headings, body copy, CTAs. The maximum contrast within the system.
- **Mid Gray** (`{colors.ink-secondary}`): Secondary labels, metadata, category sub-labels, ghosted navigation items.
- **Muted Dark Gray** (`{colors.ink-muted}`): Disabled states, placeholder text, inactive UI.
- **On Light** (`{colors.on-light}`): Near-black text reserved for light-panel zones and product specification layouts.

### Brand Accent
Stone Island's accent strategy is near-monochromatic. The primary action (`{colors.primary}`) is white — the lightest possible element on the dark canvas. Campaign imagery introduces occasional deep teal (`{colors.primary-teal}`) in specific editorial and seasonal contexts, but it is atmospheric, not systematic.

### Interaction & Borders
- **Text Hover** (`{colors.text-hover}`): Links and nav items dim from white to medium gray on hover — low-motion, restrained.
- **Focus Ring** (`{colors.focus-ring}`): White outline for keyboard focus states — maximum visibility on the dark canvas.
- **Border** (`{colors.border}`): Barely-perceptible dark border used on product tiles and section dividers.
- **Border Light** (`{colors.border-light}`): Light hairline for product detail panels on the `{colors.surface-light}` ground.

## Typography

### Font Family
- **Primary**: `ABCMonumentGroteskMono` — a custom monospaced grotesque, self-hosted as `ABCMonumentGroteskMono-Light.woff2` and `ABCMonumentGroteskMono-Medium.woff2`. Not available on Google Fonts; closest substitute is **Space Mono** or **IBM Plex Mono** for the fixed-width character rhythm, though neither replicates Monument Grotesk's refined grotesque structure.
- **Monospaced by design**: The font is a mono — every character occupies the same width. This is not a code font applied out of context; it is a purpose-designed text mono with grotesque proportions.
- **No secondary typeface**: The entire system operates in one font. Size, weight, and letter-spacing carry all hierarchy.
- **OpenType**: Fixed-width numeral figures, standard ligatures. The system exploits monospaced character alignment for product codes, size grids, and specifications.

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 48px / 400 / +0.1em — primary campaign headline when used (rare); compass badge context |
| `display` | 28px / 400 / +0.08em — section titles, category landing headings |
| `heading-section` | 18px / 600 / +0.08em — section sub-heads, navigation panel titles |
| `heading-sub` | 14px / 600 / +0.1em — feature labels, product attribute heads |
| `body-large` | 14px / 400 / +0.04em — product descriptions, editorial lead text |
| `body` | 12px / 400 / +0.04em — standard running copy, product specifications |
| `nav-link` | 11px / 600 / +0.12em — primary navigation, all uppercase |
| `button-ui` | 11px / 600 / +0.15em — all CTA and button labels, uppercase |
| `label-mono` | 10px / 600 / +0.2em — product tags, badges, garment codes |
| `caption` | 10px / 400 / +0.06em — fine print, footnotes, SKU identifiers |

### Principles
- **Monospaced as philosophy**: The fixed-width character grid is not a technical constraint — it is a design choice that aligns with the brand's textile-grid and measurement-chart visual language
- **Type stays small**: The system's display hierarchy peaks around 28–48px; there is no 72px or 96px headline register. Restraint reads as research confidence.
- **Wide tracking, not tight**: Every level uses positive letter-spacing (`0.04em` minimum, `0.2em` maximum). Tight tracking — which most premium brands apply to large display text — is rejected here.
- **Uppercase is the default register**: Navigation, buttons, labels, and display all run uppercase. Sentence case appears only in product descriptions and body text.
- **Weight contrast through tracking**: Structural elements (nav, buttons) use 600 weight AND wider tracking to distinguish them from body weight 400.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px. The site's extracted spacings (7px, 8px, 32px) confirm a tight 8px rhythm for component internals and 32px for section breaks. The canvas breathes through color and photography, not margin.

### Grid & Container
- Max content width: 1280px (confirmed via extracted breakpoints)
- Desktop breakpoint: 1920px → 1280px
- Product grid: tight multi-column on desktop, reflows to 2-up on tablet, 1-up on mobile — no card borders, no gaps between tiles
- Navigation: horizontal, uppercase mono labels at 11px — dense, technical, architectural
- Hero: full-bleed photography or campaign imagery; text overlaid at small mono scale — the photograph dominates

### Whitespace Philosophy
- **Dark canvas absorbs space**: On the near-black ground, sections are delimited by content change, not whitespace — the darkness itself is the breathing room
- **Typography is compact**: Small, tracked-wide mono type uses horizontal character spacing rather than vertical line spacing to create rhythm
- **Product tiles are tight**: Photography runs edge-to-edge with label immediately beneath — the tile is the image

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | The total default — all product tiles, navigation, buttons, page chrome |
| Hairline (Level 1) | `1px solid {colors.border}` | Section dividers, card edges on dark canvas |
| Panel (Level 2) | `0 8px 24px {colors.shadow-soft}` | Floating navigation panels, mega-menu dropdowns |
| Light Zone (Level 3) | `{colors.surface-light}` fill | Product detail specifications on white ground — elevation through color, not shadow |

**Shadow Philosophy**: Stone Island is essentially flat. The dark canvas provides inherent depth — the near-black background reads as a receding plane behind all elements without requiring shadows. The rare shadow (mega-menu, overlay panel) is deep and diffuse (`{colors.shadow-soft}` at `#000000`), matching the ink of the canvas. No card glow, no inner-glow, no atmospheric blur. The flatness is industrial: panels and surfaces exist to organize information, not to create spatial drama.

## Shapes

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

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Every element in the system — product cards, buttons, inputs, badges, image frames, navigation |

Stone Island is as binary as it gets: one token, zero radius, everywhere. This is not the workwear pragmatism of Carhartt WIP's square corners — it is a precision manufacturing sensibility. Garment patches, technical labels, cargo attachment points, compass badges: these are all rectangular, because function defines form. The UI matches.

## Components

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

### Button Variants

- **`button-primary`** — White (`{colors.primary}`) fill, near-black text (`{colors.on-primary}`), **0px radius**, `12px 24px` padding, 11px Monument Grotesk Mono 600 uppercase, wide tracking. On hover, fill transitions to light gray (`{colors.text-hover}`). The button reads like a garment label tag in positive.
- **`button-secondary`** — Transparent fill, white text, `1px solid {colors.border}` outline — secondary actions and filter controls on the dark canvas.
- **`button-ghost`** — Transparent fill, `{colors.ink-secondary}` gray text, zero padding — inline link-style tertiary actions, breadcrumb navigation.

### Cards

- **`card-product`** — Zero padding, zero radius, no border, no shadow on the dark canvas. Product photography fills the full tile. Product code and name in 10–11px uppercase mono immediately below. The tile is the photograph plus its label.

### Inputs

- **`input`** — Transparent background, white text, borderless or `1px solid {colors.border}` bottom-only treatment. Zero radius. Monospaced input — each character aligns in the fixed-width grid. On focus, border brightens to `{colors.focus-ring}`.

### Badges / Tags

- **`badge`** — Dark surface (`{colors.surface-mid}`) fill, white mono label at maximum tracking (`{typography.label-mono}`), zero radius, tight padding — used for material codes, treatment identifiers.
- **`badge-new`** — White fill, near-black text — used for "NEW" season-arrival indicators. The only badge that inverts the canvas logic.

### Navigation

- **`nav-bar`** — Near-black background (`{colors.background}`), white uppercase mono navigation at 11px and 0.12em tracking. `16px 32px` padding. No bottom border at rest. On hover, link dims to `{colors.text-hover}`. The compass badge logo centered or left-aligned.

## Do's and Don'ts

### Do
- Use **ABC Monument Grotesk Mono uppercase** at every scale — this is the only typeface in the system; no mixing
- Apply wide positive letter-spacing (`0.08em` minimum on display, `0.15em+` on buttons and labels) — the tracking is as load-bearing as the font itself
- Keep the canvas at `{colors.background}` (`#0a0a0a`) — not a lighter dark mode, not charcoal; this specific near-black is the brand ground
- Use `{colors.primary}` (white) as the primary CTA fill — white on near-black is the system's signal color
- Keep every border-radius at `{rounded.none}` — even 1px or 2px softening is wrong for this system
- Set all navigation and button type at 11px with weight 600 and wide tracking — the small size is intentional
- Use product photography full-bleed, edge-to-edge in tiles — no border, no shadow, no radius
- Keep badges and product tags at maximum tracking (`{typography.label-mono}` with 0.2em) — they should read like woven garment labels

### Don't
- Don't increase type sizes to conventional display scale — Stone Island's display hierarchy is deliberately compressed; the restraint is the voice
- Don't introduce a secondary typeface — not a display serif, not a humanist sans; Monument Grotesk Mono carries everything
- Don't round any element — the zero-radius posture is non-negotiable; it is the brand's structural geometry
- Don't use warm or mid-temperature brand colors as fills — the system is near-monochromatic; campaign teal (`{colors.primary-teal}`) is atmospheric, not a UI color
- Don't apply drop shadows to product tiles or navigation chrome — flatness on the dark canvas is architectural
- Don't tighten letter-spacing for "legibility" — the wide tracking at small sizes is the intended reading experience
- Don't break uppercase convention on navigation or buttons — these are always uppercase, always mono; sentence case stays in product descriptions only
- Don't use light (`{colors.surface-light}`) as the primary canvas — the light ground exists only for product specification detail zones, not as a page background alternative

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single-column product stack; hamburger nav; display type compresses further; compass badge logo maintains presence |
| Tablet | 640–1024px | Two-column product grid; navigation collapses to compact form; section padding tightens |
| Desktop | 1024–1280px | Full horizontal navigation; multi-column product grid; 1280px max-width container |
| Large Desktop | ≥1280px | 1280px max-width; content centered; generous canvas on either side |

### Touch Targets
- CTA buttons: `12px 24px` padding provides adequate tap height; text size remains small even on mobile — this is a brand that expects attention
- Navigation collapse: full-screen dark overlay with large uppercase mono category list; the dark canvas persists into mobile navigation
- Product tile tap: entire tile area is interactive; no separate CTA label needed

### Collapsing Strategy
- **Navigation**: horizontal compact mono bar → hamburger on mobile; dark canvas background maintained at all breakpoints
- **Display type**: 48px display compresses toward 28–32px on mobile; uppercase mono register and wide tracking maintained at every size
- **Product grid**: tight multi-column → 2-up → 1-up; photography maintains edge-to-edge, zero-padding treatment throughout
- **Spacing**: section breaks compress from `{spacing.xl}` toward `{spacing.md}` at mobile; the dark canvas absorbs the tightening

### Image Behavior
- Product photography always fills its container with zero radius and no border — the hard rectangle is the crop
- Campaign photography is full-bleed at all breakpoints; the dark canvas flows into and out of dark photographic zones seamlessly
- Textile detail and material close-up shots are served at high resolution — the photography communicates material research, not lifestyle aspiration

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Near-Black (`{colors.background}` `#0a0a0a`)
- Primary text: White (`{colors.ink}`)
- CTA fill: White (`{colors.primary}`)
- CTA text: Near-Black (`{colors.on-primary}`)
- Secondary text: Mid Gray (`{colors.ink-secondary}`)
- Border: Dark Border (`{colors.border}`)
- Hover state: Dim White (`{colors.text-hover}`)
- Focus ring: White (`{colors.focus-ring}`)

### Example Component Prompts

- "Create a Stone Island product tile on the near-black canvas (`{colors.background}`). No border, no radius, no shadow. Product photograph fills the full tile at zero padding. Directly below: the product code in 10px ABC Monument Grotesk Mono 600 uppercase, `0.2em` letter-spacing, white (`{colors.ink}`). Below that: product name at 12px / 400, white. Price at 12px / 400, `{colors.ink-secondary}` gray. The tile is the photograph plus its mono label."
- "Design a Stone Island primary CTA button: white (`{colors.primary}`) fill, near-black text (`{colors.on-primary}`), zero border-radius (`{rounded.none}`), `12px 24px` padding. Label in 11px ABC Monument Grotesk Mono 600 uppercase, `0.15em` letter-spacing. On hover: fill transitions to light gray (`{colors.text-hover}`) over `0.2s ease`. No shadow, no border, no radius — ever."
- "Build the Stone Island navigation bar: near-black (`{colors.background}`) background, full width. Compass badge logo centered or left. Navigation links in 11px ABC Monument Grotesk Mono 600 uppercase at `0.12em` letter-spacing, white (`{colors.ink}`). `16px 32px` padding. On hover, links dim to `{colors.text-hover}`. No bottom border at rest. Below 1024px: hamburger icon replaces links; full-screen dark overlay shows category list at 14–18px mono."
- "Create a material specification badge for Stone Island: dark card surface (`{colors.surface-mid}`) fill, white label in 10px ABC Monument Grotesk Mono 600 uppercase, `0.2em` letter-spacing, `4px 8px` padding, zero radius. Reads: 'DYNEEMA COMPOSITE' or 'HEAT REACTIVE'. The badge is a woven-label simulation in UI."
- "Design a Stone Island hero section: full-bleed dark campaign photograph (graphite environment, tactical outerwear subject). No scrim. Over the photograph, a text block in 28px ABC Monument Grotesk Mono 400 uppercase, white, `0.08em` letter-spacing, positioned bottom-left at `{spacing.xl}` offset. Below the headline: a white CTA button (`{components.button-primary}`) — `12px 24px` padding, near-black label, 11px mono uppercase. The canvas, the image, and the button share the same near-black register; the white button is the only fully light element."
- "Build a Stone Island product size-selector grid: each size option is a rectangle — `{colors.surface-mid}` fill, white `{typography.label-mono}` mono uppercase label ('S', 'M', 'L', 'XL', 'XXL'), zero radius, `8px 16px` padding, `1px solid {colors.border}` outline. On selected state: white fill, near-black text. On hover: border brightens to `{colors.ink}`. The grid of rectangles reads like a measurement chart."

### Iteration Guide

1. Start with the near-black canvas (`{colors.background}` `#0a0a0a`). If it reads as charcoal or as conventional dark mode, deepen it — Stone Island's ground is closer to a studio blackout than a night theme.
2. Set every text element in **ABC Monument Grotesk Mono uppercase**. There is no secondary typeface, no display substitute, no humanist alternative. If it isn't Monument Grotesk Mono, it is not Stone Island.
3. Apply wide positive letter-spacing at every level. Navigation and buttons at `0.12–0.15em`. Display at `0.08–0.1em`. Body at `0.04em`. Tighter than this is wrong.
4. Keep type small. Button labels at 11px. Navigation at 11px. Body at 12px. The hierarchy expresses itself through tracking and weight, not size. Resist scaling up for "readability" — the compression is the voice.
5. Zero border-radius (`{rounded.none}`) on everything. Buttons, cards, inputs, modals, images. Any rounding breaks the system's manufacturing logic.
6. White (`{colors.primary}`) is the action color — the only fully light surface on the dark canvas. Use it for primary CTAs. Secondary actions use transparent with a dark border or ghost-text styling.
7. Flatness is complete: no card shadows, no floating panel glow, no depth effects on persistent chrome. The dark canvas creates depth through color alone.

---

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