---
version: alpha
name: Yinger
description: Terminal-grade engineering minimalism — a near-black canvas, monospace numerals and HUD readouts (FPS, viewport dimensions, local time), ASCII rule separators, and a restrained off-white ink with a single cool accent. The portfolio of a UI engineer rendered as a living instrument panel.

colors:
  # Canvas + ink
  background: "#0a0a0a"
  surface: "#0a0a0a"
  surface-soft: "#141414"
  surface-raised: "#1a1a1a"
  ink: "#ededed"
  ink-secondary: "#a1a1a1"
  ink-muted: "#6e6e6e"
  ink-faint: "#454545"

  # Accent — used sparingly for links, pointers, live data
  primary: "#5b8cff"
  accent-glyph: "#8aa9ff"

  # Borders / rules
  border: "#262626"
  border-soft: "#1f1f1f"
  rule: "#333333"

  # On-color
  on-primary: "#0a0a0a"
  on-ink: "#0a0a0a"

  # State
  link-hover: "#ffffff"
  selection-bg: "#5b8cff"
  selection-text: "#0a0a0a"

typography:
  display-hero:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.10
    letterSpacing: -1px
  section-heading:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.25
    letterSpacing: -0.5px
  card-title:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1.33
    letterSpacing: -0.2px
  body:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-small:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.50
    letterSpacing: 0px
  label-mono:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0.5px
  hud-readout:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.20
    letterSpacing: 0px
  caption:
    fontFamily: "JetBrains Mono, ui-monospace, monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.30
    letterSpacing: 0.3px

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

rounded:
  none: 0px
  micro: 2px
  xs: 3px
  sm: 4px
  md: 6px
  pill: 9999px

components:
  # Primary action — inverted chip
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.sm}"
    padding: 8px 16px

  # Ghost / outlined action
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.sm}"
    padding: 8px 16px
    borderColor: "{colors.border}"

  # Inline text link
  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"

  # Live HUD readout chip (FPS, dimensions, local time)
  hud-chip:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.hud-readout}"
    rounded: "{rounded.xs}"
    padding: 4px 8px
    borderColor: "{colors.border-soft}"

  # Project / list row
  card:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 16px
    borderColor: "{colors.border}"

  # Meta label
  label:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-muted}"
    typography: "{typography.label-mono}"

  # Divider rule (ASCII-style)
  divider:
    backgroundColor: "{colors.rule}"
    height: 1px

  # Top nav
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.label-mono}"
    padding: 16px 24px
    borderColor: "{colors.border-soft}"
---

# Yinger Design System

## Overview

Yinger is the portfolio of a UI engineer, and it reads like one — a near-black canvas (`{colors.background}`) where the entire interface is rendered in monospace, as if the page itself were a terminal that happened to gain typographic taste. There is no marketing chrome, no gradient hero, no soft photography. Instead the page presents itself as a living instrument panel: a header line, ASCII rule separators, and live HUD readouts that tick in real time — frames per second, the viewport's pixel dimensions, and the author's local time in Fort Collins, Colorado.

The defining move is the fusion of resume content with instrumentation. Numerals are monospace and constantly in motion, scrolling like an odometer or a performance overlay. This converts a static portfolio into something that feels measured and alive — the work of someone who thinks about render loops and frame budgets. The aesthetic borrows from developer tooling (the FPS meter, the dimension readout) and from the typewriter discipline of fixed-width type, but applies it with restraint rather than noise.

Color is almost entirely absent by design. The palette runs from `{colors.background}` to an off-white ink (`{colors.ink}`) through a tight ramp of grays, with a single cool blue accent (`{colors.primary}`) reserved for links, pointer glyphs (`☞`, `↳`), and live data. Nothing competes. The monospace grid does the structuring; spacing and 1px rules do the dividing. The result is engineering minimalism — quieter and darker than Vercel's white gallery, but built on the same principle that every token must justify its presence.

**Key Characteristics:**
- Near-black canvas (`{colors.background}`) with off-white ink (`{colors.ink}`) — dark, monochrome by default
- Monospace everywhere (JetBrains Mono) — type as instrument, not decoration
- Live HUD readouts: scrolling FPS counter, viewport dimensions, local time
- ASCII-style rule separators (`═══`) and pointer glyphs (`☞`, `↳`, `°`, `×`)
- Single cool-blue accent (`{colors.primary}`) for links and live data only
- Tight gray ramp from `{colors.ink}` to `{colors.background}` — no chromatic chrome
- Small radii (≤6px) — engineered corners, not soft cards
- Generous vertical whitespace structured by a fixed-width grid

## Colors

### Canvas & Ink
- **Canvas Black** (`{colors.background}`): Page background, near-black with a faint warmth over true black.
- **Soft Surface** (`{colors.surface-soft}`): Slightly raised rows, HUD chips, project cards.
- **Raised Surface** (`{colors.surface-raised}`): Hover / active surface lift.
- **Ink** (`{colors.ink}`): Primary text, headings — off-white, never pure white in body.
- **Ink Secondary** (`{colors.ink-secondary}`): Secondary copy, readout values.
- **Ink Muted** (`{colors.ink-muted}`): Labels, captions, de-emphasized meta.
- **Ink Faint** (`{colors.ink-faint}`): Disabled / placeholder glyphs.

### Accent
- **Accent Blue** (`{colors.primary}`): Links, pointer glyphs, live data — the only saturated color.
- **Accent Glyph** (`{colors.accent-glyph}`): Lighter accent tint for hover on accented glyphs.

### Borders & Rules
- **Border** (`{colors.border}`): Card and row outlines.
- **Border Soft** (`{colors.border-soft}`): Subtle dividers, nav underline.
- **Rule** (`{colors.rule}`): ASCII-style horizontal separators.

### State
- **Link Hover** (`{colors.link-hover}`): Links brighten to pure white on hover.
- **Selection** (`{colors.selection-bg}` / `{colors.selection-text}`): Accent-blue text selection.

## Typography

### Font Family
- **Primary**: `JetBrains Mono`, with fallbacks: `ui-monospace, SFMono-Regular, Menlo, monospace`
- The entire system is monospace — there is no sans companion. Fixed-width is the identity.
- Tabular numerals are essential: the scrolling HUD readouts depend on every digit occupying identical width.

### 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` | Name / title line — the largest mark on the page |
| `section-heading` | Section titles |
| `card-title` | Project / list-item titles |
| `body` | Standard reading text |
| `body-small` | Secondary descriptions |
| `label-mono` | Uppercase-ish labels, nav, buttons |
| `hud-readout` | Live FPS / dimension / time readouts |
| `caption` | Footnotes, fine meta |

### Principles
- **Monospace as discipline**: every character occupies one cell; alignment is structural, not decorative.
- **Numerals as instrument**: HUD digits scroll/tick — type is treated as a live display, not static text.
- **Negative tracking at display**: the title line tightens (-1px) so the largest mark reads as a unit, not spaced letters.
- **Restraint in weight**: 400 for reading, 500 for headings and labels. No bold.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px on a monospace character grid; vertical whitespace is generous (`{spacing.3xl}`–`{spacing.4xl}` between major blocks).

### Grid & Container
- Single narrow centered column (~640–760px) — reading-width, not full-bleed.
- HUD readouts pinned to corners / header as a persistent instrument frame.
- ASCII rules (`{colors.rule}`, 1px) separate sections in place of cards.

### Whitespace Philosophy
- **Terminal calm**: the dark canvas plus fixed-width type creates a quiet, focused reading field.
- **Rules over boxes**: separation comes from horizontal rules and spacing, not heavy containers.
- **Live frame**: the corners are reserved for instrumentation, keeping the center column purely for content.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No border, canvas only | Page background, prose |
| Rule (Level 1) | 1px `{colors.rule}` | ASCII-style section dividers |
| Surface (Level 2) | `{colors.surface-soft}` + 1px `{colors.border}` | Rows, HUD chips, project cards |
| Raised (Level 3) | `{colors.surface-raised}` | Hover / active lift |

**Depth Philosophy**: there are no drop shadows — depth is signaled by a one-step surface lift and a 1px border, never by blur. Consistent with the terminal metaphor, the interface stays flat and legible at every level.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Rules, full-width dividers |
| `micro` | 2px | Inline code, tiny chips |
| `xs` | 3px | HUD chips |
| `sm` | 4px | Buttons |
| `md` | 6px | Cards, rows |
| `pill` | 9999px | Rare status dots |

## Components

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

### Buttons
- **`button-primary`** — Inverted: `{colors.ink}` fill, `{colors.on-ink}` text, small radius, monospace label.
- **`button-ghost`** — Canvas fill with `{colors.border}` outline.

### Live Instrumentation
- **`hud-chip`** — The signature element. Soft surface, `{colors.ink-secondary}` monospace readout for FPS, viewport dimensions, and local time. Numerals scroll in real time.

### Links
- **`link`** — `{colors.primary}` text; brightens to `{colors.link-hover}` (white) on hover. Often paired with a pointer glyph (`☞`, `↳`).

### Cards & Rules
- **`card`** — Project/list row on `{colors.surface-soft}` with a 1px `{colors.border}`, 6px radius.
- **`divider`** — 1px `{colors.rule}` line, used as an ASCII-style separator between sections.

### Navigation
- **`nav-bar`** — Minimal header on the canvas; monospace labels; soft 1px underline.

## Do's and Don'ts

### Do
- Keep everything monospace (JetBrains Mono) — fixed-width is the identity
- Use tabular numerals so HUD readouts align as they tick
- Reserve `{colors.primary}` for links, pointer glyphs, and live data only
- Use 1px rules and spacing for separation instead of heavy cards or shadows
- Keep the canvas dark (`{colors.background}`) and ink off-white (`{colors.ink}`), never pure white body
- Use pointer glyphs (`☞`, `↳`) as functional wayfinding marks

### Don't
- Don't introduce a sans-serif companion — the system is mono-only
- Don't add drop shadows; depth is a one-step surface lift plus 1px border
- Don't use pure white (`#ffffff`) for body text — it's reserved for link hover
- Don't add multiple accent colors; one cool blue is the whole chroma budget
- Don't use large radii — corners stay ≤6px, engineered not soft
- Don't decorate the HUD readouts with color; they read in `{colors.ink-secondary}`

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, HUD readouts collapse to a footer strip |
| Tablet | 600–1024px | Reading column with corner HUD restored |
| Desktop | >1024px | Full instrument frame — corner readouts pinned around centered column |

### Touch Targets
- Links and buttons keep ≥8px vertical padding for comfortable taps
- HUD chips are display-only (non-interactive)

### Collapsing Strategy
- Corner HUD readouts → stacked footer strip on mobile
- Display title scales down but keeps negative tracking
- ASCII rules span full content width at all sizes

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Canvas Black `{colors.background}`
- Body text: Ink `{colors.ink}` / secondary `{colors.ink-secondary}`
- Accent (links, live data): Accent Blue `{colors.primary}`
- Borders: `{colors.border}`; rules: `{colors.rule}`
- Link hover: white `{colors.link-hover}`

### Example Component Prompts
- "Create a header on `{colors.background}`: name in JetBrains Mono 40px weight 500, letter-spacing -1px, color `{colors.ink}`, with a `☞` pointer glyph in `{colors.primary}`. Below it, three corner HUD chips (`{colors.surface-soft}`, 1px `{colors.border}`, 12px mono `{colors.ink-secondary}`) reading FPS, viewport dimensions, and local time with tabular scrolling numerals."
- "Build a project row: `{colors.surface-soft}` card, 6px radius, 1px `{colors.border}`, 16px padding. Title 18px JetBrains Mono weight 500 `{colors.ink}`; description 13px weight 400 `{colors.ink-secondary}`; a `↳` link in `{colors.primary}` that brightens to white on hover."
- "Add an ASCII-style section divider: a 1px `{colors.rule}` full-width line between sections, no shadow."

### Iteration Guide
1. Everything is JetBrains Mono — never reach for a sans-serif
2. Numerals must be tabular so live readouts align as they update
3. One accent only: `{colors.primary}` for links, glyphs, and live data
4. Separate with 1px rules and whitespace, not shadows or boxes
5. Off-white ink on near-black canvas; pure white is reserved for hover
6. Keep radii small (≤6px) — the corners are engineered, not soft

---

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