Mocha Mousse
tweakcnApache-2.0Light and dark · bothMedium · mediumOrange · orangeMedium · mediumSerif · serifGeneral · generalLanding · landingProfessional · professional
A theme based on the Mocha Mousse color palette.
NNorthwind
Product · PricingSpecimen
Make the work feel finished
One interface, dressed in this style. Compare type, color, radius, and density.
128
Active
4.8
Score
12ms
Edge
Attribution
"Mocha Mousse" from https://github.com/jnsahaj/tweakcn (Apache-2.0). © jnsahaj. r/themes/mocha-mousse.json @ a3b47b37cba9.
https://github.com/jnsahaj/tweakcn · r/themes/mocha-mousse.json · a3b47b37cba9 · © jnsahaj
Prompt
Design a user interface in the "Mocha Mousse" style. A theme based on the Mocha Mousse color palette. Apply these tokens to every surface. Do not invent a second palette. - Background oklch(0.9529 0.0146 102.4597), foreground oklch(0.4063 0.0255 40.3627) - Primary oklch(0.6083 0.0623 44.3588) on oklch(1.0000 0 0) - Accent oklch(0.8502 0.0389 49.0874), muted oklch(0.8502 0.0389 49.0874), border oklch(0.7473 0.0387 80.5476) - Radius 0.5rem, type DM Sans, sans-serif - Shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04) "Mocha Mousse" from https://github.com/jnsahaj/tweakcn (Apache-2.0). © jnsahaj. r/themes/mocha-mousse.json @ a3b47b37cba9. powered by Styledex — https://styledex.dev
Tokens
DTCG
{
"$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
"$description": "Mocha Mousse. \"Mocha Mousse\" from https://github.com/jnsahaj/tweakcn (Apache-2.0). © jnsahaj. r/themes/mocha-mousse.json @ a3b47b37cba9.",
"$extensions": {
"dev.styledex": {
"id": "tweakcn-mocha-mousse",
"license": "Apache-2.0",
"attribution": "\"Mocha Mousse\" from https://github.com/jnsahaj/tweakcn (Apache-2.0). © jnsahaj. r/themes/mocha-mousse.json @ a3b47b37cba9.",
"banner": "powered by Styledex — https://styledex.dev"
}
},
"color": {
"background": {
"$type": "color",
"$value": "oklch(0.9529 0.0146 102.4597)"
},
"foreground": {
"$type": "color",
"$value": "oklch(0.4063 0.0255 40.3627)"
},
"card": {
"$type": "color",
"$value": "oklch(0.9529 0.0146 102.4597)"
},
"card-foreground": {
"$type": "color",
"$value": "oklch(0.4063 0.0255 40.3627)"
},
"primary": {
"$type": "color",
"$value": "oklch(0.6083 0.0623 44.3588)"
},
"primary-foreground": {
"$type": "color",
"$value": "oklch(1.0000 0 0)"
},
"secondary": {
"$type": "color",
"$value": "oklch(0.7473 0.0387 80.5476)"
},
"secondary-foreground": {
"$type": "color",
"$value": "oklch(1.0000 0 0)"
},
"accent": {
"$type": "color",
"$value": "oklch(0.8502 0.0389 49.0874)"
},
"accent-foreground": {
"$type": "color",
"$value": "oklch(0.4063 0.0255 40.3627)"
},
"muted": {
"$type": "color",
"$value": "oklch(0.8502 0.0389 49.0874)"
},
"muted-foreground": {
"$type": "color",
"$value": "oklch(0.5416 0.0512 37.2132)"
},
"border": {
"$type": "color",
"$value": "oklch(0.7473 0.0387 80.5476)"
},
"destructive": {
"$type": "color",
"$value": "oklch(0.2225 0.0098 52.9636)"
},
"ring": {
"$type": "color",
"$value": "oklch(0.6083 0.0623 44.3588)"
}
},
"font": {
"sans": {
"$type": "fontFamily",
"$value": [
"DM Sans",
"sans-serif"
]
},
"serif": {
"$type": "fontFamily",
"$value": [
"Georgia",
"serif"
]
},
"mono": {
"$type": "fontFamily",
"$value": [
"Menlo",
"monospace"
]
}
},
"radius": {
"base": {
"$type": "dimension",
"$value": "0.5rem"
}
},
"spacing": {
"base": {
"$type": "dimension",
"$value": "0.25rem"
}
},
"shadow": {
"base": {
"$type": "shadow",
"$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
},
"dark": {
"color": {
"background": {
"$type": "color",
"$value": "oklch(0.2721 0.0141 48.1783)"
},
"foreground": {
"$type": "color",
"$value": "oklch(0.9529 0.0146 102.4597)"
},
"card": {
"$type": "color",
"$value": "oklch(0.3291 0.0156 50.8936)"
},
"card-foreground": {
"$type": "color",
"$value": "oklch(0.9529 0.0146 102.4597)"
},
"primary": {
"$type": "color",
"$value": "oklch(0.7272 0.0539 52.3320)"
},
"primary-foreground": {
"$type": "color",
"$value": "oklch(0.2721 0.0141 48.1783)"
},
"secondary": {
"$type": "color",
"$value": "oklch(0.5416 0.0512 37.2132)"
},
"secondary-foreground": {
"$type": "color",
"$value": "oklch(0.9529 0.0146 102.4597)"
},
"accent": {
"$type": "color",
"$value": "oklch(0.7473 0.0387 80.5476)"
},
"accent-foreground": {
"$type": "color",
"$value": "oklch(0.2721 0.0141 48.1783)"
},
"muted": {
"$type": "color",
"$value": "oklch(0.4063 0.0255 40.3627)"
},
"muted-foreground": {
"$type": "color",
"$value": "oklch(0.7575 0.0380 50.8610)"
},
"border": {
"$type": "color",
"$value": "oklch(0.4063 0.0255 40.3627)"
},
"destructive": {
"$type": "color",
"$value": "oklch(0.6875 0.1420 21.4566)"
},
"ring": {
"$type": "color",
"$value": "oklch(0.7272 0.0539 52.3320)"
}
}
}
}
CSS
/* powered by Styledex — https://styledex.dev */
/* "Mocha Mousse" from https://github.com/jnsahaj/tweakcn (Apache-2.0). © jnsahaj. r/themes/mocha-mousse.json @ a3b47b37cba9. */
:root {
--background: oklch(0.9529 0.0146 102.4597);
--foreground: oklch(0.4063 0.0255 40.3627);
--card: oklch(0.9529 0.0146 102.4597);
--card-foreground: oklch(0.4063 0.0255 40.3627);
--primary: oklch(0.6083 0.0623 44.3588);
--primary-foreground: oklch(1.0000 0 0);
--secondary: oklch(0.7473 0.0387 80.5476);
--secondary-foreground: oklch(1.0000 0 0);
--accent: oklch(0.8502 0.0389 49.0874);
--accent-foreground: oklch(0.4063 0.0255 40.3627);
--muted: oklch(0.8502 0.0389 49.0874);
--muted-foreground: oklch(0.5416 0.0512 37.2132);
--border: oklch(0.7473 0.0387 80.5476);
--destructive: oklch(0.2225 0.0098 52.9636);
--ring: oklch(0.6083 0.0623 44.3588);
--radius: 0.5rem;
--font-sans: DM Sans, sans-serif;
--font-serif: Georgia, serif;
--font-mono: Menlo, monospace;
--spacing: 0.25rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
.dark {
--background: oklch(0.2721 0.0141 48.1783);
--foreground: oklch(0.9529 0.0146 102.4597);
--card: oklch(0.3291 0.0156 50.8936);
--card-foreground: oklch(0.9529 0.0146 102.4597);
--primary: oklch(0.7272 0.0539 52.3320);
--primary-foreground: oklch(0.2721 0.0141 48.1783);
--secondary: oklch(0.5416 0.0512 37.2132);
--secondary-foreground: oklch(0.9529 0.0146 102.4597);
--accent: oklch(0.7473 0.0387 80.5476);
--accent-foreground: oklch(0.2721 0.0141 48.1783);
--muted: oklch(0.4063 0.0255 40.3627);
--muted-foreground: oklch(0.7575 0.0380 50.8610);
--border: oklch(0.4063 0.0255 40.3627);
--destructive: oklch(0.6875 0.1420 21.4566);
--ring: oklch(0.7272 0.0539 52.3320);
--radius: 0.5rem;
--font-sans: DM Sans, sans-serif;
--font-serif: Georgia, serif;
--font-mono: Menlo, monospace;
--spacing: 0.25rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
Tailwind
/* powered by Styledex — https://styledex.dev */
/* "Mocha Mousse" from https://github.com/jnsahaj/tweakcn (Apache-2.0). © jnsahaj. r/themes/mocha-mousse.json @ a3b47b37cba9. */
/** Tailwind theme extend for Mocha Mousse (tweakcn-mocha-mousse) */
module.exports = {
"theme": {
"extend": {
"colors": {
"background": "oklch(0.9529 0.0146 102.4597)",
"foreground": "oklch(0.4063 0.0255 40.3627)",
"card": "oklch(0.9529 0.0146 102.4597)",
"primary": "oklch(0.6083 0.0623 44.3588)",
"primary-foreground": "oklch(1.0000 0 0)",
"secondary": "oklch(0.7473 0.0387 80.5476)",
"accent": "oklch(0.8502 0.0389 49.0874)",
"muted": "oklch(0.8502 0.0389 49.0874)",
"border": "oklch(0.7473 0.0387 80.5476)",
"destructive": "oklch(0.2225 0.0098 52.9636)",
"ring": "oklch(0.6083 0.0623 44.3588)"
},
"borderRadius": {
"lg": "0.5rem"
},
"fontFamily": {
"sans": [
"DM Sans",
"sans-serif"
],
"serif": [
"Georgia",
"serif"
],
"mono": [
"Menlo",
"monospace"
]
},
"boxShadow": {
"styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
}
}
}
};
shadcn
/* powered by Styledex — https://styledex.dev */
/* "Mocha Mousse" from https://github.com/jnsahaj/tweakcn (Apache-2.0). © jnsahaj. r/themes/mocha-mousse.json @ a3b47b37cba9. */
@layer base {
:root {
--background: oklch(0.9529 0.0146 102.4597);
--foreground: oklch(0.4063 0.0255 40.3627);
--card: oklch(0.9529 0.0146 102.4597);
--card-foreground: oklch(0.4063 0.0255 40.3627);
--primary: oklch(0.6083 0.0623 44.3588);
--primary-foreground: oklch(1.0000 0 0);
--secondary: oklch(0.7473 0.0387 80.5476);
--secondary-foreground: oklch(1.0000 0 0);
--accent: oklch(0.8502 0.0389 49.0874);
--accent-foreground: oklch(0.4063 0.0255 40.3627);
--muted: oklch(0.8502 0.0389 49.0874);
--muted-foreground: oklch(0.5416 0.0512 37.2132);
--border: oklch(0.7473 0.0387 80.5476);
--destructive: oklch(0.2225 0.0098 52.9636);
--ring: oklch(0.6083 0.0623 44.3588);
--radius: 0.5rem;
--font-sans: DM Sans, sans-serif;
--font-serif: Georgia, serif;
--font-mono: Menlo, monospace;
--spacing: 0.25rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
.dark {
--background: oklch(0.2721 0.0141 48.1783);
--foreground: oklch(0.9529 0.0146 102.4597);
--card: oklch(0.3291 0.0156 50.8936);
--card-foreground: oklch(0.9529 0.0146 102.4597);
--primary: oklch(0.7272 0.0539 52.3320);
--primary-foreground: oklch(0.2721 0.0141 48.1783);
--secondary: oklch(0.5416 0.0512 37.2132);
--secondary-foreground: oklch(0.9529 0.0146 102.4597);
--accent: oklch(0.7473 0.0387 80.5476);
--accent-foreground: oklch(0.2721 0.0141 48.1783);
--muted: oklch(0.4063 0.0255 40.3627);
--muted-foreground: oklch(0.7575 0.0380 50.8610);
--border: oklch(0.4063 0.0255 40.3627);
--destructive: oklch(0.6875 0.1420 21.4566);
--ring: oklch(0.7272 0.0539 52.3320);
--radius: 0.5rem;
--font-sans: DM Sans, sans-serif;
--font-serif: Georgia, serif;
--font-mono: Menlo, monospace;
--spacing: 0.25rem;
--shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}