Scalar
A clean, developer-documentation-first marketing surface built on pure white canvas with near-black ink type and a black primary CTA. The system reads as precise, technical, and open-source — Inter throughout, tight 3px radii on UI chrome, real product UI (API client, docs sidebar, code blocks) embedded directly in the page, and a scarce red brand accent. Brand voltage comes from showing the actual product chrome rather than from decorative color.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
title
24px · 600 · 1.33
The quick brown fox jumps
body
14px · 400 · 1.714
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 6px | |
| sm | 8px | |
| md | 10px | |
| base | 12px | |
| lg | 16px | |
| xl | 24px | |
| xxl | 32px | |
| section | 44px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 2px | |
| sm | 3px | |
| md | 6px | |
| lg | 8px | |
| xl | 16px | |
| xxl | 20px | |
| round | 50px | |
| pill | 9999px |
FAQ
- What colors does Scalar use?
- Scalar's core palette includes #1b1b1b, #0d0d0d, #000000, #757575, #8e8e8e. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Scalar DESIGN.md.
- What font does Scalar use?
- Scalar's primary typeface is Inter. 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 Scalar design system?
- A clean, developer-documentation-first marketing surface built on pure white canvas with near-black ink type and a black primary CTA. The system reads as precise, technical, and open-source — Inter t…