Fabric
A calm, editorial productivity-app surface anchored on a pure-white canvas with a single high-contrast black CTA and a light, high-contrast GT Alpina serif for headlines. The system reads as quiet and intellectual — generous whitespace, near-monochrome palette, soft-rounded floating \"note\" cards that show real product chrome (calendars, transcripts, AI panels) drifting at the page edges, and Inter for all supporting UI text. Brand voltage comes almost entirely from the light-weight serif display type and from product UI fragments shown in-card rather than from color.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-xl
80px · 300 · 1.08
The quick brown fox jumps
display-lg
52px · 300 · 1.08
The quick brown fox jumps
title
18px · 500 · 1.5
The quick brown fox jumps
body
18px · 500 · 1.2
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xxs | 4px | |
| xs | 8px | |
| sm | 10px | |
| md | 12px | |
| lg | 14px | |
| xl | 16px | |
| xxl | 20px | |
| xxxl | 24px | |
| section | 32px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 4px | |
| sm | 8px | |
| md | 12px | |
| lg | 16px | |
| xl | 24px | |
| xxl | 40px |
FAQ
- What colors does Fabric use?
- Fabric's core palette includes #000000, #0a0a0a, #333333, #404040, #666666. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Fabric DESIGN.md.
- What font does Fabric use?
- Fabric's primary typeface is GT Alpina. 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 Fabric design system?
- A calm, editorial productivity-app surface anchored on a pure-white canvas with a single high-contrast black CTA and a light, high-contrast GT Alpina serif for headlines. The system reads as quiet an…