CamThink 网页规范基准

一、字号与字重

以下为三端实际渲染效果，左侧标注用途与精确像素值。

电脑 · 1920 宽

大标题48px 粗体h1

大标题

二级标题38px 半粗h2

二级标题

三级标题28px 中等h3

三级标题

标题说明20px 中等p

标题下的说明文字

正文16px 常规

正文内容示例文字

小字14px 常规

辅助说明、次要信息

标签字12px 常规

TAG · 时间 · 来源

平板 · 1024–1280 宽

大标题40px 粗体h1

大标题

二级标题30px 半粗h2

二级标题

三级标题24px 中等h3

三级标题

标题说明22px 中等

标题下的说明文字

正文16px 常规

正文内容示例文字

小字14px 常规

辅助说明、次要信息

标签字12px 常规

TAG · 时间 · 来源

手机 · 设计稿 750 宽

大标题32px 粗体h1

大标题

二级标题24px 半粗h2

二级标题

三级标题20px 中等h3

三级标题

标题说明18px 中等

标题下的说明文字

正文16px 常规

正文内容示例文字

小字14px 常规

辅助说明、次要信息

标签字12px 常规

TAG · 时间 · 来源

二、页面间距

Section 内边距与内容区最大宽度示意。

Section 内边距 · 电脑 / 平板

内容区
左右 64px · 上下 80px

Section 内边距 · 手机

内容区
左右 20px · 上下 48px

端	大标题距上一屏	设计稿页面边距（1920 画布）
电脑	96px	176px
平板	80px	96px
手机	64px	32px

内容区最大宽度

普通页面 · 1600px

博客正文 · 1100px

三、圆角

按钮 · 6px

卡片外层 · 4px

卡片内层 · 8px

四、颜色

品牌色

亮橙色#f24a00
主品牌、按钮、强调

深空灰#1e1e1e
深色背景

白色页面

页面底色#f9f9f9

大标题#333333

正文 / 说明#666666

卡片背景#ffffff

卡片边框#dbdbdb

黑色页面

大标题 #ffffff

说明文字 #dbdbdb

正文 #a1a1a1 · 强调 #f24a00

渐变

暖色三色

橙 → 浅黄

橙 → 红

五、按钮

圆角 6px · 标准字号 16px · 图标 16×16px · 图标与文字间距 8px

按钮类型

主按钮背景 #f24a00 · 文字 #ffffff
内边距 32×16px

次级按钮透明底 · 描边 1px #f24a00
内边距 32×16px

危险按钮背景 #e40000 · 文字 #ffffff
内边距 32×16px

文字按钮透明底 · 文字 #333333
内边距 32×16px

深色页描边按钮半透明白底 · 白字 · 描边 1px
内边距 32×16px

文字链接品牌橙 · 默认下划线 · 16px

文字链接示例

品牌 CTA 链接半粗 · 品牌橙 · 下划线 · 16px

了解更多 →

按钮尺寸

标准
左右 32px · 上下 16px · 16px 字

紧凑
左右 16px · 上下 8px · 16px 字

最小
左右 16px · 上下 8px · 12px 字

纯图标
36×36px

手机端标准按钮缩小为：左右 16px · 上下 8px