配色令牌
全部颜色以 oklch 定义在 :root，并通过 @theme inline 映射为 Tailwind 类名。组件中禁止出现 text-white / bg-[#…] 之类的硬编码颜色。
--background
页面底色（深海军蓝）
--foreground
主文字色
--primary
主色 · 青绿，用于强调与 CTA
--violet
渐变末端紫，仅作装饰
--accent
点缀色 · 琥珀，用于高亮标记
--surface
卡片 / 分区底色
--surface-elevated
浮层、下拉菜单
--secondary
次级按钮与标签底色
--muted
弱化区块底色
--muted-foreground
次级文字色
--destructive
错误、危险操作
--border
描边（白色 10% 透明度）
/* src/styles.css */
:root {
--primary: oklch(78% 0.17 175);
--violet: oklch(65% 0.24 310);
}
/* 组件中使用 */
<div className="bg-surface text-muted-foreground border border-border" />渐变与阴影
品牌渐变为青绿 → 紫（135°），用于主 CTA、Logo 与标题关键词；辉光阴影仅用于交互焦点，避免整页滥用。
bg-gradient-vanguard
主 CTA 按钮、Logo 方块、强调条
text-gradient-vanguard
标题中的渐变关键词
shadow-glow-teal
主按钮悬浮辉光
shadow-glow-purple
浮层、下拉菜单辉光
grid-bg
Hero 背景网格纹理
<h1 className="font-display text-5xl font-bold">
AI-Native <span className="text-gradient-vanguard">五层架构</span>
</h1>
<button className="rounded-full bg-gradient-vanguard px-6 py-3
text-primary-foreground shadow-glow-teal">申请试用</button>字体与排版
标题使用 Syne（font-display），正文使用 Inter + Noto Sans SC（默认 font-sans）。字体通过根路由的 <link> 加载，不在 CSS 中 @import 远程地址。
Display / H1
页面主标题，仅一个 H1
美国股权众筹材料生成 · Reg-CF Ready
Section / H2
分区标题
美国股权众筹材料生成 · Reg-CF Ready
Card / H3
卡片标题
美国股权众筹材料生成 · Reg-CF Ready
Body
正文与说明文字
美国股权众筹材料生成 · Reg-CF Ready
Eyebrow
分区上方的英文小标
美国股权众筹材料生成 · Reg-CF Ready
<div className="text-xs uppercase tracking-[0.25em] text-primary">Architecture</div>
<h2 className="font-display text-3xl font-bold">五层架构</h2>
<p className="mt-3 text-sm leading-relaxed text-muted-foreground">说明文字…</p>基础组件
基于 shadcn/ui，全部继承上方令牌。需要新样式时优先扩展组件变体，而不是在页面中堆叠工具类。
Button
<Button variant="secondary" size="lg">次级</Button>Badge
默认
次级
描边
风险
<Badge variant="outline">V1.0</Badge>Card
五大平台文档引擎
与持牌众筹门户完成 API 对接，实现项目元数据双向同步。
草稿推送 · 状态同步 · 募资统计回写
<Card>
<CardHeader>
<CardTitle>标题</CardTitle>
<CardDescription>描述</CardDescription>
</CardHeader>
<CardContent>内容</CardContent>
</Card>表单控件
<Label htmlFor="email">邮箱</Label>
<Input id="email" type="email" placeholder="you@company.com" />Alert / Progress / Separator
合规提示
AI 输出仅为草稿，须经属地证券律师审核后方可对外发行。
募资进度62%
Separator 用于分隔同级信息块。
Tabs
草稿推送、状态同步、募资统计同步。
<Tabs defaultValue="api">
<TabsList><TabsTrigger value="api">API</TabsTrigger></TabsList>
<TabsContent value="api">内容</TabsContent>
</Tabs>站点专有模式
官网各页面复用的三种版式：分区 Hero、内容卡片、主 CTA 按钮。新增页面时直接沿用，保持视觉一致。
内容卡片（列表页通用）
平台适配器层
隔离外部平台接口差异，对外输出统一标准化数据模型。
- 双向字段映射
- 独立限流与熔断
按钮组（页面底部 CTA）
申请试用次级操作
<Link to="/contact" className="group inline-flex items-center gap-2 rounded-full
bg-gradient-vanguard px-6 py-3 text-sm font-medium text-primary-foreground
shadow-glow-teal transition-transform hover:scale-[1.02]">
申请试用 <ArrowRight className="h-4 w-4" />
</Link>PageHero（每个内容页顶部）
统一使用 @/components/PageHero，传入 eyebrow / title / description，可选 children 追加提示条或锚点。
<PageHero
eyebrow="Architecture"
title={<>AI-Native <span className="text-gradient-vanguard">五层架构</span></>}
description="说明文字…"
/>Icon（后台可配置图标）
内容来自后台 CMS，图标以字符串形式存储，页面统一通过 <Icon name="Globe" /> 渲染，未知名称回落到 Sparkles。
<Icon name={m.icon} className="h-5 w-5 text-primary" />图标库
后台内容管理中可选的图标集合（Lucide）。新增图标需同步登记到 src/data/site.ts 的 iconMap。
Boxes
Building2
Cpu
Database
FileText
Globe
HelpCircle
Layers
LineChart
Lock
Radar
Rocket
ShieldCheck
Sparkles
Users
Workflow
Zap