A preset is a complete look: colors in light and dark, fonts, base radius, border weight and shadow style. Switch the whole site with the picker in the header, or compare them here.
The default. Monochrome product UI with a pink-to-amber brand gradient, straight from the original Wallflower hero.
The default. Monochrome product UI with a pink-to-amber brand gradient, straight from the original Wallflower hero.
Dark-first developer aesthetic. Cool ink neutrals, violet primary, teal highlights, crisp hairline shadows.
Dark-first developer aesthetic. Cool ink neutrals, violet primary, teal highlights, crisp hairline shadows.
Warm and friendly. Sand surfaces, ember-orange primary, marigold glow, big round corners.
Warm and friendly. Sand surfaces, ember-orange primary, marigold glow, big round corners.
Earthy and calm. Deep green primary on warm paper, serif display type. Wellness, food, sustainability.
Earthy and calm. Deep green primary on warm paper, serif display type. Wellness, food, sustainability.
Fresh and technical. Teal primary, azure accents, Manrope. Fintech, health and data tools.
Fresh and technical. Teal primary, azure accents, Manrope. Fintech, health and data tools.
Editorial and literary. Ink on warm paper, condensed serif headlines, tight corners, no shadows.
Editorial and literary. Ink on warm paper, condensed serif headlines, tight corners, no shadows.
Neo-brutalist. Zero radius, 2px black borders, hard offset shadows, loud yellow. Portfolios and launches.
Neo-brutalist. Zero radius, 2px black borders, hard offset shadows, loud yellow. Portfolios and launches.
Phosphor green on black, monospace everything, pixel headlines, square corners. Dev tools, CLIs and hacker portfolios.
Phosphor green on black, monospace everything, pixel headlines, square corners. Dev tools, CLIs and hacker portfolios.
Pastel and bouncy. Extra-round corners, chunky 2px borders, rounded type, violet and pink with a sunny yellow. Kids, games, social and creator apps.
Pastel and bouncy. Extra-round corners, chunky 2px borders, rounded type, violet and pink with a sunny yellow. Kids, games, social and creator apps.
Quiet luxury. Ivory and near-black with gold, classical serif headlines, hairline corners, wide-tracked uppercase buttons. Fashion, hospitality, premium brands.
Quiet luxury. Ivory and near-black with gold, classical serif headlines, hairline corners, wide-tracked uppercase buttons. Fashion, hospitality, premium brands.
Presets are just CSS variables, so pick whichever fits the app.
Import everything, then set data-preset on<html> or any element. Presets nest.
@import "wallflower-ui/css";
<html data-preset="moss" class="dark">Ship only one preset's variables, applied to :root.
@import "wallflower-ui/css/core.css";
@import "wallflower-ui/css/presets/moss.css";Writes the preset's variables into your shadcn project's CSS.
npx shadcn@latest add \
https://raw.githubusercontent.com/silicondaydream/wallflowerUI/main/public/r/theme-moss.jsonDark mode: add class="dark" ordata-theme="dark". Usedata-theme="system" to follow the OS.
Every preset sets the same variables, so you can take the colors from one and the type from another. Override any variable after the preset.
@import "wallflower-ui/css/core.css";
@import "wallflower-ui/css/presets/midnight.css"; /* colors, radius… */
:root {
/* …but Sunset's typography */
--wf-font-sans: "Outfit", ui-sans-serif, system-ui, sans-serif;
--wf-font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
--radius: 1rem;
}Anything you design in Claude Design can become a Wallflower preset. Export the system's tokens.json, run the importer, and the preset shows up everywhere: CSS, Tailwind, the shadcn registry and this site.
project/tokens.json and runs the steps below for you.tokens.json into the repo and run the importer.src/system/presets/custom/.npm run preset:import -- ./geekymango.tokens.json --id geekymango --name "GeekyMango"
npm run tokens # regenerate CSS, Tailwind theme and shadcn registryIt works the other way too: each preset's Claude Design tokens button downloads a tokens.json you can use to start a Claude Design system from a Wallflower preset.