Ghost 网站预览
Ghost 网站预览

Ghost

无边白纸上的宏大文字。

Ghost 仅凭文字就能发出强烈声音:72–96px 的宏大 Inter Display 标题,以字重 600 和 -0.025em 字间距主导白色画布,随后切换为 InterVariable,呈现紧凑、实用的正文。页面在两种鲜明模式之间交替:明亮白色的编辑区块配有巨大标题,而产品与仪表盘区块则采用近黑色 #15171a,并展示鲜明的紫粉色图表渐变。唯一的彩色强调是电光青柠色 #d1ff19,在无彩色骨架上点缀链接和强调内容;暖琥珀色胶囊 #fec137 则负责公告标签。组件柔和而亲切,主要控件使用 24px 圆角,卡片使用 8px,并通过 alpha 为 0.1 的多层阴影暗示轻盈的悬浮感。节奏具有编辑设计感:巨大的标题、宽裕的垂直呼吸空间,以及居中或左对齐的内容叠放;深色产品卡片为白色营销画布提供视觉对照。

查看原始网站

使用规范

建议采用

  • 首屏标题使用 InterDisplay,字重为 600,字号为 72–96px,字间距为 -0.025em。超大文字是品牌最主要的视觉标志。
  • Voltage Lime #d1ff19 只在深色表面 #15171a 上用于链接和强调。它是深色模式强调色,而不是浅色模式颜色。
  • 所有主要按钮使用 24px 圆角,所有胶囊和标签使用 9999px。24px 的按钮圆角具有鲜明特征,不应缩减为 4px 或 8px。
  • 主要操作按钮和深色区块背景都使用近黑色 #15171a,而非 #000000。轻微的暖意避免了纯黑在白底上的生硬感。
  • 琥珀色胶囊采用 #fec137 填充和 #112220 文字,仅用于首屏标题上方的公告与发布徽章。
  • 区块间距设为 64px,元素间距设为 16px。区块之间宽裕的垂直呼吸空间,让页面具有编辑设计感,而非密集感。
  • 所有正文都使用 InterVariable,字重为 400,字号为 15px,行高为 1.50。正文行高绝不能压缩到低于 1.5。

建议避免

  • 不要将 Voltage Lime #d1ff19 作为白底文字颜色,因为其对比度不足;只将它留给深色表面。
  • 按钮圆角不要缩减到小于 8px。24px 圆角是系统视觉身份的核心,锐利按钮会破坏整体外观。
  • 每个区块不要使用超过一种彩色。系统以无彩色为先,青柠色与琥珀色是标点,而不是整套配色。
  • 主要按钮不要使用 #000000,而应使用 #15171a。纯黑看起来像终端或调试界面,而不是品牌表达。
  • 正文不要大于 15px 或小于 14px。层级必须从 15px 正文明确跳到 18px 副标题,形成可见差距,而不是插入过渡字号。
  • 不要给背景或卡片添加渐变。渐变只出现在产品仪表盘图表中,绝不出现在营销界面中。
  • 阴影不要重于 rgba(0,0,0,0.25) 0px 25px 50px -12px。系统依靠柔和、低 alpha 的叠层,而非戏剧性投影。