Theming
stardewCN uses a carefully curated palette of colors and fonts inspired by Stardew Valley. Here is everything you need to know about the design tokens and how to customize them.
Color Palette
All colors are defined as Tailwind CSS v4 theme tokens. Use them with any Tailwind utility, for example bg-sdv-cream or text-sdv-yellow.
Browns
Creams
Text
Accents
Star Quality
Typography
stardewCN uses two font families to recreate the game's typography:
VT323 (sdv-dialogue)
The quick brown fox jumps over the lazy dog.
Used for body text, dialogue, labels, and descriptions. This is the primary font for readable content, matching the in-game dialogue style.
Tailwind class: font-sdv-dialogue
Press Start 2P (sdv-heading)
The quick brown fox.
Used for headings, titles, and emphasis. This pixel font gives that retro game feel. Use smaller sizes (8px to 12px) since this font is naturally bold and wide.
Tailwind class: font-sdv-heading
Text Shadows
Stardew Valley text has a signature shadow effect that gives it warm depth. stardewCN uses Tailwind arbitrary values for text shadows throughout its components:
Warm golden shadow for dialogue text
[text-shadow:1px_1px_0_#CE9C5F]Dark green shadow for body text on green backgrounds
[text-shadow:1px_1px_0_#1a4210]Outlined shadow for headings
[text-shadow:2px_2px_0_#3E1F08,-1px_-1px_0_#3E1F08,1px_-1px_0_#3E1F08,-1px_1px_0_#3E1F08]Customization
Every stardewCN component accepts a className prop, so you can add or override styles using Tailwind CSS classes:
<Button className="bg-sdv-red text-sdv-cream">
Danger Button
</Button>
<Panel className="border-sdv-iridium">
Iridium quality panel
</Panel>You can also override the theme tokens in your own CSS to change colors globally:
@theme {
/* Override the primary brown to a cooler tone */
--color-sdv-brown-primary: #5a4030;
/* Add your own custom token */
--color-sdv-custom-accent: #ff6b6b;
}