// The Ghost · design system
Editorial.
Punk.
Surgical.
Voice. Pipeline. Reach.
Every surface The Ghost ships from. White ground, ink type, magenta or cyan as the single weapon. No gradients. No emoji. No em-dashes. Pick a surface and open it.
UI Kits — production surfaces
Long-form & print
Foundations — tokens & rules
Tokens
Colors · primary
Magenta, cyan, ink, paper, amber, pink.
TokensColors · usage
Where each colour is allowed to live.
TokensColors · rules
Hard bans. Pairings. White is the ground.
TypeDisplay serif
Fraunces 900 · editorial opinion.
TypeHammer caps
Archivo Black · ALL-CAPS punch.
TypeBody & mono
Syne body · IBM Plex Mono labels.
TypePairing example
Display + body together, in voice.
LayoutSpacing scale
4px base · opinionated jumps to 128.
LayoutBorders & radii
Hairline · bold · brutal. Flat punk.
LayoutOffset shadows
No drop shadows. Block shadows only.
ComponentsButtons
Primary, secondary, link. Invert on hover.
ComponentsInputs
2px radius · ink rule · no SaaS softness.
ComponentsPull-quote
Quote-Ghost ornament + serif italic.
ComponentsTier cards
Three cards · middle = RECOMMENDED.
VoiceVoice rules
Diagnose, don't motivate. Forbidden words.
BrandWordmark
"the" serif + GHOST sans, ghost as the O.
BrandMascot
Hero sheet ghost · canonical mark.
BrandPhoto tone
Editorial-punk reference library.
Source documents
Doc
README.md
Full system spec. Read first.
DocHandoff README
Bundle origin notes from claude.ai/design.
DocSKILL.md
Manifest + hard rules summary.
DocCLAUDE.md
Brand facts pinned for any agent.
CSScolors_and_type.css
Canonical tokens. Always import.
Chatchat1 · LinkedIn UI kit
Iteration log: wordmark, carousel, header, deck.
Chatchat2 · Newsletter thumb
The Source covers + letterhead build.