Graphite
Neutral and precise: ink buttons, an iris accent, Geist everywhere. The safe start.
direction: precise id: graphite
Variables
The semantic tokens every component and block reads, resolved for this theme.
Light
| --background | #fff | |
| --foreground | #181818 | |
| --card | #fff | |
| --muted | #f6f6f6 | |
| --muted-foreground | #717171 | |
| --border | #e8e8e8 | |
| --primary | #181818 | |
| --primary-foreground | #fff | |
| --secondary | #f2f2f2 | |
| --accent | #f2f2f2 | |
| --brand | #4f5bd5 | |
| --brand-foreground | #fff | |
| --brand-soft | #f1f4fe | |
| --brand-text | #4f5bd5 | |
| --ring | #bec8f3 | |
| --success | #2f9e6a | |
| --warning | #e2b33c | |
| --destructive | #c4372f | |
| --info | #2e6fd6 |
Dark
| --background | #181818 | |
| --foreground | #f6f6f6 | |
| --card | #2f2f2f | |
| --muted | #151515 | |
| --muted-foreground | #a6a6a6 | |
| --border | #3e3e3e | |
| --primary | #f6f6f6 | |
| --primary-foreground | #181818 | |
| --secondary | #2f2f2f | |
| --accent | #2f2f2f | |
| --brand-soft | #1c213e | |
| --brand-text | #7788e7 | |
| --ring | #4f5bd5 | |
| --destructive | #e5736b | |
| --info | #6f9ef0 |
Palette
brand
50
100
200
300
400
500
600
700
800
900
950
accent
50
100
200
300
400
500
600
700
800
900
950
neutral
25
50
75
100
150
200
250
300
350
400
450
500
550
600
650
700
800
850
900
925
950
Use it
@import '@trame-ui/themes/themes/graphite/css/tokens.css';
@import '@trame-ui/themes/themes/graphite/css/theme-light.css';
@import '@trame-ui/themes/themes/graphite/css/theme-dark.css';
@import '@trame-ui/themes/themes/graphite/css/theme-moods.css';
@import '@trame-ui/themes/themes/graphite/css/type.css';
@import '@trame-ui/themes/themes/graphite/css/controls.css';
@import '@trame-ui/themes/themes/graphite/css/motion.css';