从色彩系统看中式水墨风格界面设计

现代 UI 设计长期被 Western Modernism（包豪斯、扁平化、新拟态）所主导。在探索具有中国美学韵味的数字产品时，我们常常陷入将传统元素硬生生堆砌在网页上的误区——贴几张水墨背景图、加几个书法字，往往适得其反。

提取水墨本质：灰阶的质感

水墨艺术的核心在于层次丰富的单色表达。在 Tailwind CSS 4 的设计体系中，我们抽象出以下语义色彩：

--color-ink-950: #0f1115; /* 焦墨 */
--color-ink-900: #1a1c23; /* 浓墨 */
--color-ink-700: #393e4f; /* 重墨 */
--color-ink-500: #6b7280; /* 淡墨 */
--color-ink-200: #e5e7eb; /* 清墨 */
--color-paper-light: #faf8f5; /* 生宣暖白 */
--color-cinnabar: #b83b3b; /* 传统朱砂印泥 */

纹理与光影的克制

在界面中，纹理应当如同若隐若现的宣纸纹理，不喧宾夺主。卡片的阴影也应由尖锐的硬阴影转变为如墨汁晕染开的超柔和弥散阴影：

.ink-shadow {
  box-shadow: 0 4px 20px -2px rgba(26, 28, 35, 0.06);
}

在克制与流动之间，东方美学在数字空间得以重生。