Granite Draft themePro
Granite Draft: a muted mono palette around hue 253, soft surfaces, round corners, default density, soft contrast. minimal, calm. A blue theme. Radius 1rem.
Live preview
Install
The CLI writes these variables into your global stylesheet. Every component reads them, so the whole app changes at once.
Granite Draft is a Pro theme pack
Preview it freely. The CSS, Tailwind file, design tokens and the CLI install come with a tealmac UI Pro licence.
Export the tokens
The same theme as Tailwind v4 CSS, plain CSS variables, SCSS, JavaScript, TypeScript, DTCG design tokens, Figma variables and starter files for Swift, Android, Jetpack Compose and Flutter.
Exports of a Pro theme need an active licence.
Contrast report
This theme passes every theme gate: text contrast (WCAG 2.2 AA), chart colours that stay apart, and matching light and dark modes.
| Pair | Ratio | Result |
|---|---|---|
| Text on background | 13.98:1 / 4.5:1 | Pass |
| Text on cards | 14.5:1 / 4.5:1 | Pass |
| Popover text | 14.5:1 / 4.5:1 | Pass |
| Muted text on muted | 5.31:1 / 4.5:1 | Pass |
| Muted text on background | 5.74:1 / 4.5:1 | Pass |
| Primary button text | 5.56:1 / 4.5:1 | Pass |
| Secondary button text | 12.66:1 / 4.5:1 | Pass |
| Accent label | 12.43:1 / 4.5:1 | Pass |
| Sidebar text | 13.34:1 / 4.5:1 | Pass |
| Sidebar active item | 5.56:1 / 4.5:1 | Pass |
| Sidebar hover item | 12.43:1 / 4.5:1 | Pass |
| Primary on background | 3.24:1 / 3:1 | Pass |
| Focus ring on background | 3.11:1 / 3:1 | Pass |
| Destructive on background | 4.65:1 / 4.5:1 | Pass |
| Destructive on cards | 4.82:1 / 4.5:1 | Pass |
| Pair | Ratio | Result |
|---|---|---|
| Text on background | 13.8:1 / 4.5:1 | Pass |
| Text on cards | 12.62:1 / 4.5:1 | Pass |
| Popover text | 12:1 / 4.5:1 | Pass |
| Muted text on muted | 6.18:1 / 4.5:1 | Pass |
| Muted text on background | 6.84:1 / 4.5:1 | Pass |
| Primary button text | 4.62:1 / 4.5:1 | Pass |
| Secondary button text | 12.09:1 / 4.5:1 | Pass |
| Accent label | 11.97:1 / 4.5:1 | Pass |
| Sidebar text | 13:1 / 4.5:1 | Pass |
| Sidebar active item | 4.62:1 / 4.5:1 | Pass |
| Sidebar hover item | 11.97:1 / 4.5:1 | Pass |
| Primary on background | 4.16:1 / 3:1 | Pass |
| Focus ring on background | 3.68:1 / 3:1 | Pass |
| Destructive on background | 5.87:1 / 4.5:1 | Pass |
| Destructive on cards | 5.37:1 / 4.5:1 | Pass |
Similar themes
The closest themes by colour, measured in OKLab across the key tokens in light and dark.