Back to Details

phoenix-duskmoon-design

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Phoenix DuskMoon Design Conventions

Phoenix DuskMoon 设计规范

Design Thinking

设计思路

Before building any page or view, commit to an intentional aesthetic direction within the DuskMoon design system:
  • Purpose: What does this page do? Dashboard, form, marketing, admin, content?
  • Density: Dense data UI vs generous editorial spacing — pick one per view
  • Emphasis: Identify the single most important action or content block — that gets primary color; everything else recedes
  • Depth: How many surface layers does this view need? Flat (1-2 levels) vs layered (3-4 levels)
DuskMoon provides the tokens — your job is to use them with intention, not uniformly.
在构建任何页面或视图前，需遵循DuskMoon设计系统的明确美学方向：
  • 用途：该页面的功能是什么？仪表盘、表单、营销页、管理后台还是内容页？
  • 密度：选择密集型数据UI或宽松型编辑排版——每个视图仅选一种
  • 重点：确定单个最重要的操作或内容区块——使用主色调；其余元素弱化显示
  • 深度：该视图需要多少层表面？扁平化（1-2层）还是分层式（3-4层）
DuskMoon提供设计令牌——你的任务是有针对性地使用它们，而非统一套用。

Theme Setup

主题设置

CSS Entry (Required)

CSS 入口（必填）

css
@import "tailwindcss";
@plugin "@duskmoon-dev/core/plugin";
@import "phoenix_duskmoon/components";
css
@import "tailwindcss";
@plugin "@duskmoon-dev/core/plugin";
@import "phoenix_duskmoon/components";

HTML Root (Required)

HTML 根节点（必填）

heex
<html lang="en" data-theme="sunshine">
Themes: 
sunshine
(light), 
moonlight
(dark).
heex
<html lang="en" data-theme="sunshine">
主题选项：
sunshine
（浅色）、
moonlight
（深色）。

Body Base

基础Body设置

heex
<body class="bg-surface text-on-surface">
Every page starts on 
surface
with 
on-surface
text. No exceptions.
heex
<body class="bg-surface text-on-surface">
所有页面均以
surface
背景搭配
on-surface
文本开始，无例外。

Theme Switcher

主题切换器

Always include 
<.dm_theme_switcher />
in the appbar. Requires 
ThemeSwitcher
hook.
需始终在应用栏中包含
<.dm_theme_switcher />
，依赖
ThemeSwitcher
钩子。

Component Default Colors

组件默认颜色

Page Shell

页面框架

ComponentColorClass / Pattern
Appbarprimary
appbar appbar-primary appbar-sticky
Page backgroundsurface
bg-surface
on 
<body>
Sidebarsecondary
bg-secondary text-secondary-content
Footersurface-container-high
bg-surface-container-high
Bottom navprimary
color="primary"
Drawersecondary
bg-secondary text-secondary-content
The appbar is the brand anchor — always primary. The sidebar and drawer use secondary to create a strong navigation identity distinct from the content area. The page body is always surface. Footer uses higher surface elevation for subtle separation.
heex
<.dm_appbar title={@page_title} sticky>
  <:logo>...</:logo>
  <:menu to={~p"/dashboard"} active={@active == :dashboard}>Dashboard</:menu>
  <:user_profile><.dm_theme_switcher /></:user_profile>
</.dm_appbar>

<div class="flex">
  <aside class="bg-secondary text-secondary-content w-64 min-h-screen p-4">
    <.dm_left_menu active={@current_path}>
      <:menu>...</:menu>
    </.dm_left_menu>
  </aside>
  <main class="flex-1 p-6">
    <%= @inner_content %>
  </main>
</div>

<.dm_page_footer label="© 2026 MyApp" />
组件颜色类名 / 模式
应用栏primary
appbar appbar-primary appbar-sticky
页面背景surface
<body>
上的
bg-surface
侧边栏secondary
bg-secondary text-secondary-content
页脚surface-container-high
bg-surface-container-high
底部导航primary
color="primary"
抽屉secondary
bg-secondary text-secondary-content
应用栏是品牌锚点——始终使用主色调。侧边栏和抽屉使用次要色调，打造与内容区明确区分的导航标识。页面主体始终为surface。页脚使用更高层级的表面实现微妙分隔。
heex
<.dm_appbar title={@page_title} sticky>
  <:logo>...</:logo>
  <:menu to={~p"/dashboard"} active={@active == :dashboard}>Dashboard</:menu>
  <:user_profile><.dm_theme_switcher /></:user_profile>
</.dm_appbar>

<div class="flex">
  <aside class="bg-secondary text-secondary-content w-64 min-h-screen p-4">
    <.dm_left_menu active={@current_path}>
      <:menu>...</:menu>
    </.dm_left_menu>
  </aside>
  <main class="flex-1 p-6">
    <%= @inner_content %>
  </main>
</div>

<.dm_page_footer label="© 2026 MyApp" />

Actions

操作组件

ComponentDefaultWhen to Change
Primary button
variant="primary"
Main page action — one per view
Secondary button
variant="secondary"
Alternative actions
Tertiary button
variant="tertiary"
Accent features, special highlights
Destructive button
variant="error"
Delete, remove, irreversible
Ghost button
variant="ghost"
Toolbar, low-emphasis, cancel
Link button
variant="link"
Inline text actions
Outline button
variant="outline"
Medium emphasis, toggleable
heex
<div class="flex gap-2">
  <.dm_btn variant="ghost">Cancel</.dm_btn>
  <.dm_btn variant="primary">Save Changes</.dm_btn>
</div>
组件默认值变更场景
主按钮
variant="primary"
页面核心操作——每个视图仅一个
次要按钮
variant="secondary"
备选操作
三级按钮
variant="tertiary"
特色功能、特殊高亮
破坏性按钮
variant="error"
删除、移除等不可逆操作
幽灵按钮
variant="ghost"
工具栏、低强调、取消操作
链接按钮
variant="link"
行内文本操作
轮廓按钮
variant="outline"
中等强调、可切换状态
heex
<div class="flex gap-2">
  <.dm_btn variant="ghost">Cancel</.dm_btn>
  <.dm_btn variant="primary">Save Changes</.dm_btn>
</div>

Content

内容组件

ComponentColorNotes
Cardsurface-containerDefault CSS — no class needed
Card (elevated)surface-container-highAdd 
shadow="md"
Modal / Dialogsurface-container-highestHighest elevation
Tooltipprimary
color="primary"
default
Popoversurface-container-high
Accordionsurface-container
Bottom sheetsurface-container-high
Snackbarinverse-surface or type-basedUse 
type
for semantic
组件颜色说明
卡片surface-container默认CSS——无需额外类名
卡片（带阴影）surface-container-high添加
shadow="md"
模态框 / 对话框surface-container-highest最高层级
提示框primary默认
color="primary"
弹出框surface-container-high
折叠面板surface-container
底部面板surface-container-high
Snackbarinverse-surface 或基于类型使用
type
实现语义化

Data Display

数据展示组件

ComponentColorNotes
Badge
variant="primary"
Use 
secondary
/
tertiary
for category differentiation
Chip
color="primary"
Semantic colors for status: 
success
, 
error
Progress
color="primary"
success
for completion, 
error
for limits
Avatar
color="primary"
Initials placeholder color
Statno color
color="primary"
for key metrics only
Timelinesemantic per item
completed
= green, 
active
= primary
Tableno color
zebra
+ 
hover
for readability
组件颜色说明
徽章
variant="primary"
使用
secondary
/
tertiary
区分类别
芯片
color="primary"
状态使用语义色：
success
、
error
进度条
color="primary"
完成状态用
success
，超限用
error
头像
color="primary"
首字母占位符颜色
统计组件无颜色关键指标仅使用
color="primary"
时间线每项使用语义色
completed
=绿色，
active
=主色调
表格无颜色
zebra
+ 
hover
提升可读性

Forms

表单组件

ComponentColorNotes
Inputno colorUses outline border. Set 
color
only for emphasis
Checkbox
color="primary"
Radio
color="primary"
Switch
color="primary"
Selectno color
Slider
color="primary"
Rating
color="primary"
warning
for star ratings
组件颜色说明
输入框无颜色使用轮廓边框，仅在强调场景设置
color
复选框
color="primary"
单选框
color="primary"
开关
color="primary"
选择器无颜色
滑块
color="primary"
评分组件
color="primary"
星级评分用
warning

Feedback

反馈组件

ComponentColorNotes
Alerttype-based
variant="info"
, 
"success"
, 
"warning"
, 
"error"
Flashkind-based
:info
, 
:error
Toasttype-basedAlways set 
type
Loading spinner
variant="primary"
组件颜色说明
提示框基于类型
variant="info"
、
"success"
、
"warning"
、
"error"
消息闪框基于类型
:info
、
:error
吐司提示基于类型需始终设置
type
加载 spinner
variant="primary"

Navigation

导航组件

ComponentColorNotes
AppbarprimaryAlways
Navbarsurface-container-high
navbar-surface-container-high
Tabsno colorActive = primary underline
Breadcrumbon-surface-variantMuted text
Steps
color="primary"
Completed = filled, upcoming = outline
Left menusecondaryActive item = primary-content highlight
组件颜色说明
应用栏primary始终使用
导航栏surface-container-high
navbar-surface-container-high
标签页无颜色激活项用主色调下划线
面包屑on-surface-variant弱化文本
步骤条
color="primary"
已完成=填充，待完成=轮廓
左侧菜单secondary激活项用primary-content高亮

Color Rules

配色规则

Rule 1: No Hardcoded Colors

规则1：禁止硬编码颜色

Never use hex, rgb, hsl, named colors, or Tailwind palette classes (
bg-blue-500
, 
text-slate-600
). All colors from design tokens only.
heex
<%# FORBIDDEN %>
<div style="background: #3b82f6;">
<div class="bg-blue-500 text-white">

<%# CORRECT %>
<div class="bg-primary text-primary-content">
绝不要使用十六进制、rgb、hsl、命名颜色或Tailwind调色板类（
bg-blue-500
、
text-slate-600
）。所有颜色仅使用设计令牌。
heex
<%# 禁止写法 %>
<div style="background: #3b82f6;">
<div class="bg-blue-500 text-white">

<%# 正确写法 %>
<div class="bg-primary text-primary-content">

Rule 2: Pair Background + Text

规则2：背景与文本配对使用

Every background token has a text counterpart. Always use them together.
BackgroundText
bg-primary
text-primary-content
bg-secondary
text-secondary-content
bg-tertiary
text-tertiary-content
bg-surface
text-on-surface
bg-surface-container-*
text-on-surface
bg-primary-container
text-on-primary-container
bg-error
text-error-content
bg-error-container
text-on-error-container
bg-inverse-surface
text-inverse-on-surface
每个背景令牌都有对应的文本令牌，需始终配对使用。
背景文本
bg-primary
text-primary-content
bg-secondary
text-secondary-content
bg-tertiary
text-tertiary-content
bg-surface
text-on-surface
bg-surface-container-*
text-on-surface
bg-primary-container
text-on-primary-container
bg-error
text-error-content
bg-error-container
text-on-error-container
bg-inverse-surface
text-inverse-on-surface

Rule 3: Surface Elevation — Low to High

规则3：表面层级从低到高

Nest surfaces from low to high. Never place lower elevation inside higher.
surface (page)
  ├─ secondary (sidebar, drawer)
  └─ surface-container (card)
       └─ surface-container-high (navbar, popover, elevated card)
            └─ surface-container-highest (dialog, tooltip)
从低到高嵌套表面，绝不要在高层级内放置低层级元素。
surface (页面)
  ├─ secondary (侧边栏、抽屉)
  └─ surface-container (卡片)
       └─ surface-container-high (导航栏、弹出框、带阴影卡片)
            └─ surface-container-highest (对话框、提示框)

Rule 4: Semantic Colors for States Only

规则4：语义色仅用于状态

success
, 
warning
, 
error
, 
info
communicate state — never for decoration or branding.
heex
<%# CORRECT %>
<.dm_alert variant="error">Validation failed</.dm_alert>
<.dm_badge variant="success">Active</.dm_badge>

<%# WRONG %>
<.dm_btn variant="success">Submit</.dm_btn>   <%# Use primary %>
success
、
warning
、
error
、
info
用于传达状态——绝不要用于装饰或品牌标识。
heex
<%# 正确写法 %>
<.dm_alert variant="error">验证失败</.dm_alert>
<.dm_badge variant="success">已激活</.dm_badge>

<%# 错误写法 %>
<.dm_btn variant="success">提交</.dm_btn>   <%# 应使用primary %>

Rule 5: Primary = Brand, Secondary = Support, Tertiary = Accent

规则5：主色调=品牌，次要色调=辅助，第三色调=强调

RolePurposeExamples
PrimaryBrand identity, main actions, key focusAppbar, main CTA, active nav
SecondarySupporting actions, alternative emphasisSecondary CTA, toggles
TertiarySpecial highlights, decorative accentsFeature badges, accent cards
角色用途示例
主色调品牌标识、核心操作、关键焦点应用栏、主CTA、激活导航项
次要色调辅助操作、备选强调次要CTA、切换按钮
第三色调特殊高亮、装饰性强调功能徽章、强调卡片

Rule 6: One Primary Action Per View

规则6：每个视图仅一个主操作

One 
variant="primary"
button per visible section. Supporting actions use 
secondary
, 
ghost
, or 
outline
.
每个可见区域仅保留一个
variant="primary"
按钮。辅助操作使用
secondary
、
ghost
或
outline
。

Rule 7: Icons Inherit Color

规则7：图标继承颜色

dm_mdi
and 
dm_bsi
default to 
currentcolor
. Do not set explicit 
color=
unless the icon must differ from surrounding text.
dm_mdi
和
dm_bsi
默认使用
currentcolor
。除非图标必须与周围文本颜色不同，否则不要设置显式
color=
。

Rule 8: Container Colors for Soft Emphasis

规则8：容器色用于柔和强调

Use 
primary-container
/ 
on-primary-container
for tinted backgrounds with lower contrast. Good for featured sections, highlight cards, selected states.
heex
<div class="bg-primary-container text-on-primary-container p-4 rounded-lg">
  Featured content with softer emphasis
</div>
使用
primary-container
/ 
on-primary-container
实现低对比度的 tinted 背景，适用于特色区块、高亮卡片、选中状态。
heex
<div class="bg-primary-container text-on-primary-container p-4 rounded-lg">
  带有柔和强调的特色内容
</div>

Typography

排版

Font Strategy

字体策略

DuskMoon does not prescribe a typeface — projects choose their own. Rules:
  • Pick a distinctive display font for headings — avoid Inter, Roboto, Arial, system-ui. Load from Google Fonts or self-host.
  • Pair with a clean body font that complements the display choice.
  • Use a monospace font for code blocks — JetBrains Mono, Fira Code, or similar.
  • Define fonts as CSS variables, not inline.
css
/* Project CSS — after DuskMoon imports */
:root {
  --font-display: 'Instrument Serif', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body { font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); }
code, pre { font-family: var(--font-mono); }
DuskMoon不指定字体——项目可自行选择。规则：
  • 为标题选择独特的显示字体——避免Inter、Roboto、Arial、system-ui。从Google Fonts加载或自行托管。
  • 搭配简洁的正文字体，与显示字体互补。
  • 为代码块使用等宽字体——JetBrains Mono、Fira Code或类似字体。
  • 将字体定义为CSS变量，而非内联设置。
css
/* 项目CSS —— 在DuskMoon导入之后 */
:root {
  --font-display: 'Instrument Serif', serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

body { font-family: var(--font-body); }
h1, h2, h3 { font-family: var(--font-display); }
code, pre { font-family: var(--font-mono); }

Type Scale

字体层级

ElementClassUsage
Page title
text-3xl font-bold
One per page
Section heading
text-2xl font-semibold
Card title
text-lg font-semibold
Body text
text-base
Default
Secondary text
text-sm text-on-surface-variant
Muted supporting info
Caption
text-xs text-on-surface-variant
Timestamps, metadata
元素类名用途
页面标题
text-3xl font-bold
每页一个
区块标题
text-2xl font-semibold
卡片标题
text-lg font-semibold
正文文本
text-base
默认
次要文本
text-sm text-on-surface-variant
弱化的辅助信息
说明文字
text-xs text-on-surface-variant
时间戳、元数据

Text Color Hierarchy

文本颜色层级

PriorityTokenUsage
Primary text
text-on-surface
Headings, body text, labels
Secondary text
text-on-surface-variant
Descriptions, hints, timestamps
Disabled text
text-on-surface-variant
with 
opacity-50
Disabled states
Link text
text-primary
Clickable inline text
优先级令牌用途
主文本
text-on-surface
标题、正文、标签
次要文本
text-on-surface-variant
描述、提示、时间戳
禁用文本
text-on-surface-variant
搭配 
opacity-50
禁用状态
链接文本
text-primary
可点击的行内文本

Layout Composition

布局构成

Spatial Principles

空间原则

  • Content pages: Generous whitespace — 
    p-6
    or 
    p-8
    on main, 
    gap-6
    between cards
  • Data views: Dense spacing — 
    p-4
    on main, 
    gap-3
    between items
  • Consistent gaps: Pick one scale per view (
    gap-4
    or 
    gap-6
    , not mixed)
  • Max width: Content areas should constrain width — 
    max-w-7xl mx-auto
    for wide, 
    max-w-3xl
    for text-heavy
  • 内容页：宽松留白——主容器使用
    p-6
    或
    p-8
    ，卡片间使用
    gap-6
  • 数据视图：密集排版——主容器使用
    p-4
    ，元素间使用
    gap-3
  • 统一间距：每个视图选择一种间距尺度（
    gap-4
    或
    gap-6
    ，不要混合使用）
  • 最大宽度：内容区域应限制宽度——宽屏内容用
    max-w-7xl mx-auto
    ，文本密集内容用
    max-w-3xl

Card Grid

卡片网格

heex
<div class="grid grid-cols-auto-fit-80 gap-6">
  <.dm_card :for={item <- @items}>
    <:title><%= item.name %></:title>
    <%= item.description %>
  </.dm_card>
</div>
heex
<div class="grid grid-cols-auto-fit-80 gap-6">
  <.dm_card :for={item <- @items}>
    <:title><%= item.name %></:title>
    <%= item.description %>
  </.dm_card>
</div>

Sidebar + Content

侧边栏+内容布局

heex
<div class="flex min-h-screen">
  <aside class="bg-secondary text-secondary-content w-64 border-r border-outline-variant p-4 shrink-0">
    <.dm_left_menu active={@current_path} />
  </aside>
  <main class="flex-1 bg-surface p-6 overflow-auto">
    <%= @inner_content %>
  </main>
</div>
heex
<div class="flex min-h-screen">
  <aside class="bg-secondary text-secondary-content w-64 border-r border-outline-variant p-4 shrink-0">
    <.dm_left_menu active={@current_path} />
  </aside>
  <main class="flex-1 bg-surface p-6 overflow-auto">
    <%= @inner_content %>
  </main>
</div>

Stacked Sections with Depth

带深度的堆叠区块

heex
<section class="bg-surface-container-low p-8 rounded-2xl">
  <h2 class="text-2xl font-semibold mb-6">Featured</h2>
  <div class="grid grid-cols-3 gap-4">
    <.dm_card shadow="md">...</.dm_card>
    <.dm_card shadow="md">...</.dm_card>
    <.dm_card shadow="md">...</.dm_card>
  </div>
</section>
heex
<section class="bg-surface-container-low p-8 rounded-2xl">
  <h2 class="text-2xl font-semibold mb-6">Featured</h2>
  <div class="grid grid-cols-3 gap-4">
    <.dm_card shadow="md">...</.dm_card>
    <.dm_card shadow="md">...</.dm_card>
    <.dm_card shadow="md">...</.dm_card>
  </div>
</section>

Backgrounds & Depth

背景与深度

Surface Layering

表面分层

Don't use flat pages. Build depth with surface tokens:
heex
<body class="bg-surface text-on-surface">
  <header class="bg-primary text-primary-content">...</header>
  <div class="bg-surface-container-low -mt-8 pt-12 pb-8 rounded-t-3xl">
    <div class="max-w-6xl mx-auto px-6">
      <.dm_card shadow="lg" class="bg-surface-container">
        ...
      </.dm_card>
    </div>
  </div>
</body>
不要使用扁平化页面。使用表面令牌构建深度：
heex
<body class="bg-surface text-on-surface">
  <header class="bg-primary text-primary-content">...</header>
  <div class="bg-surface-container-low -mt-8 pt-12 pb-8 rounded-t-3xl">
    <div class="max-w-6xl mx-auto px-6">
      <.dm_card shadow="lg" class="bg-surface-container">
        ...
      </.dm_card>
    </div>
  </div>
</body>

Hero Sections

Hero区块

Use container color gradients for hero areas:
css
.hero {
  background: linear-gradient(
    135deg,
    var(--color-primary-container) 0%,
    var(--color-tertiary-container) 100%
  );
}
为Hero区域使用容器色渐变：
css
.hero {
  background: linear-gradient(
    135deg,
    var(--color-primary-container) 0%,
    var(--color-tertiary-container) 100%
  );
}

Scrim & Overlays

遮罩与覆盖层

css
.overlay {
  background-color: hsl(var(--color-scrim) / 0.5);
  backdrop-filter: blur(4px);
}
css
.overlay {
  background-color: hsl(var(--color-scrim) / 0.5);
  backdrop-filter: blur(4px);
}

Borders & Dividers

边框与分隔线

  • outline-variant
    → subtle dividers, decorative borders
  • outline
    → interactive borders (inputs, focused states)
heex
<hr class="border-outline-variant" />
<div class="border border-outline rounded-lg">Interactive element</div>
  • outline-variant
    → 微妙分隔线、装饰性边框
  • outline
    → 交互式边框（输入框、聚焦状态）
heex
<hr class="border-outline-variant" />
<div class="border border-outline rounded-lg">交互式元素</div>

Motion & Transitions

动效与过渡

Theme Transition

主题过渡

css
* {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
css
* {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

Card Hover

卡片悬停效果

css
.interactive-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.interactive-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
css
.interactive-card {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.interactive-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

Reduced Motion

减少动效

Always respect user preference:
css
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
始终尊重用户偏好：
css
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

Motion Principles

动效原则

  • One transition property per interaction — don't animate everything
  • Page-level animations on route change (LiveView transitions)
  • Subtle hover states on cards and buttons — 
    translateY(-2px)
    max
  • Loading states use 
    dm_loading_spinner
    or skeleton components — no custom spinners
  • 每次交互仅设置一个过渡属性——不要动画所有元素
  • 路由切换时添加页面级动画（LiveView过渡）
  • 卡片和按钮添加微妙悬停状态——最多
    translateY(-2px)
  • 加载状态使用
    dm_loading_spinner
    或骨架组件——不要自定义spinner

Anti-Patterns

反模式

  1. Tailwind color scale — No 
    bg-blue-500
    , 
    text-gray-600
    . Breaks theme switching.
  2. Hardcoded colors — No hex, rgb, hsl, or named colors.
  3. Opacity faking surfaces — No 
    bg-white/80
    . Use 
    surface-container-*
    tokens.
  4. Inline color styles — No 
    style="color: ..."
    .
  5. Raw HTML over components — Use 
    dm_*
    components when available.
  6. Uniform primary everywhere — One primary action per view. Supporting actions recede.
  7. Semantic colors as decoration — 
    success
    /
    error
    /
    warning
    /
    info
    are for states only.
  8. Generic fonts — No Inter, Roboto, Arial as conscious choices. Pick distinctive typefaces.
  9. Missing text pairing — Every 
    bg-*
    needs its 
    text-*-content
    or 
    text-on-*
    .
  10. Flat layouts — Use surface elevation for depth. Pages should never feel like a single flat plane.
  11. Timid color usage — A dominant primary with sharp accents outperforms evenly-distributed, wishy-washy palettes. Commit to the hierarchy.
  12. Cookie-cutter pages — Each view type (dashboard, form, content, marketing) should have a distinct spatial composition. Don't copy-paste the same layout everywhere.
  1. 使用Tailwind颜色刻度——禁止
    bg-blue-500
    、
    text-gray-600
    ，会破坏主题切换功能。
  2. 硬编码颜色——禁止使用十六进制、rgb、hsl或命名颜色。
  3. 用透明度模拟表面——禁止
    bg-white/80
    ，使用
    surface-container-*
    令牌。
  4. 内联颜色样式——禁止
    style="color: ..."
    。
  5. 原生HTML替代组件——可用
    dm_*
    组件时优先使用。
  6. 全局使用主色调——每个视图仅一个主操作，辅助操作需弱化。
  7. 语义色用于装饰——
    success
    /
    error
    /
    warning
    /
    info
    仅用于状态。
  8. 通用字体——不要刻意选择Inter、Roboto、Arial，需挑选独特字体。
  9. 缺失文本配对——每个
    bg-*
    需搭配对应的
    text-*-content
    或
    text-on-*
    。
  10. 扁平化布局——使用表面层级打造深度，页面不应是单一平面。
  11. 保守的颜色使用——主色调主导搭配鲜明强调色，优于均匀分布的模糊调色板，需明确层级。
  12. 千篇一律的页面——每种视图类型（仪表盘、表单、内容、营销）应有独特的空间布局，不要到处复制粘贴相同布局。