Skip to content

$ man style — Docs · Design

Style guide

The terminal/IDE aesthetic in one page — tokens, eyebrows, and the components you should reach for before inventing your own.

Color tokens

  • accent #d97757
    Primary coral — CTAs, focus rings, headings.
  • accent-2 #edaf73
    Amber highlight — eyebrows, hover states.
  • bg #0f0e0b
    Base background.
  • panel #17160f
    Panel surface.
  • hairline rgba(255,255,255,0.08)
    Borders & dividers (border-hairline utility).
  • success #5bc97a
    Confirmations, published states.
  • danger #e06c5f
    Errors, destructive actions.

Shell-command eyebrows

Use <Eyebrow command="…"> above every page header. The prefix is fixed by semantic — do not invent new commands.

  • $ whoamiIdentity / about pages.
  • $ manDocs, reference, legal pages.
  • $ lsListings — categories, featured, blog, authors.
  • $ catSingle-article pages.
  • $ mailContact surfaces.
  • $ git logChangelog.
  • $ tail -fLive / polled feeds.

Terminal window

example.sh
readonly

// Wrap any content-dense surface in <TerminalWindow>.

Voice

  • Short sentences. Shell-command cadence.
  • No emojis in UI copy — icon components carry the visual weight.
  • Use SITE.name instead of hard-coded ClaudeSkill in JSX.
  • Mono font for paths, code, and eyebrows. Sans for everything else.