Buymeacoffee

暖白色基底、胶囊形控件与大字排版。
页面以暖白色为基底,搭配近黑色文字。字体采用 Circular Bold、Circular Medium。视觉特点包括胶囊形控件、大字排版、紧密字距、居中构图。适合参考的场景:SaaS 产品官网、功能介绍页。
查看原始网站使用规范
建议采用
- 使用 #faf8f0 作为全页面背景色 — 每个屏幕都应像白卡置于奶油纸之下
- #ffdd00只用于面向创作者的“创建我的页面”或“注册”行动按钮;其他任何地方都不应出现这种黄色。
- #d8573f只用于支持者的付款操作,例如“支持$3”;绝不能用于导航、链接或信息元素。
- 所有按钮、标签和胶囊输入控件均设置 9999px 圆角 — 胶囊形状是系统的标志性交互形式
- 首屏和显示标题使用 Circular Bold 64-96px,字间距在 -2.7px 至 -4.0px 之间 — 紧凑的字间距使大字号显得庄严
- 所有浮动卡片和模态框均使用三层阴影堆叠(2px 近距模糊 + 40px 环境模糊 + 5px 中等模糊)——这是系统的唯一阴影配方
- 节段标签使用大写 Circular Bold 12px,字间距为 0.125em — 稍宽的小型大写字母是系统在节段分隔中的典型字体特征
建议避免
- 不要将 #ffdd00 或 #d8573f 用于正文、链接、边框或装饰填充 — 这些仅限于操作场景
- 不要为卡片或按钮使用锐利边角(0-4px 圆角) — 系统要求宽泛的圆角(至少 8px,卡片推荐 24px 以上)
- 不要使用彩色阴影或高光 — 所有层级感均来自中性黑色透明的三层堆叠
- 不要引入超出金黄、红陶和粉边之外的其他强调色 — 色彩方案刻意限定为双色(加上温暖的奶油)
- 正文文字大小不要低于 14px 或高于 18px — 读取范围由设计决定为狭窄
- 长篇正文不要使用粗体或Black字重;段落以Circular Regular或Book、14-16px为标准。
- 不要用纯白色区块填满奶油背景 — 应交替使用奶油色条带与白色卡片,而非奶油 → 白色 → 奶油