Buymeacoffee
暖白色基底、胶囊形控件与大字排版。
HoneyBook
浅色基底、胶囊形控件与衬线字形。
页面以浅色为基底，搭配近黑色文字。字体采用 STK Bureau Serif、STK Bureau Sans。视觉特点包括胶囊形控件、衬线字形、网格布局、单栏阅读排版。适合参考的场景：SaaS 产品官网、功能介绍页。
查看原始网站使用规范
建议采用
- 所有交互按钮和标签胶囊均使用 border-radius: 9999px——完全圆润的形状是该系统的最具识别度元素。
- 将标题显示文字设置为 STK Bureau Serif 48–64px 字号，字间距在 -0.027em 到 -0.05em 之间；紧致的衬线块是编辑风格的标志性特征。
- 在每个主要章节标题上方精确使用全大写 STK Gerhard 14px 眉间标签（+0.071em 字间距），每节仅出现一次。
- 使用 #fffa77 作为满幅横幅/首屏背景色块；绝不作为小范围内联装饰使用——其力量在于大面积的纯色填充。
- 所有主要行动按钮和正文文本均使用 Inkwell（#142127）填充；该颜色在白色和黄色背景上均提供 16:1 以上的对比度。
- 产品界面表面保持 Paper White（#ffffff）底色，并搭配 1px River Mist（#c7d5d9）边框；避免卡片使用阴影。
- 保持主要区块之间 80px 的垂直间距，卡片内部填充 24px。
建议避免
- 不要在卡片、按钮或导航栏上使用阴影——该系统依赖 1px 边框和色彩对比来实现分隔。
- 不要将黄色用于小尺寸 UI 元素（徽章、点状标记、图标背景）；黄色仅在首屏/横幅尺度下有效。
- 不要在展示尺寸下使用 STK Bureau Sans；仅将无衬线字体用于 32px 及以下，让衬线字体主导大尺寸展示场景。
- 不要在单个组件组内混合半径值——按钮始终为 9999px，卡片始终为 20px 或 10px，绝不用 16px。
- 不要使用渐变；该系统严格采用纯色块——即使首屏的黄色也必须是实心填充。
- 不要将透明描边胶囊用于主要操作；深色填充应保留给单个页面中最关键的操作。
- 不要打破衬线与无衬线字体的搭配关系——切勿用衬线字体用于正文，或用无衬线字体用于标题显示；这种语调对比是系统的灵魂。
