Contractbook
A warm, optimistic legal-SaaS interface built on a soft off-white canvas (#f7f7f3) with a confident amber-yellow primary CTA and near-black ink. The system reads as friendly and human rather than corporate-legal — large bold ABC Whyte display headlines, big-radius rounded content cards, pill-shaped buttons, and bold electric-blue full-bleed accent bands punctuated by hand-drawn doodle marks. Brand voltage comes from the yellow CTA, the deep electric-blue blocks, and playful sketch illustrations rather than dense UI chrome.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display
48px · 700 · 1.25
The quick brown fox jumps
heading-lg
31.5px · 700 · 1.3
The quick brown fox jumps
heading-md
28px · 700 · 1.3
The quick brown fox jumps
body
24.5px · 400 · 1.3
The quick brown fox jumps
button
12.257px · 700 · 1.0
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 7px | |
| xs | 10px | |
| sm | 14px | |
| md | 21px | |
| lg | 28px | |
| xl | 35px | |
| xxl | 38px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 4px | |
| sm | 10px | |
| md | 16px | |
| lg | 20px | |
| xl | 24px | |
| xxl | 40px | |
| pill | 999px | |
| full | 9999px |
FAQ
- What colors does Contractbook use?
- Contractbook's core palette includes #1a1a1a, #252525, #333333, #000000, #f7f7f3. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Contractbook DESIGN.md.
- What font does Contractbook use?
- Contractbook's primary typeface is ABC Whyte. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Contractbook design system?
- A warm, optimistic legal-SaaS interface built on a soft off-white canvas (#f7f7f3) with a confident amber-yellow primary CTA and near-black ink. The system reads as friendly and human rather than cor…