---
version: alpha
name: Interfere
description: Dark developer-tooling minimalism — near-black canvas with white ink, Inter for UI, Berkeley/Departure Mono for technical labels, and an editorial Heldane serif for display. Radix-derived blue (#0090ff) as the single workflow accent over an otherwise achromatic, observability-console aesthetic.

colors:
  # Canvas + ink
  background: "#0b0b0b"
  surface: "#111111"
  surface-soft: "#191919"
  surface-raised: "#1f1f1f"
  ink: "#ffffff"
  ink-secondary: "#cccccc"
  ink-muted: "#8a8f98"
  ink-faint: "#5b5f66"

  # Primary workflow accent — Radix blue-9
  primary: "#0090ff"
  primary-hover: "#5eb1ef"
  on-primary: "#0b0b0b"

  # Status / signal accents (telemetry palette)
  signal-cyan: "#00a2c7"
  signal-amber: "#ffc53d"
  signal-yellow: "#ffe629"
  signal-orange: "#ef5f00"
  signal-red: "#ff977d"

  # Borders + hairlines (flattened over the dark canvas)
  border: "#262626"
  border-strong: "#333333"
  divider: "#1e1e1e"

  # On-color
  on-ink: "#0b0b0b"

typography:
  display-serif:
    fontFamily: "HeldaneText, Spectral, Georgia, serif"
    fontSize: 59px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -1.18px
  display-hero:
    fontFamily: "InterVariable, Inter, system-ui, sans-serif"
    fontSize: 56px
    fontWeight: 600
    lineHeight: 1.05
    letterSpacing: -1.12px
  section-heading:
    fontFamily: "InterVariable, Inter, system-ui, sans-serif"
    fontSize: 40px
    fontWeight: 600
    lineHeight: 1.10
    letterSpacing: -0.8px
  sub-heading:
    fontFamily: "InterVariable, Inter, system-ui, sans-serif"
    fontSize: 28px
    fontWeight: 550
    lineHeight: 1.20
    letterSpacing: -0.56px
  card-title:
    fontFamily: "InterVariable, Inter, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 550
    lineHeight: 1.30
    letterSpacing: -0.4px
  body-large:
    fontFamily: "InterVariable, Inter, system-ui, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: -0.18px
  body:
    fontFamily: "InterVariable, Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-medium:
    fontFamily: "InterVariable, Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  body-small:
    fontFamily: "InterVariable, Inter, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  button-ui:
    fontFamily: "InterVariable, Inter, system-ui, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0px
  caption:
    fontFamily: "InterVariable, Inter, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 450
    lineHeight: 1.30
    letterSpacing: 0px
  mono-label:
    fontFamily: "BerkeleyMono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0.65px
  mono-body:
    fontFamily: "BerkeleyMono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  mono-micro:
    fontFamily: "DepartureMono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 1px

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

rounded:
  none: 0px
  xs: 3px
  sm: 5px
  md: 6px
  lg: 10px
  xl: 16px
  2xl: 24px
  pill: 9999px

components:
  # Primary CTA — bright blue on dark
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px

  # Secondary — hairline-bordered ghost on dark
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
    borderColor: "{colors.border-strong}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 18px
    borderColor: "{colors.border-strong}"

  # Mono eyebrow / section label
  badge:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-label}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
    borderColor: "{colors.border}"

  # Status pill — telemetry accent
  badge-signal:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.signal-cyan}"
    typography: "{typography.mono-micro}"
    rounded: "{rounded.pill}"
    padding: 3px 10px
    borderColor: "{colors.border}"

  # Standard card — dark surface, hairline border
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  # Raised / interactive card
  card-raised:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-strong}"

  # Metric / display number card
  card-metric:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.display-hero}"
    rounded: "{rounded.lg}"
    padding: 28px
    borderColor: "{colors.border}"

  # Input
  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.md}"
    padding: 9px 12px
    borderColor: "{colors.border-strong}"
  input-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.md}"
    borderColor: "{colors.primary}"

  # Code block — terminal panel
  code-block:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.mono-body}"
    rounded: "{rounded.lg}"
    padding: 16px
    borderColor: "{colors.border}"

  # Top nav bar
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.button-ui}"
    padding: 14px 24px
    borderColor: "{colors.divider}"
---

# Interfere Design System

## Overview

Interfere sells production visibility — real-time understanding of bugs and issues for teams that ship fast — and its website looks the part: a dark, instrument-panel aesthetic that reads like a well-lit observability console at 2am. The canvas is near-black (`{colors.background}`), text is pure white (`{colors.ink}`), and everything chromed in between is a quiet ladder of dark grays (`{colors.surface}` → `{colors.surface-soft}` → `{colors.surface-raised}`). Depth comes from hairline borders, not shadows — the system separates regions with 1px dividers rather than elevation, the way a terminal or a code editor does.

The typographic system is unusually layered for a developer tool. Three voices coexist: **Inter** (`InterVariable`) carries all UI and reading text with its tight, neutral grotesque; **Berkeley Mono** and **Departure Mono** handle technical labels, code, and the small uppercase eyebrows that mark each section — the "machine voice"; and an editorial serif, **HeldaneText**, appears at display sizes to add warmth and a literary, considered counterpoint to all that monospace. That serif-against-mono tension is the brand's signature move: rigor and craft in the same breath.

Color is functional, never decorative. The single workflow accent is a saturated Radix blue (`{colors.primary}`, blue-9 `#0090ff`) reserved for primary actions and active states. Behind it sits a fuller telemetry palette — cyan, amber, yellow, orange, soft red — drawn from the Radix scales and used the way a dashboard uses status colors: to encode signal (healthy, degraded, error), not to dress up the page. On the dark canvas these accents glow without shouting.

The result is restrained but not cold. The whitespace is generous, the type is precise, and the few bright moments (the blue CTA, a status pill, a serif headline) land hard precisely because the surrounding surface is so disciplined.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with pure-white ink (`{colors.ink}`) — observability-console darkness
- Hairline borders for separation, not shadows — depth via 1px dividers like a code editor
- Three typographic voices: Inter (UI), Berkeley/Departure Mono (technical labels), HeldaneText serif (editorial display)
- Single saturated blue accent (`{colors.primary}`, Radix blue-9) for actions and active states
- A telemetry palette (cyan/amber/yellow/orange/red) used to encode signal, never decoration
- Mono eyebrows / uppercase labels as the recurring "machine voice"
- Tight negative tracking on Inter display sizes; relaxed at body
- A graduated dark-gray surface ladder rather than a single panel color

## Colors

### Canvas & Ink
- **Black Canvas** (`{colors.background}`): Page background. Near-black, not pure — keeps the dark from going flat.
- **Surface** (`{colors.surface}`): Cards, code blocks, inputs — one step up from canvas.
- **Surface Soft** (`{colors.surface-soft}`): Raised panels, eyebrow chips, hover states.
- **Surface Raised** (`{colors.surface-raised}`): Top of the elevation ladder.
- **Ink** (`{colors.ink}`): Primary text, headings.
- **Ink Secondary** (`{colors.ink-secondary}`): Body copy, code text.
- **Ink Muted** (`{colors.ink-muted}`): Captions, secondary labels.
- **Ink Faint** (`{colors.ink-faint}`): Disabled, placeholder.

### Primary Accent
- **Interfere Blue** (`{colors.primary}`): The single workflow accent — primary CTAs, active states, focus. Radix blue-9.
- **Blue Hover** (`{colors.primary-hover}`): Lighter blue-8 for CTA hover.

### Telemetry / Signal
- **Signal Cyan** (`{colors.signal-cyan}`): Info / live status.
- **Signal Amber** (`{colors.signal-amber}`): Caution / pending.
- **Signal Yellow** (`{colors.signal-yellow}`): Highlight / warning.
- **Signal Orange** (`{colors.signal-orange}`): Alert / hot path.
- **Signal Red** (`{colors.signal-red}`): Error / regression.

### Borders & Dividers
- **Border** (`{colors.border}`): Default hairline on cards, inputs, chips.
- **Border Strong** (`{colors.border-strong}`): Interactive borders, ghost buttons, raised cards.
- **Divider** (`{colors.divider}`): Section separators, nav underline.

## Typography

### Font Family
- **Sans / UI**: `InterVariable` (Inter), fallbacks `system-ui, sans-serif`
- **Mono / labels**: `BerkeleyMono` and `DepartureMono`, fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`
- **Serif / display**: `HeldaneText`, fallbacks `Spectral, Georgia, serif`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-serif` | Editorial serif headline — the brand's warm counterpoint |
| `display-hero` | Inter hero headline, tight tracking |
| `section-heading` | Feature section titles |
| `sub-heading` | Sub-sections, large card headings |
| `card-title` | Feature / metric cards |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard reading text |
| `body-medium` | Emphasized inline text, nav |
| `body-small` | UI text, dense copy |
| `button-ui` | Buttons, links |
| `caption` | Metadata, footnotes |
| `mono-label` | Uppercase section eyebrows — the "machine voice" |
| `mono-body` | Code blocks, terminal output |
| `mono-micro` | Tiny status pills, Departure Mono |

### Principles
- **Three voices, strict roles**: Inter reads and operates the UI; Berkeley/Departure Mono speaks the technical/machine register; HeldaneText serif appears only at display sizes for warmth and editorial weight.
- **Mono eyebrows**: Section labels are uppercase mono with positive tracking — the recurring signature that signals "this is a tool for engineers."
- **Tracking scales with size**: Inter display sizes use ~-1.1px negative tracking; body relaxes to near-zero.
- **Weight discipline**: 400 (read), 500/550 (UI/emphasis), 600 (headings). Inter's variable axis enables the 450/550 in-betweens.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with a 4px sub-step. Notable jumps from `{spacing.xl}` (24px) to `{spacing.2xl}` (40px) give sections breathing room.

### Grid & Container
- Max content width ~1200px, centered
- Hero: single-column, generous top padding, serif or Inter headline
- Feature sections: 2–3 column card grids
- Full-width hairline dividers (`1px solid {colors.divider}`) between major sections

### Whitespace Philosophy
- **Console calm**: Generous vertical rhythm (`{spacing.3xl}`–`{spacing.4xl}`) so the dark surface never feels cramped.
- **Separation by line, not shadow**: Regions are bounded by 1px borders the way panels divide a code editor.
- **Accent restraint**: Bright color appears sparingly, so each instance (a CTA, a status pill) carries signal.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | `{colors.background}`, no border | Page background, text blocks |
| Surface (Level 1) | `{colors.surface}` + `1px solid {colors.border}` | Cards, inputs, code blocks |
| Raised (Level 2) | `{colors.surface-soft}` + `1px solid {colors.border-strong}` | Interactive / hover cards, eyebrow chips |
| Top (Level 3) | `{colors.surface-raised}` + `1px solid {colors.border-strong}` | Menus, popovers |
| Focus | `1px solid {colors.primary}` border + subtle blue ring | Keyboard focus, active input |

**Depth Philosophy**: Interfere builds depth almost entirely from a graduated dark-gray surface ladder plus hairline borders — not drop shadows. Each elevation step is one notch lighter than the last, and a 1px border defines its edge. This is the visual grammar of terminals and editors: regions read as nested panels, not floating cards.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Full-bleed sections, dividers |
| `xs` | 3px | Inline code, small chips |
| `sm` | 5px | Eyebrow chips, small buttons |
| `md` | 6px | Buttons, inputs |
| `lg` | 10px | Cards, code blocks |
| `xl` | 16px | Large panels, feature cards |
| `2xl` | 24px | Hero media, large containers |
| `pill` | 9999px | Status pills, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`).

### Buttons
- **`button-primary`** — Bright blue (`{colors.primary}`), near-black text, `{rounded.md}`. The default CTA; the one place vivid color appears.
- **`button-secondary`** — Dark surface with a `{colors.border-strong}` hairline. Ghost action on dark.

### Pills & Labels
- **`badge`** — Mono uppercase eyebrow chip on `{colors.surface-soft}`.
- **`badge-signal`** — Status pill in a telemetry accent (`{colors.signal-cyan}` etc.), Departure Mono micro.

### Cards
- **`card`** — Dark surface, hairline border, no shadow.
- **`card-raised`** — One elevation step up for hover/interactive states.
- **`card-metric`** — Large display number over a description in muted ink.

### Inputs & Code
- **`input`** — Dark surface, `{colors.border-strong}` hairline; focus swaps the border to `{colors.primary}`.
- **`code-block`** — Terminal panel: `{colors.surface}`, mono text in `{colors.ink-secondary}`, hairline border.

### Navigation
- **`nav-bar`** — Dark sticky header, Inter 14px links in `{colors.ink-secondary}`, blue CTA right, bottom hairline divider.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`) with pure-white ink
- Separate regions with 1px hairline borders, not drop shadows
- Use the dark-gray surface ladder for elevation
- Reserve `{colors.primary}` for primary actions and active states
- Use the telemetry palette to encode status, not to decorate
- Set section eyebrows in uppercase mono with positive tracking
- Use HeldaneText serif only at display sizes, as a warm counterpoint
- Apply tight negative tracking to Inter display headlines

### Don't
- Don't lighten the canvas toward gray — the depth ladder needs a near-black floor
- Don't add drop shadows to cards — borders define edges
- Don't spread accent colors across chrome — they're signal, not paint
- Don't set body text in mono — mono is the label/code register only
- Don't use the serif at small sizes
- Don't put positive tracking on Inter body or headlines
- Don't set `{colors.primary}` as a background for large regions — it's an accent

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, tightened padding, hamburger nav |
| Tablet | 600–1024px | 2-column grids appear |
| Desktop | 1024–1280px | Full 2–3 column layout, max content width |
| Large | >1280px | Centered, generous side margins |

### Touch Targets
- Buttons use comfortable vertical padding (9px–10px)
- Nav links at 14px with adequate spacing
- Status pills keep ~10px horizontal padding for legibility

### Collapsing Strategy
- Hero: display sizes scale down, negative tracking held proportionally
- Navigation: horizontal links + CTA → hamburger
- Feature cards: 3-column → 2-column → single column
- Code blocks: maintain mono sizing, allow horizontal scroll
- Section spacing: 64–96px → ~40px on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Black Canvas `{colors.background}`
- Surface: `{colors.surface}` with `1px solid {colors.border}`
- Heading text: White `{colors.ink}`
- Body text: `{colors.ink-secondary}`
- Primary CTA: Interfere Blue `{colors.primary}`, near-black text
- Border / divider: `{colors.border}` / `{colors.divider}`
- Status accent: `{colors.signal-cyan}` (and amber/orange/red for severity)

### Example Component Prompts
- "Create a dark hero on `{colors.background}`. Mono uppercase eyebrow (`{typography.mono-label}`, `{colors.ink-secondary}`). Headline at 56px Inter weight 600, letter-spacing -1.12px, white. Lead paragraph 18px Inter 400 in `{colors.ink-secondary}`. Blue CTA (`{colors.primary}`, near-black text, 6px radius) plus a ghost button (dark surface, `1px solid {colors.border-strong}`)."
- "Design a card: `{colors.surface}` background, `1px solid {colors.border}`, 10px radius, no shadow. Title 20px Inter weight 550 in white; body 16px 400 in `{colors.ink-secondary}`."
- "Build a status pill: `{colors.surface-soft}` background, `{colors.signal-cyan}` text, Departure Mono 10px uppercase, 9999px radius, `1px solid {colors.border}`."
- "Render a code block: `{colors.surface}` panel, Berkeley Mono 14px in `{colors.ink-secondary}`, 10px radius, `1px solid {colors.border}`."

### Iteration Guide
1. Start dark — near-black canvas, white ink, gray surface ladder for depth
2. Edges come from 1px borders, never shadows
3. Blue (`{colors.primary}`) is the only chrome accent; the telemetry palette is for status
4. Three type voices: Inter (UI), mono (labels/code), serif (display only)
5. Mono uppercase eyebrows mark every section — keep the machine voice
6. Tracking tightens as Inter grows; the serif adds the warmth Inter and mono lack

---

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