新中式New Chinese Style

核心特征

• 宣纸米底色，配朱砂红与墨黑文字
• 标题用宋体或楷体，带书法气息
• 方形印章式按钮：红底、双层细边
• 金色虚线与细框模拟回纹分隔
• 黛青深色条承载底部信息与强调

色板与字体

英文

Playfair Display（自托管）

中文

系统宋体 / 楷体：Songti SC、STSong、SimSun；Kaiti SC、STKaiti、KaiTi

说明

中文标题在真实项目中可换成思源宋体（Noto Serif SC）或其他可商用的宋体、楷体；西文衬线可搭配 Playfair Display。

起源与代表作

年代：2018 年前后国潮兴起

「国潮」指传统文化元素与现代设计结合的品牌与产品潮流。2018 年李宁在纽约时装周发布「悟道」系列，故宫文创与老字号品牌的焕新也在同一时期走红，让国潮成为大众消费的热门话题。界面设计借用书法、印章、宣纸与青绿山水的色彩和构图，用留白与竖向细线取代繁复装饰。它如今常见于文旅、茶饮、文创与节庆专题页。

AI 设计提示词 · Prompt

新中式（New Chinese Style）风格界面：页面底色宣纸米 #F3EDE2，卡片底色 #FAF6EC，正文墨黑 #1F1F1F，次要文字 #5A5348。强调色朱砂红 #B7312C，辅助色黛青 #3E5F5B，点缀泥金 #B08D57。标题使用宋体（Songti SC / SimSun），字号 36px，行高 1.3，字距 0.04em；小标签使用楷体（Kaiti SC / KaiTi）。按钮为方形印章：圆角 2px，朱砂红底、米色字，外加一圈 2px 红色内描边和 1px 米色内圈。卡片 1px 泥金细边，内缩 4px 再描一圈半透明金线；导航底部 1px 墨线，页脚上沿用泥金虚线做回纹分隔。底部信息条使用黛青底、米色字。不使用投影与渐变，保留大面积留白，左侧可用 2px 朱砂竖线引导标题。所有正文对比度不低于 4.5:1，红色只用于关键操作与重点标记。

A New Chinese Style interface: page background rice-paper beige #F3EDE2, card background #FAF6EC, body text ink black #1F1F1F, secondary text #5A5348. Accent is cinnabar red #B7312C, the supporting color is dark celadon #3E5F5B and the highlight is gold #B08D57. Headings use a Song-style serif (Songti SC / SimSun) at 36px with a line height of 1.3 and 0.04em letter-spacing; small labels use a Kai-style brush font (Kaiti SC / KaiTi). Buttons look like square seals: 2px corner radius, cinnabar background with beige text, plus a 2px red inner stroke and a 1px beige inner ring. Cards have a 1px gold hairline with a second semi-transparent gold line inset by 4px; the navbar ends with a 1px ink rule and the footer starts with a dashed gold line that stands in for a fret pattern. The bottom bar is dark celadon with beige text. No shadows or gradients, generous empty space, and an optional 2px cinnabar vertical line leading into the headline. Keep all body contrast at least 4.5:1 and use red only for key actions and emphasis.

CSS 设计变量

这套风格的设计令牌，可直接粘贴进项目的全局样式。

:root {
  --ds-bg: #f3ede2;
  --ds-surface: #faf6ec;
  --ds-text: #1f1f1f;
  --ds-muted: #5a5348;
  --ds-vermilion: #b7312c;
  --ds-teal: #3e5f5b;
  --ds-gold: #b08d57;
  --ds-radius: 2px;
}

适合与不适合

和相近风格的区别

• 手绘涂鸦：新中式取材书法、印章与宣纸，版式端正、色彩克制，带有庄重的文化意味；手绘涂鸦靠不规则线条和荧光笔高亮，轻松随性、像随手画的笔记。

常见踩坑

• 中文宋体与楷体在各系统里字形差异很大，字重也有限，标题要在苹果与 Windows 上都实测，不要依赖单一字体名
• 朱砂红底配米色字对比度约 5.7:1，但红底配黑字或金字会偏低，小字号按钮务必按 4.5:1 复核
• 回纹、云纹、龙凤等符号滥用会显得堆砌，也可能带来文化误读，建议只用细线、留白与印章三种元素表达
• 楷体字体文件往往很大，网页里整套引入会拖慢首屏，优先使用系统字体栈，确需自定义时做子集化并设置 font-display: swap

相关 UI 模式

在 UI 模式词典里查看组件级的实现与演示。

常见问题