S4 学员专属 · 北美华人 Claude AI 课程 · Session 4 赠品 导入 Claude Design → Projects → 选 Claude Cowork → Claude Design → Design System
DESIGN SYSTEM — 北极星 / POLARIS

精密极简网格

湾区华人财务顾问网站的设计规范。纯白底、无衬线粗标题、等宽标签、深蓝点缀、直角与 1px 硬网格线——冷静、精确,贴合工程师审美。

使用方法:把这份文件放进你的项目目录,在 Claude Code 里执行 import(步骤见 Step 2)。之后 Claude Code 生成的任何页面都会自动参照这里的颜色 / 字体 / 间距规范,不需要重复说明。

01 — 色彩 TOKENS
Primary · 主色
#1B3A5B
深蓝。CTA 按钮、强调数字、标签描边、序号编号。全站唯一高饱和色。
hover · #142B45
Ink · 墨黑
#17211C
正文与标题文字色,也是所有 1px 网格线、边框、深色 CTA 区块的底色。
Surface · 暖白
#FAF8F3
交替区块底色(痛点、定价),与纯白 #FFFFFF 主背景形成节奏。
背景 · #FFFFFF
Secondary · 浅蓝
#9DB4CE
深色区块上的次级文字与标签(如深蓝定价卡内的 mono 标注)。
主文字 · 100%
#17211C
正文次级 · 62–68%
rgba(23,33,28,.64)
标注 / 元信息 · 50%
rgba(23,33,28,.5)
02 — 字体规范
Noto Sans SC
全站唯一正文/标题字体。四个字重:400 正文 · 500 按钮与导航 · 700 卡片小标题 · 900 大标题。中英文统一,不引入衬线体。
ui-monospace
系统等宽字(Menlo / SF Mono)。用于所有标签、序号、区块编号、日期与阅读时间、导航项、logo。这是本系统「精密感」的关键,永远配 letter-spacing。
大标题 H1 900 · clamp(40–88px) · ls -.025em
区块标题 H2 900 · clamp(30–50px) · ls -.02em
卡片标题 H3 700 · 19–22px
正文 Body 400 · 14–19px · lh 1.6
标签 / 编号 LABEL mono · 11–13px · ls .06–.16em
03 — 间距规律
1140
内容最大宽度
max-width 居中,两侧 padding 28px。
78
区块纵向 padding
每个 section 上下 78px(首屏 72px)。
34/30
卡片内边距
痛点/定价卡 34×30,文章卡 28×26。
20/1
网格间隙
独立卡片 gap 20px;连体网格 gap 1px(露黑线)。

核心节奏是 4 的倍数:常用步长 4 / 8 / 12 / 16 / 22 / 28 / 34 / 44 / 78。标题下 margin 多为 16–22px,段落间 18px。

04 — 组件规则
按钮 · Button
主按钮 → 次按钮 导航 CTA
规则 直角(radius 0)· 字重 500 · 主按钮实心深蓝、hover 转 #142B45 · 次按钮白底黑框、hover 反色填黑 · 箭头统一用「→」不用图标。
卡片 · Card
标签
卡片标题示例
摘要两行截断,正文次级色。
01
连体网格卡
共享 1px 黑线分隔,无独立圆角。
规则 直角 · 两种描边:独立卡 rgba(23,33,28,.14)、连体网格用 #17211C 硬线(靠 gap:1px + 深底露出)· 无阴影 · hover 时描边转深蓝 · 序号/标签一律 mono。
导航与页脚 · Nav / Footer
北极星 / POLARIS
痛点 资源 预约咨询
北极星 / POLARIS © 2026 · 仅供教育参考,不构成投资建议
规则 sticky 顶栏、半透明白底 + blur、底部 1px 黑线 · logo 用 mono 大写「北极星 / POLARIS」· 导航项 mono 小字 + letter-spacing · 唯一实心按钮是「预约咨询」· 页头页脚全站逐字一致。