internal · design system

Anthracode /system

Reference for tokens, type, and primitives. Visual QA target — if something breaks here, it breaks on the marketing site.

type

The quick brown fox jumps over

display / fraunces · variable · opsz 144

display 5xlThe terminal remembers.

display 3xlThe terminal remembers.

display 2xlThe terminal remembers.

display lgThe terminal remembers.

mono baseThe terminal remembers.

mono smThe terminal remembers.

mono xsThe terminal remembers.

color

anthracite

#121110

anthracite-2

#1a1917

cream

#faf7f2

cream-2

#f1ede5

amber

#e0954a

amber-deep

#b86d28

amber-glow

#f3b878

ink-soft

#5a5650

buttons

badges

neutralaccentoutline

cards

memory

The agent remembers your preferences, project facts, and past decisions — written to disk, never to a vendor cloud.

tasks

Long jobs broken into a task list, with status that survives interruption. Pick up where the agent left off.

code

~/terminal

npm i -g anthracode-ai

~/anthracode.config.ts

export default {
  memory: { enabled: true, dir: ".anthracode/memory" },
  tasks:  { enabled: true },
  model:  "claude-opus-4-7",
}

faq

Working notes about the design system. Aimed at contributors — what's a primitive, what's a one-off, and what's deprecated.

What lives in /system vs in a feature page?
Anything reused on two or more pages — buttons, cards, code blocks, badges, rules, type scale. One-off compositions stay in the page that owns them. If a one-off gets reused, promote it.
Why mono for body text?
It signals the terminal-first identity, makes alignment trivial across long lists, and keeps the design honest about character widths. Serif (Fraunces) is reserved for display headings and prose pages like docs and changelog.
How are colors managed?
All semantic tokens are HSL custom properties on :root and [data-theme="light"]. Tailwind v4 @theme exposes the raw palette; pages reference --fg, --bg, --accent, --rule etc. so dark/light/system mode flip in one place.
Can I add a new primitive?
Yes, but justify it. New components need: two real consumers, no overlap with an existing primitive, and a row in /system. Drop a PR with screenshots.
What about animations?
Sparingly. Hover transitions ≤ 300ms, entrance animations only on hero. All motion respects prefers-reduced-motion via globals.css — never hard-code durations longer than 400ms without checking with the reduced-motion class.