主色、灰阶、背景色和文本色。
主品牌蓝
#2d6dc3
--color-primary
强调蓝
#0066ff
--color-primary-strong
浅蓝
#8fb9ff
--color-primary-light
强调金
#fad13b
--color-accent
50
#f7f9fc
100
#edf1f8
200
#dfe4ed
300
#c5cedb
400
#92a1b7
500
#677487
600
#4f5a6d
700
#3f4a5a
800
#2c3542
900
#19222f
950
#10161f
浅色页面底
#fdfaf5
浅色卡片底
#ffffff
浅色内容底
#faf9f5
深色页面底
#0b1220
深色卡片底
#0f1b2d
主文本
#2d6dc3
--color-text-primary
正文文本
#3f4a5a
--color-text-secondary
辅助文本
#7a6550
--color-text-tertiary
字体族、字号层级和字重示例。
--font-brand (Source Han Sans SC)
发布一个像样的 SaaS
--font-sans (Source Han Sans SC)
清晰耐读的正文
Display — 48px / 700
展示标题
Heading 1 — 36px / 700
主标题
Heading 2 — 28px / 700
区块标题
Heading 3 — 20px / 600
小节标题
Body — 16px / 400
一套清晰、快速、可复用的 SaaS 模板，基于 Astro 和 Tailwind CSS 构建。
Body Small — 14px / 400
用于说明文字、辅助信息和次级内容。
Caption — 12px / 400
用于时间、元信息和细则说明。
主按钮、次按钮、描边和禁用状态，以及不同尺寸。
状态标签、内容标签，以及不同类型和尺寸。
基础卡片、功能卡片和内容卡片样式。
包含边框、背景和内边距的基础容器。
包含图标、悬浮抬升和轻微阴影。
带图片区域，适合 Blog 卡片一类内容。
输入框、下拉选择、文本域和切换控件。
SectionHeader、PageHeader 和分隔线示例。
site-container (max-width: 1200px)
Inner content（max-width: 672px）
滚动入场、悬浮反馈和过渡效果示例。
fade-up-sm
fade-left-sm
fade-up-xs
可折叠的内容面板。
模板中使用的 Lucide 图标集合。