SanaLabs
A stark, editorial enterprise-AI interface built on white canvas with pure-black pill CTAs and the custom Sana Sans typeface. The system reads as precise and gallery-like — oversized tight-tracked display headlines, hard-edged (0-radius) light-gray content cards, full-bleed photographic and product-screenshot bands, and a restrained near-monochrome palette punctuated by a small set of saturated accents (red, orange, blues, cyan, pinks) that surface inside product UI and editorial tiles rather than on chrome.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
h1
83.2px · 400 · 0.95
The quick brown fox jumps
h2
48px · 500 · 1.0
The quick brown fox jumps
body
16px · 400 · 1.4
The quick brown fox jumps
button
14px · 400 · 1.4
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 12px | |
| md | 16px | |
| lg | 24px | |
| xl | 32px | |
| xxl | 40px | |
| xxxl | 48px | |
| section | 64px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| sharp | 0px | |
| sm | 6px | |
| md | 10px | |
| lg | 16px | |
| xl | 24px | |
| xxl | 32px | |
| pill | 36px |
FAQ
- What colors does SanaLabs use?
- SanaLabs's core palette includes #000000, #000000, #090909, #0a0a0a, #0e0e0e. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the SanaLabs DESIGN.md.
- What font does SanaLabs use?
- SanaLabs's primary typeface is Sana Sans. 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 SanaLabs design system?
- A stark, editorial enterprise-AI interface built on white canvas with pure-black pill CTAs and the custom Sana Sans typeface. The system reads as precise and gallery-like — oversized tight-tracked di…