1. Vibe

Dark, legible, structurally asymmetric, unapologetically chromed. Body text sits in warm sunflower amber on pure black; chrome — labels, bars, pills — wears butterscotch with heavy tracking. Shapes are rectangular with one-corner bends: asymmetric 32–40px elbows where a panel meets a bar, half-pill rounding on sidebar tabs, 3px left-accent rules on cards. Hierarchy comes from color role and surface stepping, not drop shadows. Motion is deliberate and sparse.

Direct visual inspiration: Michael Okuda's LCARS (Star Trek: The Next Generation, 1987). Unofficial — not affiliated with or endorsed by Paramount Pictures or CBS Studios. See §10 of the spec for the full posture.

2. Palette

Four accent colors, each with exactly one job. Values here are loaded directly from tokens.json at build time — if a swatch looks wrong, the source drifted.

Token	Value	Role
`color.sunflower`	`#ffcc99`	Primary text and titles. Never decorative.
`color.sunflower-muted`	`#d9ad82`	Pre-composited sunflower × 0.85 over black. Solid background for inactive sidebar items so black text holds 10.25:1 WCAG AAA regardless of backdrop.
`color.butterscotch`	`#dd9944`	Chrome: top bar, sidebar elbows, ALL-CAPS labels, dividers. Never body text.
`color.butterscotch-muted`	`#6a4a20`	Muted chrome for inactive mobile pill-bar items. Carries sunflower foreground at AA.
`color.ice`	`#99ccff`	Data and code: model names, inline code, quantitative highlights. Decorative use forbidden.
`color.violet`	`#cc99cc`	Thinking / processing state: streaming indicators, semantic-analysis running, copy-to-MD action.
`color.peach`	`#ff9933`	Cost and error accent: cost bars, error banners, CLI-Direct badge. Attention, not alarm.
`color.bg`	`#000000`	Root frame background. Pure black.
`color.bg-1`	`#07070a`	Card and panel surface. One step above root.
`color.bg-2`	`#0d0d12`	Card hover surface. One step above bg-1.
`color.text`	`#ffcc99`	Alias for sunflower when used as a text color. Same value, semantic role differs.
`color.dim`	`#665544`	Reserved for inert placeholder glyphs (em-dashes, "—", missing values). Not for functional text — fails WCAG AA for body.
`color.divider`	`rgba(221, 153, 68, 0.18)`	rgba(221, 153, 68, 0.18). Panel and card borders. Inherits from butterscotch at low alpha.

3. Typography

Three families, each with one role. Never cross roles. All three are SIL OFL-licensed.

font.family.chrome

CHAT ARCHAEOLOGIST

Antonio, Oswald, Impact, sans-serif

font.family.prose

The session surfaced a bug in the parser.

IBM Plex Sans, Segoe UI, system-ui, sans-serif

font.family.mono

claude-opus-4-7 · 2026-04-21 14:05

JetBrains Mono, Consolas, Menlo, monospace

4. Shapes

The signature LCARS elbow: asymmetric, rounded on exactly one corner. Never four-corner-equal. Elbow radii: 32px at mobile, 40px at desktop. The half-pill (0 14px 14px 0) is the sidebar-item shape.

elbow top-left · 40px 0 0 0

elbow bottom-left · 0 0 0 40px

half-pill · 0 18px 18px 0

card with left accent · 8px + 3px ice rule

5. Components

Each example below is real markup using real classes from styles.css. Copy the HTML, set the instance-local --source-color or --mode-color if noted, and it renders identically in any project that imports the stylesheet.

Source pill

<button class="lcars-source-pill lcars-source-pill--active"
        style="--source-color: var(--lcars-ice)">
  <span class="lcars-source-pill__badge">CC</span>
  <span class="lcars-source-pill__label">CLAUDE CODE</span>
  <span class="lcars-source-pill__count">247</span>
</button>

Set --source-color inline per instance. Active state swaps fill + fg to the source color; inactive keeps 12% alpha on the surface.

Top bar

CHAT ARCHAEOLOGIST

border-radius: 0 16px 16px 0 — rounded only on the right end, squared off to meet the sidebar's top elbow.

Session card

chat-arch 14:05

Refactor the exporter cloud-mapping

Pulled the cloud-mapping logic into a shared package so the viewer can reuse it without crossing exporter boundaries.

3px left accent rule in --source-color; hover adds a 5% sunflower tint and translateY(-1px). Never a drop shadow.

Sidebar tab

border-radius: 0 18px 18px 0 — half-pill, rounded away from the sidebar. Active tab paints in its --mode-color; inactive uses sunflower-muted so black text stays 10.25:1 regardless of backdrop.

Mid bar

BROWSE / COMMAND

Solid butterscotch strip with black label type. 10–13px radius. Acts as a horizontal separator that still reads as chrome.

Source pill — grouped

When a group of pills carries counts, the sum lives on an ALL pill that uses --source-color: sunflower. A tabular-num count with a 1px-currentColor divider tail.

Semantic chip

State carried by border + foreground color, not by surface fill. Five states in source: --cta, --running (violet, animated), --ready (ice), --error (peach), --stale (butterscotch).

Info popover

Click does nothing — this is a specimen.

Sunflower outline on a dark circle. The only in-system use of a drop shadow is the panel it opens — because the panel floats above the frame.

Rescan banner — ok

Status is a 4px left-border accent (--ok → ice, --error → peach, --demo → butterscotch) — never by tinting the whole surface.

Every pattern above is quoted from real markup in styles.css. The spec (§6) lists a few more variants with exact source-file line references.

6. Motion

styles.css defines 17 @keyframes in total; two archetypes carry the system's voice. All decorative motion disables under prefers-reduced-motion: reduce; essential state transitions stay at full speed.

lcars-boot-online

One-time cascade (top-bar → sidebar → panels → mode area) over 1400ms — the system's first-paint "coming online" animation.

focus-ring

Focus is a 3px inset ring box-shadow — a CSS treatment, not a keyframe animation. Hover on cards lifts 1px with a 120ms transition.

BOOT CASCADE

UPPER PANEL

FILTER BAR

MODE AREA

7. What not to do

Don't define tokens on :root. Use .lcars-root so the theme is opt-in.
Don't add drop shadows. Floating popovers are the one exception.
Don't introduce a fourth font. Antonio / IBM Plex Sans / JetBrains Mono.
Don't soften the asymmetric radii into four-corner-equal corners.
Don't use #665544 for body text. It fails AA.
Don't cross type roles. Chrome, prose, mono each own a family.
Don't tint color.divider. It's already a low-alpha butterscotch.

8. Port recipes

Plain CSS

<link rel="stylesheet" href="/path/to/chat-arch-viewer/style.css" />
<div class="lcars-root">
  <header class="lcars-top-bar">...</header>
</div>

Tailwind v4 `@theme`

@import "tailwindcss";

@theme {
  --color-sunflower: #ffcc99;
  --color-butterscotch: #dd9944;
  --color-ice: #99ccff;
  --color-violet: #cc99cc;
  --color-peach: #ff9933;
  --color-bg: #000000;
  --color-bg-1: #07070a;

  --font-chrome: 'Antonio', 'Oswald', 'Impact', sans-serif;
  --font-prose: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', 'Menlo', monospace;

  --radius-elbow: 32px;
  --radius-pill: 14px;
}

CSS-in-JS

export const theme = {
  colors: {
    sunflower: '#ffcc99',
    butterscotch: '#dd9944',
    ice: '#99ccff',
    violet: '#cc99cc',
    peach: '#ff9933',
    bg: '#000000',
    bg1: '#07070a',
  },
  fonts: {
    chrome: "'Antonio', 'Oswald', 'Impact', sans-serif",
    prose: "'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif",
    mono: "'JetBrains Mono', 'Consolas', 'Menlo', monospace",
  },
  radii: { elbow: '32px', pill: '14px' },
};

9. Replicate this

Drop this into your project's CLAUDE.md:

Visual style reference: https://chat-arch.dev/design-system/
Machine-readable tokens: https://chat-arch.dev/design-system/tokens.json
LLM discovery: https://chat-arch.dev/llms.txt

Then run this prompt verbatim:

Read https://chat-arch.dev/llms.txt and the linked spec.md in full before writing any code. Apply the Supergraphic Panel design system to this project — pay special attention to the .lcars-root wrapping rule, the instance-local --source-color / --mode-color pattern, and the asymmetric elbow radii, which agents often miss. Start with a single landing page containing a hero, a three-card feature grid, and a footer. Use the palette, typography, and component patterns from the spec verbatim.

Direct links to canonical sources: spec.md · tokens.json · llms.txt · GitHub source