---
version: alpha
name: Sophon
description: Apple-system minimalism for an onchain consumer network — Helvetica Neue on a near-black canvas, iOS-grade grays, a single electric blue accent, uppercase mono labels with positive tracking, and full 100px pill geometry. Restraint as confidence.
colors:
  # Canvas + ink
  background: "#000000"
  surface: "#1c1c1e"
  surface-soft: "#2c2c2e"
  ink: "#ffffff"
  ink-secondary: "#8e8e93"

  # Light-mode surfaces (used in inverted sections)
  surface-light: "#ffffff"
  surface-light-soft: "#fafafa"
  surface-tint: "#f5f5f7"
  surface-tint-2: "#f2f2f7"
  ink-inverse: "#1c1c1e"

  # Accent
  primary: "#007aff"      # Apple system blue — the only chromatic note

  # Neutral scale (iOS system grays)
  gray-700: "#1c1c1e"
  gray-600: "#2c2c2e"
  gray-400: "#8e8e93"
  gray-200: "#e5e5ea"
  gray-100: "#eeeeee"
  gray-50: "#f5f5f7"

  # Borders
  border: "#2c2c2e"
  border-light: "#e5e5ea"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#000000"

typography:
  display-hero:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 80px
    fontWeight: 600
    lineHeight: 1.00
    letterSpacing: -2px
  section-heading:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 48px
    fontWeight: 600
    lineHeight: 1.08
    letterSpacing: -1px
  sub-heading:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: -0.5px
  card-title:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.25px
  body-large:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  body:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.47
    letterSpacing: 0px
  body-small:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.38
    letterSpacing: 0px
  button-ui:
    fontFamily: "Helvetica Neue, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0px
  label-mono:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0.72px
  caption-mono:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.20
    letterSpacing: 0.66px
  micro-mono:
    fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
    fontSize: 10px
    fontWeight: 500
    lineHeight: 1.00
    letterSpacing: 0.6px

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

rounded:
  none: 0px
  sm: 6px
  md: 12px
  lg: 20px
  pill: 100px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
  button-primary-hover:
    backgroundColor: "{colors.gray-100}"
    textColor: "{colors.on-ink}"
    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}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px
    borderColor: "{colors.border}"

  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 6px 14px
    borderColor: "{colors.border}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-light:
    backgroundColor: "{colors.surface-light}"
    textColor: "{colors.ink-inverse}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border-light}"

  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}"
    borderColor: "{colors.primary}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 16px 24px
    borderColor: "{colors.border}"

  eyebrow-label:
    textColor: "{colors.ink-secondary}"
    typography: "{typography.label-mono}"
---

# Sophon Design System

## Overview

Sophon presents itself the way a well-built consumer device does — through omission. The canvas is pure black (`{colors.background}`), the type is Helvetica Neue, the gray scale is lifted almost verbatim from Apple's iOS system palette (`{colors.surface}`, `{colors.surface-soft}`, `{colors.ink-secondary}`), and the only chromatic note in the entire system is a single electric system blue (`{colors.primary}`). Nothing is decorated. The confidence comes from how little is on screen.

The typographic voice splits cleanly in two. Headlines and reading copy use Helvetica Neue with tight negative tracking at display sizes — large, plain, and self-assured, the opposite of a logo-heavy crypto landing page. Running alongside it is a monospace register reserved for eyebrow labels, metadata, and technical captions: uppercase, set at 10–12px with deliberate positive letter-spacing (`0.06em`), which gives the interface its "onchain instrumentation" texture without ever shouting. Sans for what you read, mono for what the machine emits.

Geometry is binary: either a hard `0px` corner or a full `{rounded.pill}` (100px) pill. There is no in-between bevel for chrome. Buttons, badges, and tags are all fully rounded capsules; structural surfaces and section dividers are square. This two-state radius logic, combined with hairline `{colors.border}` outlines on near-black surfaces and a signature bottom-fade gradient mask (content dissolving into the canvas via a stacked-alpha wash), is the system's most distinctive move.

**Key Characteristics:**
- Pure black canvas (`{colors.background}`) with iOS-system gray surfaces and white ink
- Helvetica Neue with negative display tracking — plain, large, confident
- Monospace uppercase labels with positive `0.06em` tracking for metadata/eyebrows
- A single accent: Apple system blue (`{colors.primary}`) — chromatic restraint as identity
- Binary radius: hard `0px` corners or full `{rounded.pill}` capsules, nothing between
- Hairline borders (`{colors.border}`) on dark surfaces instead of fills
- Bottom-fade gradient masks dissolving content into the canvas

## Colors

### Canvas & Ink
- **Black** (`{colors.background}`): Primary canvas. The default ground everything sits on.
- **Surface** (`{colors.surface}`): Elevated cards and panels — iOS `systemGray6`-grade near-black.
- **Surface Soft** (`{colors.surface-soft}`): Hover states, nested surfaces.
- **White** (`{colors.ink}`): Headings and primary text on the dark canvas.
- **Ink Secondary** (`{colors.ink-secondary}`): Muted captions, metadata, secondary copy.

### Accent
- **System Blue** (`{colors.primary}`): The only chromatic color — links, focus rings, accent CTAs. Used sparingly.

### Light-Mode Surfaces
- **Surface Light** (`{colors.surface-light}`): Inverted (white) sections.
- **Surface Tint** (`{colors.surface-tint}`) / **Surface Tint 2** (`{colors.surface-tint-2}`): Soft gray panels inside light sections.
- **Ink Inverse** (`{colors.ink-inverse}`): Near-black text on light surfaces.

### Neutral Scale (iOS system grays)
- **Gray 700** (`{colors.gray-700}`): Darkest elevated surface.
- **Gray 600** (`{colors.gray-600}`): Borders, hover surfaces.
- **Gray 400** (`{colors.gray-400}`): Secondary text, placeholders.
- **Gray 200 / 100 / 50** (`{colors.gray-200}` / `{colors.gray-100}` / `{colors.gray-50}`): Light-section dividers and tints.

### Borders
- **Border** (`{colors.border}`): Hairline outlines on dark surfaces.
- **Border Light** (`{colors.border-light}`): Dividers in light sections.

## Typography

### Font Family
- **Primary**: `Helvetica Neue`, with fallbacks: `Helvetica, Arial, sans-serif`
- **Monospace**: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace`

### Hierarchy

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

| Token | Use |
|---|---|
| `display-hero` | 80px hero — large, plain, negative tracking |
| `section-heading` | Section titles |
| `sub-heading` | Sub-sections, large card headings |
| `card-title` | Feature cards |
| `body-large` | Lead paragraphs, feature descriptions |
| `body` | Standard reading text (17px, Apple body size) |
| `body-small` | Fine print, dense UI |
| `button-ui` | Buttons and primary links |
| `label-mono` | Uppercase eyebrow labels, metadata |
| `caption-mono` | Technical captions, tags |
| `micro-mono` | Tiniest mono labels |

### Principles
- **Two registers, strict roles**: Helvetica Neue (sans) for reading and headlines; monospace for labels and metadata. Never cross them.
- **Mono runs uppercase with positive tracking**: `0.06em` letter-spacing on uppercase mono is the instrumentation texture — the "machine voice."
- **Tracking scales with size**: negative tracking tightens display headlines; sans body stays at normal tracking.
- **Weight is reserved**: 400 for reading, 500 for UI and headings, 600 only at the largest display sizes. No heavy bold.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base unit is 8px, with an Apple-style 4px micro-step. Note the jump from `{spacing.xl}` (24px) to `{spacing.2xl}` (40px) — section rhythm skips the mid-range.

### Grid & Container
- Max content width: approximately 1200px, centered
- Hero: single-column, large display headline with a mono eyebrow above
- Feature sections: 2–3 column card grids on the dark canvas
- Inverted (light) sections used as deliberate contrast breaks

### Whitespace Philosophy
- **Black-on-black depth**: Separation comes from hairline `{colors.border}` outlines and tonal shifts between `{colors.background}` and `{colors.surface}`, not shadows.
- **Generous vertical rhythm**: large gaps between sections (`{spacing.3xl}`–`{spacing.4xl}`).
- **Restraint over ornament**: empty space and a single accent carry the design; no gradients except the signature bottom-fade mask.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, sits on `{colors.background}` | Body text, hero |
| Outlined (Level 1) | 1px `{colors.border}` on `{colors.surface}` | Cards, inputs, badges |
| Tonal lift (Level 2) | `{colors.surface-soft}` fill | Hover, nested panels |
| Focus | 2px `{colors.primary}` outline | Keyboard focus on interactive elements |

**Depth Philosophy**: Sophon avoids drop shadows almost entirely. Elevation is communicated tonally — a slightly lighter near-black surface plus a hairline border. On a pure-black canvas this reads as cleanly as shadows do on white. The one atmospheric effect is the bottom-fade gradient: a stacked-alpha mask (`rgba(0,0,0,0)` → `0.72`) that dissolves scrolling content or media into the canvas edge.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Section dividers, full-bleed media, structural edges |
| `sm` | 6px | Small inline elements |
| `md` | 12px | Inputs, small panels |
| `lg` | 20px | Cards |
| `pill` | 100px | All buttons, badges, tags — fully rounded capsules |

The defining geometry is binary: hard `0px` or full `{rounded.pill}`. Interactive chrome is always a capsule; structure is always square.

## Components

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

### Buttons
- **`button-primary`** — White fill, black text, full pill. The default high-contrast CTA on the dark canvas.
- **`button-secondary`** — `{colors.surface}` fill with hairline `{colors.border}`, white text, full pill.
- **`button-accent`** — System blue fill for the rare emphasized action.

### Badges & Labels
- **`badge`** — `{colors.surface}` capsule with mono uppercase text, hairline border.
- **`eyebrow-label`** — Standalone uppercase mono label above headings, `{colors.ink-secondary}`.

### Cards
- **`card`** — `{colors.surface}` on black, hairline border, `{rounded.lg}` radius, no shadow.
- **`card-light`** — Inverted white card for light sections.

### Inputs
- **`input`** — `{colors.surface}` fill, hairline border, `{rounded.md}`. Focus swaps border to `{colors.primary}`.

### Navigation
- **`nav-bar`** — Black header, white text, hairline bottom border. White or accent pill CTA right-aligned.

## Do's and Don'ts

### Do
- Keep the canvas pure black with iOS-system gray surfaces
- Use Helvetica Neue for headlines and reading copy with negative display tracking
- Reserve monospace for uppercase labels and metadata with positive `0.06em` tracking
- Treat `{colors.primary}` as the single accent — use it sparingly
- Use hairline `{colors.border}` outlines for elevation instead of shadows
- Keep geometry binary: hard `0px` or full `{rounded.pill}`
- Lean on whitespace and tonal contrast to structure the page

### Don't
- Don't introduce a second accent color — one blue is the whole palette
- Don't add drop shadows for depth — use tonal surface shifts and hairline borders
- Don't use mid-range corner radii on chrome — capsules or square edges only
- Don't set mono labels in mixed case or without letter-spacing
- Don't use heavy bold weights — 600 is the ceiling, only at display sizes
- Don't decorate — the restraint is the identity

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, reduced hero size, stacked nav |
| Tablet | 600–1024px | 2-column grids, expanded padding |
| Desktop | 1024–1200px | Standard layout |
| Large Desktop | >1200px | Centered, generous side margins |

### Touch Targets
- Pill buttons use comfortable vertical padding (14px+)
- Nav links and CTAs sized for tap on mobile
- Badges retain horizontal padding for tap area

### Collapsing Strategy
- Hero: 80px display → scales down, maintains negative tracking proportionally
- Navigation: horizontal links → hamburger menu
- Feature cards: 3-column → 2-column → single column
- Section spacing compresses on mobile

---

## Agent Prompt Guide

### Quick Color Reference
- Canvas: Black `{colors.background}`
- Surface: `{colors.surface}`
- Heading text: White `{colors.ink}`
- Body/muted text: `{colors.ink-secondary}`
- Border: hairline `{colors.border}`
- Accent / focus: System Blue `{colors.primary}`

### Example Component Prompts
- "Create a hero on pure black. Mono uppercase eyebrow label (12px, letter-spacing 0.72px, `{colors.ink-secondary}`) above an 80px Helvetica Neue weight 600 headline, letter-spacing -2px, white. Body at 20px weight 400, `{colors.ink-secondary}`. White pill CTA (`{colors.ink}` fill, black text, 100px radius, 14px 28px padding)."
- "Design a card: `{colors.surface}` fill, 1px `{colors.border}`, 20px radius, no shadow. Title 24px Helvetica Neue weight 500. Body 17px weight 400 `{colors.ink-secondary}`."
- "Build a badge: `{colors.surface}` capsule, 1px `{colors.border}`, 100px radius, mono uppercase 12px `{colors.ink-secondary}`, letter-spacing 0.72px."
- "Create nav: black header, white 17px weight 500 links, hairline `{colors.border}` bottom border, white pill CTA right-aligned."

### Iteration Guide
1. One accent only — system blue, used sparingly; everything else is grayscale
2. Radius is binary: capsule (`{rounded.pill}`) for chrome, `0px` for structure
3. Mono is always uppercase with positive tracking; sans is for reading
4. Depth = tonal surface shift + hairline border, never a drop shadow
5. White space and pure-black ground do the heavy lifting — resist decoration

---

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