---
version: alpha
name: OXI Instruments
description: Hardware-instrument dark UI — near-black canvas with an electric cyan-blue accent, clean geometric sans, tactile product photography, and crisp high-contrast white type that reads like a device panel.
colors:
  # Canvas + ink
  background: "#0b0d12"
  surface: "#13161d"
  surface-soft: "#1b1f29"
  ink: "#ffffff"
  ink-secondary: "#aab2c2"
  ink-muted: "#6b7280"

  # Brand accent — electric cyan-blue
  primary: "#1fb6ff"
  primary-deep: "#0a8cd6"
  accent-glow: "#3fd0ff"

  # Support
  border: "#262b36"
  border-soft: "#1d212b"
  on-primary: "#04121b"
  on-ink: "#0b0d12"

  # Status / utility
  success: "#3ddc97"
  warning: "#ffb020"
  danger: "#ff5a5f"

typography:
  display-hero:
    fontFamily: "Space Grotesk, Inter, Arial, sans-serif"
    fontSize: 56px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Space Grotesk, Inter, Arial, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -1px
  sub-heading:
    fontFamily: "Space Grotesk, Inter, Arial, sans-serif"
    fontSize: 28px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Space Grotesk, Inter, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.2px
  body-large:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Space Grotesk, Inter, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: 0.2px
  label-mono:
    fontFamily: "Space Mono, ui-monospace, Menlo, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 1.5px
  caption:
    fontFamily: "Inter, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 6px
  md: 10px
  lg: 16px
  xl: 24px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.accent-glow}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px
    borderColor: "{colors.border}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
  card-product:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border}"
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    borderColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 18px 32px
    borderColor: "{colors.border-soft}"
---

# OXI Instruments Design System

## Overview

OXI Instruments builds tactile electronic-music hardware — sequencers, controllers, and Eurorack modules like the OXI One and Coral. Its website mirrors that world: a near-black canvas (`{colors.background}`) that lets backlit product photography glow, punctuated by a single electric cyan-blue accent (`{colors.primary}`) that behaves like an illuminated control on a device panel. The page reads like the front of a synthesizer — dark, precise, and engineered for legibility under contrast.

The type system pairs a geometric, slightly technical display sans (Space Grotesk) for headlines and UI with a neutral humanist sans (Inter) for reading copy, plus a wide-tracked monospace for small uppercase labels that echo silkscreen panel legends. Headlines run tight and bold with negative tracking; body copy stays calm and readable in soft off-white (`{colors.ink-secondary}`) so the bright white (`{colors.ink}`) is reserved for the most important lines.

Depth comes from layered dark surfaces rather than heavy shadows: `{colors.surface}` and `{colors.surface-soft}` stack subtly over the canvas, separated by hairline borders (`{colors.border}`). The cyan accent appears sparingly — on primary CTAs, active states, focus rings, and the occasional glowing highlight on hardware imagery — so it always reads as "live" or "powered on" rather than decorative.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) that frames glowing hardware photography
- Single electric cyan-blue accent (`{colors.primary}`) used like an illuminated control
- Space Grotesk for display/UI, Inter for body, Space Mono for uppercase panel labels
- High-contrast white headlines (`{colors.ink}`) over soft off-white body (`{colors.ink-secondary}`)
- Layered dark surfaces with hairline borders instead of heavy shadows
- Pill-shaped CTAs; rounded product cards with generous padding
- Wide-tracked monospace micro-labels echoing device silkscreen

## Colors

### Canvas & Ink
- **Canvas Black** (`{colors.background}`): Page background — near-black with a faint blue cast.
- **Surface** (`{colors.surface}`): Cards, nav, raised panels.
- **Surface Soft** (`{colors.surface-soft}`): Product cards, nested panels.
- **Ink White** (`{colors.ink}`): Headlines and primary emphasis.
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy and descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Captions, disabled, fine print.

### Accent
- **Electric Cyan** (`{colors.primary}`): CTAs, links, active and focus states.
- **Deep Cyan** (`{colors.primary-deep}`): Pressed/hover-darken, gradients.
- **Accent Glow** (`{colors.accent-glow}`): Hover brighten, highlight glints on hardware.

### Support & Status
- **Border** (`{colors.border}`): Hairline separators and card outlines.
- **Border Soft** (`{colors.border-soft}`): Subtle nav/section dividers.
- **On Primary** (`{colors.on-primary}`): Near-black text on cyan fills.
- **Success** (`{colors.success}`), **Warning** (`{colors.warning}`), **Danger** (`{colors.danger}`): Utility states.

## Typography

### Font Family
- **Display / UI**: `Space Grotesk`, fallbacks `Inter, Arial, sans-serif`
- **Body**: `Inter`, fallbacks `Arial, sans-serif`
- **Mono labels**: `Space Mono`, fallbacks `ui-monospace, Menlo, monospace`

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 56px hero headline, tight tracking |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections |
| `card-title` | Product/feature cards |
| `body-large` | Lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Secondary copy |
| `button-ui` | Buttons and nav links |
| `label-mono` | Uppercase tracked micro-labels |
| `caption` | Metadata, fine print |

### Principles
- **Two-sans pairing**: geometric Space Grotesk announces, humanist Inter reads.
- **White is precious**: reserve `{colors.ink}` for headlines and key lines; default body to `{colors.ink-secondary}`.
- **Tight headlines, calm body**: negative tracking on display sizes, neutral tracking on copy.
- **Mono as panel legend**: wide-tracked uppercase Space Mono for small labels and tags.

## Layout

### Spacing System
The full scale lives in the `spacing:` block above. Base unit is 8px, jumping to large `{spacing.2xl}`–`{spacing.4xl}` gaps between sections for an airy, gallery-like rhythm around product imagery.

### Grid & Container
- Max content width ~1200px, centered.
- Hero: single column with a large product render and a short tight headline.
- Feature/product sections: 2–3 column rounded cards over dark surfaces.
- Hairline `{colors.border}` separators instead of filled dividers.

### Whitespace Philosophy
- Dark negative space frames glowing hardware shots.
- Generous vertical breathing room between sections.
- The cyan accent is rationed so it always signals "live".

## Components

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

### Buttons
- **`button-primary`** — electric cyan pill with near-black text; the default CTA.
- **`button-secondary`** — dark surface pill with hairline border and white text.

### Cards
- **`card`** — surface panel, `{rounded.lg}`, hairline border.
- **`card-product`** — softer surface, `{rounded.xl}`, larger padding for hero product tiles.

### Inputs
- **`input`** — dark surface, hairline border; focus switches border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — canvas-black sticky header, white links, cyan CTA right-aligned, soft bottom border.

### Pills & Badges
- **`badge`** — dark pill with cyan mono label, used for tags and status chips.

## Do's and Don'ts

### Do
- Keep the canvas near-black and let product photography glow.
- Use cyan (`{colors.primary}`) only for live/interactive states.
- Default body copy to `{colors.ink-secondary}`; reserve pure white for headlines.
- Separate dark surfaces with hairline borders, not heavy shadows.
- Use pill CTAs and wide-tracked mono micro-labels.

### Don't
- Don't scatter the cyan accent decoratively — it reads as "powered on".
- Don't put light surfaces or warm colors into the chrome.
- Don't run long paragraphs in pure white — too harsh on black.
- Don't rely on drop shadows for depth; layer surfaces instead.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, stacked cards, reduced section gaps |
| Tablet | 600–1024px | 2-column grids, expanded padding |
| Desktop | 1024–1200px | Full multi-column layout |
| Large | >1200px | Centered, generous margins |

### Collapsing Strategy
- Hero headline scales down while keeping negative tracking.
- Nav links collapse to a hamburger; cyan CTA persists.
- Product cards: 3-column → 2-column → single column.
- Section spacing compresses from `{spacing.3xl}` to `{spacing.xl}` on mobile.

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: `{colors.background}`
- Headline text: `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Primary CTA: `{colors.primary}` fill, `{colors.on-primary}` text
- Border: `{colors.border}`
- Focus ring: `{colors.primary}`

### Example Component Prompts
- "Hero on near-black `{colors.background}`. Headline 56px Space Grotesk weight 700, letter-spacing -1.5px, color `{colors.ink}`. Subtitle 18px Inter, color `{colors.ink-secondary}`. Cyan pill CTA (`{colors.primary}` fill, `{colors.on-primary}` text, 9999px radius, 14px 28px padding)."
- "Product card: `{colors.surface-soft}` background, `{rounded.xl}` radius, 32px padding, 1px `{colors.border}` outline. Title 20px Space Grotesk weight 600 in `{colors.ink}`. Body 16px Inter in `{colors.ink-secondary}`. Small uppercase Space Mono label tracked 1.5px in `{colors.primary}`."
- "Dark input: `{colors.surface}` background, `{rounded.md}` radius, 1px `{colors.border}`; on focus switch border to `{colors.primary}`."

---

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