--- version: alpha name: "Instrument" description: "Dark-first editorial brutalism — cinematic near-black canvas, electric chartreuse punctuation, Instrument Serif and Sans at architectural scale" colors: background: "#070708" surface: "#111112" surface-elevated: "#1a1a1b" ink: "#e8e8e9" ink-muted: "#9a9a9b" primary: "#d4e840" on-primary: "#070708" primary-container: "#2a2e07" on-surface: "#c5c5c6" border: "#1e1e1f" # was rgba(232,232,233,0.12) — Google format requires hex border-light: "#0f0f10" # was rgba(7,7,8,0.12) — Google format requires hex focus-ring: "#d4e840" text-hover: "#ffffff" shadow-soft: "#000000" gradient-fade: "#e8e8e9" # was rgba(232,232,233,0.5) — opaque approximation of the fade-bottom gradient typography: display-hero: fontFamily: "Instrument Serif, Georgia, Times New Roman, serif" fontSize: 480px fontWeight: 400 lineHeight: 0.85 letterSpacing: -24px display: fontFamily: "Instrument Serif, Georgia, Times New Roman, serif" fontSize: 78px fontWeight: 400 lineHeight: 1.03 letterSpacing: -1.56px heading-section: fontFamily: "Instrument Sans, Helvetica Neue, Arial, sans-serif" fontSize: 60px fontWeight: 400 lineHeight: 1.07 letterSpacing: -1.8px heading-sub: fontFamily: "Instrument Sans, Helvetica Neue, Arial, sans-serif" fontSize: 44px fontWeight: 400 lineHeight: 1.09 letterSpacing: -1.32px heading-medium: fontFamily: "Instrument Sans, Helvetica Neue, Arial, sans-serif" fontSize: 36px fontWeight: 400 lineHeight: 1.11 letterSpacing: -0.54px body-large: fontFamily: "Instrument Sans, Helvetica Neue, Arial, sans-serif" fontSize: 21px fontWeight: 400 lineHeight: 1.52 letterSpacing: 0.315px body: fontFamily: "Instrument Sans, Helvetica Neue, Arial, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.2 letterSpacing: 0px nav-link: fontFamily: "Instrument Sans, Helvetica Neue, Arial, sans-serif" fontSize: 15px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0.3px button-ui: fontFamily: "Instrument Sans, Helvetica Neue, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0px overline: fontFamily: "Instrument Sans, Helvetica Neue, Arial, sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.33 letterSpacing: 1.32px caption: fontFamily: "Instrument Sans, Helvetica Neue, Arial, sans-serif" fontSize: 11px fontWeight: 400 lineHeight: 1.45 letterSpacing: 0.55px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 96px 4xl: 100px rounded: none: 0px sm: 8px lg: 24px pill: 999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 8px 20px button-primary-hover: backgroundColor: "{colors.text-hover}" textColor: "{colors.background}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 8px 20px button-secondary: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 8px 20px button-secondary-hover: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 8px 20px button-ghost: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 8px 20px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px card-hover: backgroundColor: "{colors.surface-elevated}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 12px 16px input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" borderColor: "{colors.focus-ring}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 12px 16px badge: backgroundColor: "{colors.primary-container}" textColor: "{colors.primary}" typography: "{typography.overline}" rounded: "{rounded.pill}" padding: 4px 10px badge-neutral: backgroundColor: "{colors.surface}" textColor: "{colors.ink-muted}" typography: "{typography.overline}" rounded: "{rounded.pill}" padding: 4px 10px nav: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" rounded: "{rounded.pill}" padding: 4px 12px --- # Instrument Design System ## Overview Instrument's website announces itself with one of the most committed typographic gestures in agency web design: the word "INSTRUMENT" in Instrument Serif at 480px, nearly touching the top of the viewport, set against a near-black canvas (`{colors.background}`) with a tight 0.85 line-height that collapses the letterforms into something architectural rather than typographic. This is not a logo — it is a declaration. The letterforms are wider than most viewports, their geometric slab-serif cuts implying precision manufacturing at a scale that makes every other agency's headline feel provisional. The palette is one of the sharpest chromatic decisions in the portfolio: `{colors.background}` (a carbon-dark near-black) paired with `{colors.primary}` (an electric chartreuse that appears in the hero section as the page's only saturated surface). The yellow-green is aggressive in the way only a confident agency can afford — it reads like a hazard strip, a highlighter, a moment of deliberate visual noise in an otherwise ink-and-grey environment. Every CTA, every interactive badge, every focus ring channels this single chromatic decision. The rest of the UI retreats to `{colors.ink}` and `{colors.ink-muted}` on dark, maintaining an almost monochromatic restraint that makes the chartreuse land harder when it appears. Typography operates as a dual system. Instrument Serif — the Google Fonts typeface the agency effectively named for themselves — carries all the editorial gravitas: the hero wordmark, editorial pull-quotes, and any text that needs to feel slower and more considered. Instrument Sans (a variable font served as `InstrumentSansVF.woff2`) handles everything procedural: navigation, UI chrome, body copy, and overlines. The two share a family name but pull in opposite directions — the Serif wide-jawed and authoritative, the Sans geometric and compact. Both use `"liga"` and `"ss12"` OpenType features, and both run at weight 400 for everything except where UI legibility demands otherwise. **Key Characteristics:** - Instrument Serif at 480px, `line-height: 0.85`, `letter-spacing: -24px` — the hero wordmark as architectural element, not typographic one - `{colors.primary}` chartreuse as the sole chromatic interrupt in an otherwise near-monochrome dark system — used for the hero section background, all CTAs, and focus rings - `{colors.background}` as the dominant surface: not decorative dark, but a carefully chosen near-black (`rgb(7, 7, 8)`) with a fractional cool undertone - Dual font system: Instrument Serif for editorial weight, Instrument Sans (variable) for procedural UI — same name, opposite register - Uppercase overlines in Instrument Sans at 12px, `letter-spacing: 1.32px` — the system's only use of tracked all-caps, for category labels and tags - `{rounded.pill}` (999px) as the primary interactive shape — nav chips, badges, CTAs all rounded to pill; content cards use `{rounded.lg}` (24px) - `{rounded.none}` for the display wordmark and editorial sections — the hero is hard-edged, zero radius, zero decoration - Pill-shaped navigation links as chip-buttons — each nav item is a small rounded container, not a bare text link - Card opacity fades at `0.25s ease` and `0.33s ease` — transitions communicate interaction without transform-based animation - Self-hosted variable fonts (`InstrumentSansVF.woff2`) — no Google Fonts CDN dependency despite the fonts being openly available - Scrolling ticker band beneath the hero, running at white text on `{colors.background}` — reinforces the editorial newspaper influence - Zero box shadows across the entire system — depth communicated through surface color steps alone ## Colors ### Primary Canvas - **Carbon Near-Black** (`{colors.background}`): The dominant canvas — `rgb(7, 7, 8)`, close enough to pure black that only side-by-side comparison reveals the cool cast. Used for the navigation background, body sections, and all dark-surface containers. - **Lifted Dark** (`{colors.surface}`): The primary card and container surface — a step above background, creating spatial separation without introducing light. Used for project cards, panel backgrounds, and form containers. - **Surface Elevated** (`{colors.surface-elevated}`): Reserved for hover states on cards and modals — a third tier of near-black that gives interactive elements their depth cue. ### Brand Accent - **Chartreuse Strike** (`{colors.primary}`): The agency's chromatic signature — an electric yellow-green deployed in the hero section, all CTA buttons, focus rings, and overline badge backgrounds. Applied with surgical restraint: it appears where action or identity is demanded, then retreats. - **Chartreuse on Primary** (`{colors.on-primary}`): The near-black background color recycled as text on `{colors.primary}` surfaces — the two-color system is so tight that the text-on-CTA color is just the canvas itself. - **Chartreuse Container** (`{colors.primary-container}`): A very dark green used for badge backgrounds that need to indicate the brand accent without full chartreuse saturation. ### Text Hierarchy - **Off-White Ink** (`{colors.ink}`): All primary text on dark surfaces — not pure white, a slightly muted near-white (`rgb(232, 232, 233)`) that reduces contrast fatigue on extended reading. - **Muted Secondary** (`{colors.ink-muted}`): Metadata, supporting text, de-emphasized labels — sits at approximately 60% the value of `{colors.ink}`. - **On-Surface** (`{colors.on-surface}`): A calculated hover state for text — the extracted hover for the primary palette color suggests `#c5c5c6` as the destination. ### Borders & Separators - **Dark Rule** (`{colors.border}`): Used as `border-top: 1px solid` on section dividers — approximates `rgba(232,232,233,0.12)` flattened to opaque `#1e1e1f`. Subtle against the dark canvas, present enough to create rhythm. - **Inverse Rule** (`{colors.border-light}`): The darker variant used on lighter panels — approximates `rgba(7,7,8,0.12)`. ### Focus & Interaction - **Chartreuse Focus Ring** (`{colors.focus-ring}`): Matching `{colors.primary}` — focus states use the brand accent, ensuring accessibility while preserving the system's chromatic logic. ## Typography ### Font Family - **Display / Editorial**: `Instrument Serif`, with fallbacks: `Georgia, Times New Roman, serif` - **UI / Body**: `Instrument Sans` (variable font, self-hosted as `InstrumentSansVF.woff2`), with fallbacks: `Helvetica Neue, Arial, sans-serif` - **Italic variant**: `Instrument Serif Italic` (self-hosted as `InstrumentSerif-Italic.woff2`) used for editorial emphasis and pull-quotes - **OpenType Features**: `"liga"` (standard ligatures) and `"ss12"` (stylistic set 12) active across most sizes in Instrument Sans. `"ss12" 0` (disabled) on display sizes. Overlines and uppercase labels run with `"ss12" 0` — the ligature and stylistic behavior is size-contextual. ### Hierarchy | Token | Use | |---|---| | `display-hero` | Wordmark-scale masthead — the INSTRUMENT hero, 480px with -24px tracking, 0.85 line-height | | `display` | Editorial section headers — large Instrument Serif statements at 78px | | `heading-section` | Major section anchors in Instrument Sans at 60px | | `heading-sub` | Sub-section labels and card headings at 44px | | `heading-medium` | Tertiary headings and large link lists at 36px | | `body-large` | Lead paragraphs and description text at 21px, `+0.315px` tracking | | `body` | Standard body copy at 20px | | `nav-link` | Navigation chip labels at 15px, `+0.3px` tracking | | `button-ui` | CTA button labels and interactive UI at 16px | | `overline` | Uppercase category labels, tags, and section markers — 12px, `1.32px` tracking, `text-transform: uppercase` | | `caption` | Metadata, credits, and fine print at 11px | ### Principles - **Weight 400 as the universal tone**: Unlike many agencies that bold their display text, Instrument uses regular weight at every scale. At 480px, the Serif's structural geometry provides all the emphasis needed — weight would be redundant noise. - **Negative tracking scales with size**: `-24px` at 480px, `-1.56px` at 78px, `-1.8px` at 60px, `-1.32px` at 44px, `-0.54px` at 36px — tracking normalises to near-zero below 25px. The system trusts optical tracking at small sizes rather than imposing numerical micro-adjustments. - **The two-font split is semantic, not decorative**: Instrument Serif is deployed wherever the content needs to carry authority and editorial slowness (headlines, hero, pull-quotes). Instrument Sans handles anything procedural (navigation, body, UI chrome). Mixing them on the same element would collapse the register distinction. - **Overlines are the system's uppercase exception**: Only the `overline` token uses `text-transform: uppercase` with positive tracking. Everything else — including display text — runs sentence or lowercase. The uppercase tier belongs exclusively to labels and category markers. - **Variable font flexibility**: The self-hosted `InstrumentSansVF.woff2` allows weight axis adjustment without additional font files — though the current implementation uses weight 400 throughout, the variable file is ready for future tonal differentiation. ## Layout ### Spacing System The base unit is 8px. The most-used spacing values are: 3px (28 instances), 4px (34 instances), 8px (62 instances), 12px, 16px, 24px, 48px, 96px. The 96px value (count: 13) governs section-level breathing room — large editorial sections breathe at three-grid-unit intervals. The `297px` values (count: 12) are calculated widths from responsive column math, not spacing tokens. The system feels deliberately spacious at macro scale and dense at micro — navigation chips are compact (8px padding), while section transitions use the full 96px step. ### Grid & Container - Max content width: approximately 1440px at desktop (breakpoints: 390px → 640px → 1024px → 1440px → 1920px) - Hero: the INSTRUMENT wordmark spans full viewport width, edge-to-edge, zero padding — typographic full-bleed - Work grid: multi-column card grid with `{rounded.lg}` cards (24px radius) - Ticker band: full-viewport-width horizontal scroll below the hero, acting as a typographic separator - Navigation: sticky top bar with pill-shaped nav chips, centered announcement bar, right-aligned utility links ### Whitespace Philosophy - **Scale contrast drives hierarchy**: The 480px wordmark followed immediately by 21px body creates a 23× scale ratio in consecutive elements — whitespace is implicit in the proportion jump, not added literally. - **Dense nav, generous body**: Navigation chips are compact and tightly spaced; section content breathes at 48–96px interval. The contrast makes the body feel like relief after the information-packed header. - **Chartreuse sections absorb their own air**: When `{colors.primary}` is used as a full section background, it needs no additional margin — the color change itself signals the spatial break. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | `{colors.background}` — all default surfaces | | Lifted (Level 1) | `{colors.surface}` → `{colors.surface-elevated}` | Card hover state — color step only, no box-shadow | | Section Break (Level 2) | `{colors.background}` → `{colors.primary}` | The chartreuse hero section — color contrast as elevation signal | | Focus Ring | `outline: 2px solid {colors.focus-ring}` | Keyboard focus on all interactive elements | **Shadow Philosophy**: Instrument uses zero box shadows. The shadow array in the extraction is empty. Elevation is communicated exclusively through surface color steps — background to surface to surface-elevated — which maintains legibility on the dark canvas without introducing competing light sources. The chartreuse section break is the most dramatic "elevation" in the system, not in the physical sense but in the attentional sense: it interrupts the dark plane with maximum chromatic contrast. ## Shapes The complete radius scale is in the `rounded:` token block above. | Token | Value | Use | |---|---|---| | `none` | 0px | Display wordmark, editorial text sections, the hero zone | | `sm` | 8px | Input fields (email, form elements) | | `lg` | 24px | Work/project cards — the primary card radius, applied to 50 elements | | `pill` | 999px | Navigation chips, badges, CTAs, all interactive chrome | The shape system is effectively binary from the user's perspective: content is hard-edged (`none`) or card-soft (`lg`); interactive elements are always pill-shaped. The 8px input radius is a practical third value — smooth enough for modern form feel without entering the card register. ## Components The complete component spec lives in the `components:` token block above. ### Button variants - **`button-primary`** — chartreuse pill (`{colors.primary}` fill, `{colors.on-primary}` text) — the system's only fully-saturated CTA. Pill-shaped at 999px radius. Used for primary CTAs across the site. - **`button-primary-hover`** — upgrades to white (`{colors.text-hover}`) on hover, maintaining dark text — a warm brightness shift rather than a tonal inversion. - **`button-secondary`** — dark surface pill (`{colors.surface}`) with `{colors.ink}` text — used for secondary actions where the chartreuse would be too assertive. - **`button-secondary-hover`** — flips to chartreuse on hover, matching `button-primary` — the hover state collapses the visual distinction and creates a deferred primary feel. - **`button-ghost`** — transparent background, `{colors.ink}` text — used for low-emphasis actions overlaid on dark sections. ### Cards - **Work/Project Card** — `{colors.surface}` background, `{rounded.lg}` (24px) radius, no border, no shadow. Opacity fades at `0.25s ease` on hover. The card Chrome is neutral; project imagery and case study type carry all the differentiation. - **Hover state** — surface steps up from `{colors.surface}` to `{colors.surface-elevated}` — a subtle lift that registers as interactive without displacement animation. ### Inputs - **Email / Text Input** — `{colors.surface}` background, `{rounded.sm}` (8px) radius, `12px 16px` padding. No visible border at default — the surface-to-background contrast provides affordance. Focus state introduces `outline: 2px solid {colors.focus-ring}` — the chartreuse accent makes the focus state unmissable. ### Badges / Tags - **`badge`** — chartreuse-tinted dark pill (`{colors.primary-container}` fill, `{colors.primary}` text) — for active category labels in brand-accent contexts. - **`badge-neutral`** — dark surface pill in uppercase overline style — the `tag--pill-shade` class from the extracted markup, rendered with `text-transform: uppercase` and `1.32px` letter-spacing. ### Navigation - **Primary Nav** — sticky dark top bar (`{colors.background}`). Nav links rendered as pill-shaped chips with `{rounded.pill}` radius and `4px 12px` padding in Instrument Sans 15px — each link is a mini-button, not a bare anchor. Center announcement bar with small uppercase link. Right utility cluster: ED&I, CAREERS, LATEST, CONTACT. - **Scroll Ticker** — full-width horizontal scrolling text band beneath the hero: white text on dark, running continuously. Editorial newspaper influence — the agency's tagline ("Making the Complex Simple · Since 2005 · Portland · New York") loops at a steady pace. ## Do's and Don'ts ### Do - Use `{colors.primary}` chartreuse exclusively for the hero section background, primary CTA buttons, focus rings, and badge accents — its power comes from scarcity - Apply `{rounded.pill}` to all interactive chrome: every nav chip, button, badge, and tag — the system's interactive vocabulary is entirely pill-shaped - Use `{rounded.lg}` (24px) on cards and media containers — the one place where softness enters non-interactive surfaces - Keep display text (Instrument Serif) at weight 400 — the geometry of the slab serif provides structural weight without numerical emphasis - Pair Instrument Serif for editorial statements with Instrument Sans for procedural UI — the register distinction is the system's typographic argument - Scale negative tracking with font size: `-24px` at 480px, down proportionally to near-zero below 25px - Apply `text-transform: uppercase` and `letter-spacing: 1.32px` only on the `overline` token — it is a specific tier, not a general emphasis tool - Use `0.25s ease` for card opacity transitions — this is the extracted card animation signature - Reference `{colors.focus-ring}` for all keyboard focus states — the chartreuse makes accessibility and brand identity identical ### Don't - Don't use warm colors or gradients — the system runs cool (near-black + yellow-green); no warm neutrals, no photography-color-pick accents - Don't apply `{colors.primary}` to paragraph links, inline emphasis, or decorative moments — reserve it for action and attention - Don't introduce box shadows — the shadow array is intentionally empty; use surface color steps for elevation - Don't mix `{rounded.pill}` and `{rounded.lg}` in the same component — buttons are always pill, cards are always 24px, never blend - Don't use Instrument Serif for body copy or navigation — it belongs to editorial display only; using it at 15–21px diminishes the register contrast - Don't use positive letter-spacing on display text — all large type runs negative or zero; tracked-out display text would contradict the compressed-geometric aesthetic - Don't break the two-surface dark system with intermediate grey values — stick to `{colors.background}`, `{colors.surface}`, and `{colors.surface-elevated}` - Don't reduce the hero wordmark size or add decorative framing — its power is the scale and the edge-to-edge collision with the viewport --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <390px | Single column, hero wordmark wraps or scales down dramatically | | Mobile | 390px | Standard mobile — navigation collapses to icon strip, hero scales | | Tablet | 640px | Two-column card grid begins, nav chips may reduce | | Desktop Small | 1024px | Full nav visible, wider card grid, hero wordmark may still partially clip | | Desktop | 1440px | Standard full desktop — full-bleed wordmark, 3-4 column grid | | Large Desktop | 1920px | Maximum breakpoint — widest content areas, hero at full theatrical scale | ### Touch Targets - Navigation chips: pill containers with `4px 12px` padding — at 15px font, height is approximately 30px. Mobile variants should expand padding to 44px minimum touch height. - CTA buttons: `8px 20px` padding — at 16px font, approximately 32px height. Should expand to 44px on mobile. - Badges and tags: `4px 10px` — compact, appropriate for desktop. Increase padding on touch surfaces. ### Collapsing Strategy - **Navigation**: Pill-chip nav collapses on mobile — likely to hamburger or icon-only treatment. The announcement bar may hide or reduce. - **Hero wordmark**: At 480px base size, the Instrument Serif title extends beyond any viewport — the display is letterform-as-environment at desktop. On mobile it scales proportionally, possibly with a different layout treatment. - **Card grid**: 4-column desktop → 2-column tablet → 1-column mobile. - **Scroll ticker**: Maintains full-width at all breakpoints; scroll speed may adjust to text density. - **Section spacing**: 96px sections → 48px → 24px on mobile — the architectural scale compresses but the rhythm persists. ### Image Behavior - Project card images maintain aspect ratio within their `{rounded.lg}` containers. - The chartreuse hero section background renders without imagery — it is pure color field. - No art direction swaps detected; the same images serve all breakpoints. --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` (#070708) - Primary Text: `{colors.ink}` (#e8e8e9) - Brand Accent: `{colors.primary}` (#d4e840) - Secondary Text: `{colors.ink-muted}` (#9a9a9b) - Border: `{colors.border}` (#1e1e1f) - CTA: `{colors.primary}` on `{colors.on-primary}` text - Focus: `outline: 2px solid {colors.focus-ring}` ### Example Component Prompts - "Build the Instrument hero section: `{colors.background}` full-viewport background. The word INSTRUMENT in Instrument Serif, 480px, weight 400, `line-height: 0.85`, `letter-spacing: -24px`, white (`{colors.ink}`), spanning edge-to-edge with zero padding and no border-radius. Below it, a full-width horizontal scroll ticker in Instrument Sans 21px on the same dark background — white text repeating the agency's tagline with dot separators. No shadows, no decorative elements." - "Design a navigation bar on `{colors.background}`: left cluster of pill-shaped chips (Work, Services, About) in Instrument Sans 15px, `letter-spacing: 0.3px`, `{colors.ink}` text, `{rounded.pill}` radius, `4px 12px` padding, `{colors.surface}` background. Center: announcement text in Instrument Sans 14px uppercase with a `{colors.primary}` arrow link. Right cluster: secondary pill chips (ED&I, Careers, Latest, Contact). Sticky positioning, no bottom border, no shadow." - "Create a project card for a work grid: `{colors.surface}` background, `{rounded.lg}` (24px) border-radius, no shadow, no border. Full-width project image above, with a `0.25s ease` opacity transition on card hover. Below the image: project title in Instrument Sans 36px, weight 400, `{colors.ink}`, `letter-spacing: -0.54px`. Below that: category label in Instrument Sans 12px uppercase, `letter-spacing: 1.32px`, `{colors.ink-muted}`. Padding: 24px bottom only." - "Create a CTA button in `{colors.primary}` fill with `{colors.on-primary}` text in Instrument Sans 16px, weight 400, `{rounded.pill}` radius, `8px 20px` padding. On hover, transition fill to `{colors.text-hover}` (white) maintaining the dark text — 0.25s ease transition. Focus state: `outline: 2px solid {colors.focus-ring}` offset 2px." - "Build a service or tag badge: `{colors.primary-container}` background, `{colors.primary}` text, Instrument Sans 12px uppercase, `letter-spacing: 1.32px`, `{rounded.pill}` radius, `4px 10px` padding. Alternatively a neutral badge: `{colors.surface}` background, `{colors.ink-muted}` text, same typography and shape. Both render as the `tag--pill-shade` pattern." - "Design a hero editorial statement section in `{colors.primary}` (chartreuse background): full-viewport-width block. Inside, a large editorial heading in Instrument Serif 78px, weight 400, `{colors.background}` text (the near-black reverses on the bright field), `line-height: 1.03`, `letter-spacing: -1.56px`. Below: a supporting line in Instrument Sans 21px, `{colors.background}`, `line-height: 1.52`. No shadows, no borders. The chartreuse surface is the design — zero decoration needed." ### Iteration Guide 1. Start with `{colors.background}` — the near-black canvas is the foundation. All decisions flow from this dark field, not from a light default that gets darkened. 2. Deploy `{colors.primary}` once per section group — chartreuse is the system's exclamation mark, not its baseline. One hero block, one CTA cluster, then back to dark. Overuse collapses its urgency. 3. Instrument Serif for any text that needs to feel editorial, considered, or historically weighted. Instrument Sans for everything procedural. The register split is non-negotiable — mixing them at the same size and context blurs the system's argument. 4. Negative tracking is mandatory at display sizes. At 78px use `-1.56px`; at 60px use `-1.8px`; at 44px use `-1.32px`. Tracking normalises to zero below 25px. 5. All interactive chrome is `{rounded.pill}` — buttons, nav chips, badges, tags. Content containers (cards, media) use `{rounded.lg}` (24px). Nothing else in between. 6. Elevation = surface color step only. Move from `{colors.background}` to `{colors.surface}` to `{colors.surface-elevated}` for depth cues. No box-shadows anywhere. 7. Overlines use `text-transform: uppercase` with `letter-spacing: 1.32px` in Instrument Sans 12px. This is the one tracked-out all-caps tier in the system — reserve it for category labels and UI section markers. --- ## 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 Instrument. Brand names and trademarks belong to their respective owners.