fastht.ml 网站预览
fastht.ml 网站预览

fastht.ml

明暗对比、胶囊形控件与圆角卡片。

页面兼有浅色与深色区域。字体采用 Geist、Geist Mono。视觉特点包括胶囊形控件、圆角卡片、紧密字距、单栏阅读排版。适合参考的场景：开发者工具官网、API 服务介绍页。

查看原始网站

使用规范

建议采用

  • 每个按钮、导航、标签和胶囊控件都采用9999px圆角。
  • 任何需要像实体贴纸的交互元素，都采用白色内高光加深色投影的两层浮雕阴影。
  • 满幅色带纵向交替，先浅色画布，再深色，再饱和色，而非在一个背景上内缩排列彩色卡片。
  • 正文采用Geist 400，UI控件500，绝不要高于500字重。
  • 展示字号采用紧密负letter-spacing，72px时为-0.015em，向正文字号逐步趋近0。
  • 首屏内容周围，以absolute positioning放置3–5个超大彩纸装饰形状，包括圆、圆角矩形和胶囊，颜色采用Sticker Green、Yellow、Pink和Periwinkle Violet。
  • 所有代码块采用Geist Mono 14px和1.8行高；关键词使用网站强调色。

建议避免

  • 不要引入彩色CTA；主要操作始终为黑色填充，唯一操作色是#000000。
  • 按钮不要采用方形或4px圆角；每个交互形状都是胶囊或16–24px宽松圆角矩形。
  • 卡片不要置于层叠中性灰上；它们位于硬朗色块上，或平贴白色画布。
  • 不要使用衬线、手写或展示字体；只能采用Geist和Geist Mono。
  • 正文行高不要低于1.4，代码行高不要低于1.6；宽松间距是贴纸包阅读体验的一部分。
  • #7575f0（Periwinkle Violet）不要作为小强调；它是分区级满幅背景色，而非小设计变量。
  • FAQ卡片或代码演示卡片不要添加投影；它们通过下方色块分隔，而非抬升。

相似设计语言