MozaikaDesign system

Graphite — Design System

dark · modern · medium · tailwind · confidence 90%

The full decoded design system for Graphite: color roles, type scale, spacing, radii and paste-ready DESIGN.md / Tailwind / CSS exports.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/ds/graphite.

Tokens

Graphite's decoded design system: background #0A0A0A, text #FAFAFA, accent #FF8833, link #0C1823, primary #FF8833; type scale h1 60px / h2 36px / body 14px; 4px spacing base; 12px base radius. The single interactive/action color is #E5E5E5 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

RoleValue
bg#0A0A0A
surface#181818
border#2E2E2E
text#FAFAFA
text_muted#9E9E9E
primary#FF8833
accent#FF8833
link#0C1823
secondary#586069
button_bg#E5E5E5
button_text#171717

Using these colors

Typography

Spacing

Radii

Shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px

Per-section tokens (9)

Export: DESIGN.md

# Graphite — Design System

> dark, modern, medium, tailwind

## Colors

| Role | Value |
|------|-------|
| bg | `#0A0A0A` |
| surface | `#181818` |
| border | `#2E2E2E` |
| text | `#FAFAFA` |
| text_muted | `#9E9E9E` |
| primary | `#FF8833` |
| accent | `#FF8833` |
| link | `#0C1823` |
| secondary | `#586069` |
| button_bg | `#E5E5E5` |
| button_text | `#171717` |

**Using these colors**

- **Action color** `#E5E5E5` — the single interactive color; it appears only on things you click or must notice (buttons, key highlights), never on large fills or backgrounds.
- `primary`, `accent` are all `#FF8833` — one role, not several.
- **accent** `#FF8833` — accent for emphasis — keep it rare on the page.
- **link** `#0C1823` — fails contrast on the background (~1.1:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference).
- **secondary** `#586069` — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

## Typography

- Heading: **Matter** _(free fallback: Inter)_
- Body: **Matter** _(free fallback: Inter)_
- h1: 60px
- h2: 36px
- body: 14px

> **Fonts —** Matter is proprietary — closest free match: Inter (Google). Load Inter; keep Matter first so licensed users still get it.

## Spacing
- base unit: 4px
- scale: 2px, 4px, 6px, 8px, 12px, 16px, 24px, 32px

## Radius
- base: 12px
- button: 8px

## Primary button
- bg `#E5E5E5` · text `#171717` · radius 8px

## How to apply
Paste the Tailwind `@theme` (or CSS variables) as your base, then build each
section to its spec — verify every color, radius, and font against these tokens.

Export: Tailwind v4 (@theme)

@theme {
  /* action color #E5E5E5 — the one interactive color; buttons/links/emphasis only, never large fills. */
  --color-bg: #0A0A0A;
  --color-surface: #181818;
  --color-border: #2E2E2E;
  --color-text: #FAFAFA;
  --color-text-muted: #9E9E9E;
  --color-primary: #FF8833;  /* a brand color — but the call-to-action uses #E5E5E5, not this. */
  --color-accent: #FF8833;  /* accent for emphasis — keep it rare on the page. */
  --color-link: #0C1823;  /* fails contrast on the background (~1.1:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference). */
  --color-secondary: #586069;  /* optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two. */
  --color-button-bg: #E5E5E5;  /* primary-button fill — the main call-to-action color. */
  --color-button-text: #171717;
  /* fonts: Matter is proprietary — closest free match: Inter (Google). Load Inter; keep Matter first so licensed users still get it. */
  --font-heading: "Matter", "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: "Matter", "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --text-h1: 60px;
  --text-h2: 36px;
  --text-body: 14px;
  --radius-base: 12px;
  --radius-button: 8px;
  --spacing-1: 2px;
  --spacing-2: 4px;
  --spacing-3: 6px;
  --spacing-4: 8px;
  --spacing-5: 12px;
  --spacing-6: 16px;
  --spacing-7: 24px;
  --spacing-8: 32px;
}

Export: CSS variables

:root {
  /* action color #E5E5E5 — the one interactive color; buttons/links/emphasis only, never large fills. */
  --bg: #0A0A0A;
  --surface: #181818;
  --border: #2E2E2E;
  --text: #FAFAFA;
  --text-muted: #9E9E9E;
  --primary: #FF8833;  /* a brand color — but the call-to-action uses #E5E5E5, not this. */
  --accent: #FF8833;  /* accent for emphasis — keep it rare on the page. */
  --link: #0C1823;  /* fails contrast on the background (~1.1:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference). */
  --secondary: #586069;  /* optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two. */
  --button-bg: #E5E5E5;  /* primary-button fill — the main call-to-action color. */
  --button-text: #171717;
  --font-heading: "Matter", "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: "Matter", "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 12px;
  --radius-button: 8px;
}
/* fonts: Matter is proprietary — closest free match: Inter (Google). Load Inter; keep Matter first so licensed users still get it. */