Raycast 网站预览
Raycast 网站预览

Raycast

午夜指挥中心,珊瑚霓虹

Raycast 读作一个深色的工具舱:几乎黑色的画布(#040506),仅有细微的层次阶梯,一个温暖的珊瑚色点缀(#ff6363)承载品牌标识,其余文字采用 Inter 字体的灰白色调。组件的定义更依赖细线边框、内嵌高亮笔触,以及标志性的‘键盘按键’内阴影处理,使卡片显得压感十足、触感真实,而非漂浮感。色彩被严格控制——页面98%为无彩色,珊瑚色仅出现在标识、首屏图像、AI标识以及偶尔的暖调表面。导航采用玻璃模糊效果悬浮呈现,大多数交互元素为深色背景上的中性浅灰按钮,而非有色彩的行动号召(CTA)。首屏完全摒弃系统设计,采用大尺寸红/蓝渐变几何图形,其余页面则回归简洁的深色表面——通过氛围对比而非装饰实现对比效果。

查看原始网站

使用规范

建议采用

  • 将 #040506 作为唯一页面背景色——绝不引入任何更亮或更灰的画布颜色
  • 将 #ff6363(珊瑚脉冲)仅用于 标识、首屏图像、AI 标识和暖调卡片表面——绝不可用于正文中的普通强调文字、图标或边框
  • 在所有提升层级的卡片和功能区块中使用‘键盘按键’内阴影堆叠(rgba(255,255,255,0.05) 内嵌顶部 + rgba(255,255,255,0.25) 外环 + rgba(0,0,0,0.2) 内嵌底部)
  • 首屏标题使用 Inter 字体,字号56px/400,字间距+0.22px——大字号的常规字重是标志性设计,而非错误
  • 所有主要操作使用 Mist(#e6e6e6)填充按钮搭配 Iron(#454647)文字——系统中不存在有色彩的行动号召(CTA)
  • 按钮、输入框和徽章使用8px圆角;卡片使用16–20px圆角;徽章使用9999px圆角;圆形图标容器使用99999px圆角
  • 通过竖线分隔页脚元数据,并以 Geist Mono 12px 渲染以提示技术信息

建议避免

  • 不要使用有色彩的行动按钮——行动号召系统刻意保持中性(深色背景上的 Mist),而非蓝色/红色/绿色
  • 不要为卡片或面板添加负阴影——层级感来自内嵌关键阴影堆叠,而非外层阴影
  • 不要在大尺寸显示文字中使用负字间距——系统采用轻微正字间距(56px时为0.0040em),此为反常规且有意为之的设计
  • 不要引入亮色主题区域或交替亮暗条带——整个页面保持深色基调
  • 不要将 #ff6363 用于正文、链接颜色或通用图标强调——它是品牌标识,而非功能性色彩
  • 不要在同一表面使用多种强调色——系统为单色调,仅含一个珊瑚色强调,而非多色调配色
  • 不要使用 SF Pro Text 用于正文——仅保留用于图标和数值统计标签(24–32px);正文始终使用 Inter 字体
  • 不要破坏8px间距网格——所有内边距、间距和外边距应精确对齐至8/12/16/24/40的倍数