Retro Blue
默认色板
在顶栏中切换内置颜色主题。本页面使用语义化 CSS 变量,因此控件和表面会在不更改组件结构的情况下更新。
默认色板
黑白极简色板
植物色板
暖色羊皮纸色板
创作者经济色板
技术中性色板
柔和漫画色板
深色粉彩色板
淡蓝产品色板
红色行动色板
活动主题调色板、中性色阶、背景色和文字颜色。
主色
当前值
--color-primary
主色强调
当前值
--color-primary-strong
主色浅色
当前值
--color-primary-light
强调色
当前值
--color-accent
50
#f7f9fc
100
#edf1f8
200
#dfe4ed
300
#c5cedb
400
#92a1b7
500
#677487
600
#4f5a6d
700
#3f4a5a
800
#2c3542
900
#19222f
950
#10161f
背景主色
--color-bg-primary
背景次色
--color-bg-secondary
背景浅色
--color-bg-primary-light
暗色背景
--color-bg-primary-dark
暗色次背景
--color-bg-secondary-dark
主文字
当前值
--color-text-primary
次文字
当前值
--color-text-secondary
辅助文字
当前值
--color-text-tertiary
字体族、字号比例和字重变体。
--font-brand (Noto Sans SC)
品牌字体
--font-sans (Noto Sans SC)
正文
Display — 48px / 400
标题
Heading 1 — 36px / 400
主标题
Heading 2 — 28px / 400
章节标题
Heading 3 — 20px / 600
小节标题
Body — 16px / 400
天地玄黄,宇宙洪荒。日月盈昃,辰宿列张。一个简洁、快速、可复用的 Astro 启动模板,使用 Tailwind CSS 构建。
Body Small — 14px / 400
用于描述和次要内容的辅助文字。
Caption — 12px / 400
时间戳、元数据和附加说明。
主要、次要、描边和禁用变体,多种尺寸。
多种变体和尺寸的状态标签。
基础卡片、功能卡片和内容卡片样式。
带有边框、背景和内边距的简单卡片。
带图标、悬停升起效果和阴影。
带图片占位符,类似博客卡片。
输入框、选择框、文本域和开关。
章节头部、页面头部和分隔线。
site-container (max-width: 1200px)
Inner content (max-width: 672px)
悬停效果和过渡动画演示。
可折叠的内容面板。
模板中使用的 Lucide 图标集。