跪拜 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.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗