Mocha

Café and bakery: coffee brown, an olive accent, Lora titles.

direction: warm id: mocha

Graphite Aurora Bold Candy Citrus Clay Cobalt Crisp Editorial Ember Fjord Lagoon Meadow Minimal Mocha Newsprint Playful Plum Sage Sandstone Slate Terminal Vermilion Warm Classic

HeroSplit

Variables

The semantic tokens every component and block reads, resolved for this theme.

Light

--background #fcf2e7
--foreground #221506
--card #fff9f3
--muted #fff3e0
--muted-foreground #6d5d4b
--border #f7e5d2
--primary #221506
--primary-foreground #fff
--secondary #ffedda
--accent #ffedda
--brand #7f5539
--brand-foreground #fff
--brand-soft #f7f4f1
--brand-text #7f5539
--ring #c9b9af
--success #2f9e6a
--warning #e2b33c
--destructive #c4372f
--info #2e6fd6

Dark

--background #221506
--foreground #fff3e0
--card #3a2c1b
--muted #1f1203
--muted-foreground #b5a38f
--border #4a3b2a
--primary #fff3e0
--primary-foreground #221506
--secondary #3a2c1b
--accent #3a2c1b
--brand-soft #2c211b
--brand-text #c9b9af
--ring #7f5539
--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/mocha/css/tokens.css';
@import '@trame-ui/themes/themes/mocha/css/theme-light.css';
@import '@trame-ui/themes/themes/mocha/css/theme-dark.css';
@import '@trame-ui/themes/themes/mocha/css/theme-moods.css';
@import '@trame-ui/themes/themes/mocha/css/type.css';
@import '@trame-ui/themes/themes/mocha/css/controls.css';
@import '@trame-ui/themes/themes/mocha/css/motion.css';