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。

区块纵向 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

标签

卡片标题示例

摘要两行截断，正文次级色。

连体网格卡

共享 1px 黑线分隔，无独立圆角。

规则　直角 · 两种描边：独立卡 rgba(23,33,28,.14)、连体网格用 #17211C 硬线（靠 gap:1px + 深底露出）· 无阴影 · hover 时描边转深蓝 · 序号/标签一律 mono。

导航与页脚 · Nav / Footer

北极星 / POLARIS

痛点资源预约咨询

规则　sticky 顶栏、半透明白底 + blur、底部 1px 黑线 · logo 用 mono 大写「北极星 / POLARIS」· 导航项 mono 小字 + letter-spacing · 唯一实心按钮是「预约咨询」· 页头页脚全站逐字一致。