Bold
Confident and graphic: indigo, a condensed display face, sharp corners.
direction: affirme palette: indigo typography: impact id: affirme
Variables
The semantic tokens every component and block reads, resolved for this theme.
Light
| --background | #fff | |
| --foreground | #16181b | |
| --card | #fff | |
| --muted | #f7fafe | |
| --muted-foreground | #6b727a | |
| --border | #e5e8ec | |
| --primary | #16181b | |
| --primary-foreground | #fff | |
| --secondary | #eff2f7 | |
| --accent | #eff2f7 | |
| --brand | #2344d4 | |
| --brand-foreground | #fff | |
| --brand-soft | #eff4ff | |
| --brand-text | #2344d4 | |
| --ring | #a1b6e6 | |
| --success | #2f9e6a | |
| --warning | #e2b33c | |
| --destructive | #c4372f | |
| --info | #2e6fd6 | |
| --commerce | #e3a33b |
Dark
| --background | #16181b | |
| --foreground | #f3f6fa | |
| --card | #2c2f34 | |
| --muted | #131518 | |
| --muted-foreground | #a1a6ae | |
| --border | #393f46 | |
| --primary | #f3f6fa | |
| --primary-foreground | #16181b | |
| --secondary | #2c2f34 | |
| --accent | #2c2f34 | |
| --brand-soft | #152243 | |
| --brand-text | #d7e4ff | |
| --ring | #2344d4 | |
| --destructive | #e5736b | |
| --info | #6f9ef0 | |
| --commerce | #efc78f |
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/affirme/css/tokens.css';
@import '@trame-ui/themes/themes/affirme/css/theme-light.css';
@import '@trame-ui/themes/themes/affirme/css/theme-dark.css';
@import '@trame-ui/themes/themes/affirme/css/theme-moods.css';
@import '@trame-ui/themes/themes/affirme/css/type.css';
@import '@trame-ui/themes/themes/affirme/css/controls.css';
@import '@trame-ui/themes/themes/affirme/css/motion.css';