DESIGN.md

name	Obsidian Terminal
colors	surface surface-dim surface-bright surface-container-lowest surface-container-low surface-container surface-container-high surface-container-highest on-surface on-surface-variant inverse-surface inverse-on-surface outline outline-variant surface-tint primary on-primary primary-container on-primary-container inverse-primary secondary on-secondary secondary-container on-secondary-container tertiary on-tertiary tertiary-container on-tertiary-container error on-error error-container on-error-container primary-fixed primary-fixed-dim on-primary-fixed on-primary-fixed-variant secondary-fixed secondary-fixed-dim on-secondary-fixed on-secondary-fixed-variant tertiary-fixed tertiary-fixed-dim on-tertiary-fixed on-tertiary-fixed-variant background on-background surface-variant canvas-black surface-elevated ink-panel border-hairline paper-white grain-mid platinum-top platinum-mid platinum-base success warning #0a0a0a #000000 #2a2a2a #000000 #0d0d0d #111111 #1a1a1a #242424 #f2f2f2 #b3b3b3 #f2f2f2 #111111 #6e6e6e #2e2e2e #d8d8d8 #f5f5f5 #0a0a0a #cfcfcf #2a2a2a #3a3a3a #a8a8a8 #141414 #2a2a2a #d0d0d0 #e8e8e8 #0a0a0a #3d3d3d #f0f0f0 #c4c4c4 #0a0a0a #2a2a2a #e0e0e0 #e8e8e8 #cfcfcf #111111 #3a3a3a #d6d6d6 #a8a8a8 #111111 #3a3a3a #f0f0f0 #c8c8c8 #0a0a0a #2e2e2e #000000 #f2f2f2 #1a1a1a #000000 #111111 #0a0a0a #4a4a50 #f5f5f5 #6e6e6e #2a2a32 #1a1a20 #121216 #d0d0d0 #9a9a9a
typography	display-hero heading-section terminal-body badge-label caption-category monogram-lg fontFamily fontSize fontWeight lineHeight letterSpacing Geist 30px 600 36px -0.025em fontFamily fontSize fontWeight lineHeight letterSpacing Geist Mono 16px 600 24px -0.01em fontFamily fontSize fontWeight lineHeight letterSpacing Geist Mono 14px 400 22px 0em fontFamily fontSize fontWeight lineHeight letterSpacing Geist 12px 600 16px 0em fontFamily fontSize fontWeight lineHeight letterSpacing Geist Mono 11px 400 16px 0.025em fontFamily fontSize fontWeight lineHeight Geist Mono 28px 600 28px
rounded	sm badge DEFAULT md lg xl full 0 0 0.25rem 0.375rem 0.5rem 0.75rem 9999px
spacing	unit badge-gap row-gap caption-gap container-max gutter-md gutter-sm 4px 8px 20px 6px 1000px 24px 16px

Brand & Style

The badge-face lock is noir-planes.jpeg: overlapping sharp planes, platinum-to-black washes, film grain, no outlines. noir-reference.jpeg still locks the page atmosphere. No cyan. No pink. No purple. No brand rainbow.

Personality is calculated and developer-first. Information is silver on black. Badge edges are the meeting of two tones, never a stroke. If a color is not black, white, or gray, it is wrong.

Colors

Canvas is #000000. Elevated panels are #0a0a0a / #111111. Type and glyphs are #f2f2f2 or #cfcfcf. Page cards may keep a hairline. Badges have no border.

• Primary: paper white. Active text, icons, JSON keys.
• Secondary: mid gray. Captions, metadata, deactivated.
• Tertiary: lighter silver used only as a highlight edge, never as a neon fill.
• Error / success / warning: grayscale only. Status is weight and contrast, not hue.

Do not introduce Electric Cyan, Neon Pink, or any chromatic accent. The reference image has none.

Typography

Dual stack, same as before:

• Geist: badge labels and UI words.
• Geist Mono: captions, JSON, section ids, monograms.

Rules:

1. Category captions stay lowercase (languages, stack). On GitHub they are bold body text — <sub> is unreadable.
2. Code / JSON on cards is Geist Mono 14, weight 400, high contrast white on #0a0a0a.
3. When unsure, use Mono.

Layout & Spacing

1000px max, left-aligned badge matrix, 20px between categories, 6px from caption to row. Badges wrap; they do not shrink.

Composition borrowed from the reference:

• Content lives on stacked soft-square cards, slightly overlapping, never a marketing hero.
• Depth is layering and hairlines, not drop shadows.
• Atmosphere on the canvas may include grain, smoke, circuit traces.
• Badge faces carry their own grain. That grain is texture, not atmosphere leaking in.

Elevation & Depth

1. Base #000000. Cards #0a0a0a.
2. Badge face is a flat #141416 square. No left plane. One right wedge at #3a3a42 / 0.12. A diagonal base gradient reads as glass — do not use one.
3. Grain is baked 1×1 specks in muted gray, not white stars. The profile ships dist/h40/*.png, left-aligned, 40px tall.
4. No stroke. No hairline. No drop shadow. No filter. No lift. The outer shape is a 0-radius rectangle and nothing else.

Shapes

Hard rectangle. Square corners. Flat and sharp.

• Badges: 0px. Not 2px. Not a pill. Not a button.
• Cards / JSON panels: 0px if they sit with the badge row; 8px only for stacked terminal cards
• Overlay panes: 12px
• Pills only for a real action control, never for a tech badge

Components

Badges (core)

• Height 40px, width hugs the label. Never clip. Never a huge empty tail.
• Fill: flat #141416 + muted grain + a single right wedge at 12% opacity. No left glare. Profile README uses dist/h40/*.png, left-aligned.
• No stroke. Radius 0. No shadow. The square is the clip, not a box drawn around the face.
• Mark sits on the face, optically centered. Official glyphs 20×20 #cfcfcf. Missing marks use the letter-tile recipe in Missing marks.
• Label Geist 13 / 600, #f2f2f2. Category titles sit in their own paragraph so they breathe above the row.
• AnyDesk and RustDesk remain one chip

JSON / terminal cards

Match the floating documents in the reference: black rectangle, monospace JSON, dog-ear optional, stacked offset. Use only for atmosphere or a single identity card — not behind every badge.

Missing marks

A chip without a Simple Icons / vendor SVG still ships. Never drop a harness because the logo pack is incomplete. Never invent a mascot, bracket, gear, or sparkle to fake a brand.

The missing mark is a letter tile, occupying the same mark slot as an official glyph (22×22 so two letters fit; glyphs stay 20×20):

• Geist Mono, 10/600, #f2f2f2 on a flat #0a0a0c square, radius 0, no outline.
• The tile is an index, not brand art. Do not present it as the vendor's logo.

Letter recipe (deterministic):

1. One token → first two letters (Pi → PI, Crush → CR).
2. Two or more tokens → initial of the first two distinctive words (Grok Build → GB, Open Hands → OH). Skip stopwords.
3. If two tiles on the same sheet would share a pair, take a more distinctive pair from the later name (CUA stays CU only while Cursor already has a glyph).
4. Never more than two letters. Never sit the letters as loose text next to the label (AI must not read as the start of Aider).

Graduation: drop an official SVG at logos/official/{file-id}.svg and rebuild. File presence wins over a missing Simple Icons slug. The tile dies. Do not keep both.

Inputs / buttons

Black field, hairline border. Focus = brighter hairline (#f2f2f2), no cyan ring. Buttons are ghost + mono label.

Hard fail

White iOS pills. Brand-colored logos. Cyan/pink glow. Invented mascots for tools that only have a letter tile. A title like "Refined Languages Badges Row". Extra tools. A landing-page hero that ignores the badge matrix.