跪拜 Guibai
← All articles
Frontend · Design · Visual Design

Six Contemporary Chinese Color Themes That Escape the Tech-Neon and Ink-Scroll Clichés

By 雨夜寻晴天 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Most CSS theme systems stop at swapping a few hex values and call it a day. These palettes demonstrate that a theme can carry emotional register — quiet, warm, festive, professional — through deliberate four-color relationships and semantic token wiring, which is directly applicable to brand sites, campaign pages, and product marketing where off-the-shelf design systems feel wrong for the industry.

Summary

Six new color themes land in the Han Design component library, each built around a four-color relationship extracted from reference photography rather than cultural stereotypes. The palettes target specific commercial contexts — tea branding, AI product pages, coffee and home goods, wellness, campaign marketing, and beauty — without defaulting to either neon-on-black tech aesthetics or ink-scroll traditionalism. Every theme wires into Han Design's semantic variable system, so backgrounds, text, borders, buttons, seals, scroll rollers, and focus rings shift together when `data-theme` changes. Scoped application via `data-han-scope` lets a single section borrow a palette without polluting the global stylesheet, which matters when an admin dashboard shouldn't suddenly turn berry-red. The underlying argument is that a theme isn't a color swap; it's a page's manner of speaking — Pine-Wheat talks slower, Ocean-Orchid pulls back for clarity, Berry-Butter turns the volume up.

Takeaways
Six themes ship inside Han Design: Pine-Wheat, Plum-Blush, Ocean-Orchid, Caramel-Cream, Mint-Lavender, and Berry-Butter.
Each theme is a four-color relationship, not a single hue stretched across a page.
Switching `data-theme` on `<html>` changes backgrounds, surfaces, text, borders, buttons, seals, scroll rollers, and focus rings globally.
Scoped application via `data-han-scope` lets a single section adopt a theme without affecting the rest of the page.
Ocean-Orchid was used to build a sample AI product page called Chengjian AI as a deliberate alternative to dark-neon AI aesthetics.
Text contrast in cool palettes remains handled by Han's semantic color tokens rather than decorative colors, preserving readability.
Caramel-Cream uses brown for text and buttons, café-au-lait white for whitespace, and cherry-mist pink to soften the mood without extra decoration.
Mint-Lavender includes Lavender Mist as a structural breathing color to prevent the page from reading as a generic health-food template.
Berry-Butter assigns clear roles: Berry Red for CTAs, Coral and Strawberry Pink for atmosphere, Butter Yellow to anchor the space.
Conclusions

The palette names themselves — Grape Night, Velvet Plum, Almond Milk — function as design constraints, evoking a specific material or time of day rather than an abstract hue angle.

Scoped theming via a data attribute solves the real-world problem where a single campaign section needs a festive palette but the surrounding app must stay neutral; most design systems skip this and force all-or-nothing theming.

The insistence that text contrast uses semantic tokens even inside decorative themes is a quiet but critical engineering decision: mood palettes often break accessibility when authors reach for a theme color instead of a text color.

These palettes treat color as a narrative voice — slower, louder, closer, more distant — which is a more useful mental model for designers than 'primary/secondary/accent' token assignments that say nothing about emotional register.

Concepts & terms
Semantic color variables
CSS custom properties named by their functional role — e.g., `--color-text-primary`, `--color-surface-card` — rather than by their hue. Swapping a theme changes the values behind these tokens, so every component that references them updates consistently without per-component overrides.
Scoped theming (data-han-scope)
Applying a theme to a DOM subtree via a scoping attribute so that only that section's components resolve the theme's CSS variables, leaving the rest of the page untouched. Avoids the all-or-nothing problem where a single promotional section would force a global theme switch.
Four-color relationship
A minimal palette structure where four carefully chosen colors — typically a dark anchor, a mid-tone, a light surface, and an accent — define the entire visual mood. More constrained than a full color system, which forces deliberate combinations instead of arbitrary hue picking.
From the discussion

The palettes drew immediate, polarized reactions. One side saw an uncanny fit with Mao-era iconography, while the other dismissed the aesthetic as either ugly or a parody of old-money taste.

The Pine-Wheat palette unintentionally harmonizes with classic Chinese propaganda imagery.
The themes are perceived as aesthetically unpleasant to the point of being notable.
The Caramel-Cream or similar palette reads as an attempt at, or a mockery of, quiet-luxury 'old-money' style.
Featured comments
lost_sai

Chairman Mao in the center seat blends in perfectly.

雨夜寻晴天

[Smile]

王进元

So ugly it circles back to the extreme.

柳杉

Is this the so-called old-money style? [snicker]

雨夜寻晴天

😂

See top comments, translated →
Source: juejin.cn ↗ Google Translate ↗ Backup ↗