Atlas Card 网站预览
Atlas Card 网站预览

Atlas Card

近黑色基底、等宽文字标注与胶囊形控件。

页面以近黑色为基底,搭配浅灰色文字。字体采用 Sequel Sans Headline Book、Sequel Sans Book。视觉特点包括等宽文字标注、胶囊形控件、几何图形、大幅摄影展示。适合参考的场景:支付服务首页、金融科技产品介绍页。

查看原始网站

使用规范

建议采用

  • 仅使用 #001391 用于主要操作按钮和品牌标识——它是系统的唯一色彩语汇,必须保持稀有性
  • 将正文文本设为 #f8f8f8,而非纯白色——偏白的色调显得高端,并减少在大面积黑色画布上的视觉疲劳
  • 为所有按钮和标签应用胶囊半径(24px);在首屏级号召性文案中,使用 128px 以实现最极端的胶囊形态
  • 将 Sequel Sans 用于有说服力的正文内容,搭配 ApercuMono 用于所有注释、免责声明和元数据——等宽字体的切换传达出‘这不是营销’的信号
  • 将正文居中排列在max-width约640px的栏中,营造候补名单分区中可见的亲密、如书信般的阅读节奏。
  • 从首屏摄影过渡到黑色区域时,使用 #141414 → #000000 的渐变叠加层——图像与画布之间禁止硬切
  • 让摄影本身承载氛围深度,而非为卡片或按钮添加盒阴影

建议避免

  • 卡片、按钮或面板绝不添加box-shadow或drop-shadow,深度只来自色阶变化和摄影。
  • 绝不使用除 #001391 以外的色彩填充按钮;透明或 #1e1e1 背景的次级/透明按钮必须使用 #f8f8f8 文字
  • 绝不将正文文本设为纯 #ffffff,当 #f8f8f8 可用时必须使用——偏暖的偏白是品牌克制奢华的一部分
  • 绝不引入第二套强调色(不使用绿色表示成功,不使用红色表示错误)——若需状态区分,使用 Ash(#808080)表示非激活,Frost(#cccccc)表示激活
  • 绝不为卡片设置半径小于 8px,或为按钮设置半径小于 18px——圆润的几何形态是标志性特征,而非默认值
  • 绝不将叙事部分的正文左对齐——最大宽度 640px 的居中文本是编辑风格的定义特征
  • 绝不将 ApercuMono 用于标题或号召性文案标签——它严格用于注释、细小印刷和 15px 以下的元数据