Studio
Studio
The Numbered design system uses a dark-themed visual language. The primary brand color is Desert Sand (#bc9873); text is Ghost White (#ffffff) on a Canvas Black (#111111) background. Typography is set in aktiv-web. This DESIGN.md contains 4 color tokens and a 6-step type scale; give it to AI tools like Claude, Cursor or v0 to generate consistent interfaces in the style of Numbered.
Independent Style Review
Shadowy Gallery Canvas
Numbered employs a deep, high-contrast visual system, where stark black canvases provide a dramatic backdrop for crisp white typography and subtle, refined interactions. The design uses spacious layouts and minimal ornamentation, allowing large-scale imagery and bold headlines to dominate. Interactive elements are understated, relying on elegant hover states rather than overt visual cues, contributing to a premium, editorial aesthetic.
| Color | HEX | CSS token | Usage |
|---|---|---|---|
| Canvas Black | #111111 | --color-canvas-black | Page backgrounds, section backgrounds, hero areas — this deep black provides high contrast for all content |
| Ghost White | #ffffff | --color-ghost-white | Hairline borders, dividers, input outlines, and card edges on light surfaces. Do not promote it to the primary CTA color |
| Muted Ash | #4f4f4f | --color-muted-ash | Subtle borders, secondary navigation elements |
| Desert Sand | #bc9873 | --color-desert-sand | Subtle surface accents, potentially for card backgrounds or specific content areas |
| Font | Weights | Fallback |
|---|---|---|
| aktiv-web | 400, 700 | Inter |
| Role | Size | Line height | Token |
|---|---|---|---|
| caption | 12px | 1.5 | --text-caption |
| body-sm | 13px | 1.5 | --text-body-sm |
| body | 15px | 1.5 | --text-body |
| body-lg | 25px | 1.3 | --text-body-lg |
| heading-sm | 54px | 1.3 | --text-heading-sm |
| heading | 74px | 1.3 | --text-heading |
