The FrankX
Design System
Tokens, taste, and source — open and version-controlled. Two markdown files at the repo root govern every visual decision: design.md for what is, taste.md for what good looks like.
01 · Foundation
The four-step ladder
Each step is roughly +3% luminance. The whole system is built on this near-black base. Always go deeper than instinct suggests.
#0a0a0bPage background#111113Primary elevated surface#1a1a1fHover, secondary cards#252530Borders, dividerswhite at 0.08–0.15 alpha — never a literal grey. Surface feels lit from within.02 · Ink
Text never lives at 100%
Pure white on void reads harsh. Body drops to 65%; the page breathes.
03 · Spectrums
Tech, Soul, Bridge
A page picks one and stays loyal. Tech for AI/architecture/code. Soul for music/writing/transformation. Bridge for the worlds where they meet — used sparingly so it carries weight.
Tech
— emerald + cyan#10b981CTA · primary#06b6d4Highlight#34d399Hover#059669PressedSoul
— amber + gold#f59e0bCTA · primary#fbbf24Highlight#fcd34dHover#d97706PressedBridge
— purple/blue/magenta#AB47C7Brand purple#43BFE3Clarity#E040FBEnergy#7C3AEDArcanea glow04 · Typography
Four faces, four jobs
Inter for body. Poppins for display ≥18px. Playfair Display italic for quotes only. JetBrains Mono for code. Perfect Fourth scale (1.333).
display-2xldisplay-lgh1h2h3body-lgbody-mdbody-smquotecode05 · Spacing
The scale is the scale
Eight tokens. No 12px, no 20px, no 40px. If a value isn't on the scale, the answer is the closer one.
xs4pxsm8pxmd16pxlg24pxxl32px2xl48px3xl64px4xl96px06 · Rounded
Curves with intent
Primary CTAs are always rounded-full. That shape is the brand fingerprint. Cards default to rounded-xl.
smmdlgxl2xlfull07 · Components
The recognizable shapes
The patterns this brand has earned. Implementation lives in components/; this is the agent-readable contract.
Button hierarchy — one primary per viewport
Section opener — eyebrow + headline + deck
Eyebrow Label
The headline that earns the section
A deck of one to two sentences. Sets context, names the topic, breathes. This trio is the most-replicated section opener on FrankX — recognize it, reuse it, don't reinvent it.
Cards
Chips
08 · Compass
Do's and Don'ts
Do
- Pick one spectrum (tech or soul) per page and stay loyal
- Use the eyebrow + headline + deck pattern for every section opener
- Drop body copy to ink-muted (65%) — pure white reads harsh
- Use rounded-full for primary CTAs — the brand-recognizable shape
- Respect the spacing scale; if you need 20px, you need 16px or 24px
- Show technical proof with JetBrains Mono — code, commands, file paths
Don't
- Use Poppins below 18px — it collapses; switch to Inter
- Mix tech (emerald) and soul (amber) accents in the same hero
- Reach for pure black (#000) — void (#0a0a0b) is always the answer
- Stack two equal-weight CTAs — design indecision in pixel form
- Use Playfair for headings — italic quotes only
- Auto-play video, parallax bands, full-page color washes, glassmorphism with nothing underneath
From taste.md
“Tokens make a system consistent. Taste makes it excellent. Without taste, a token system produces software that's correct and forgettable.”Read the full taste contract
09 · Source
Open. Version-controlled. Yours to fork.
Both files at the repo root, MIT-spirit (Apache 2.0 spec), recursively rebuildable. Use them, fork them, improve them. The system gets better when more people read it.
Foundation ·Typography ·Spacing ·Shapes·All grounded in tailwind.config.js