Astro 网站预览
Astro 网站预览

Astro

深蓝色基底、胶囊形控件与圆角卡片。

页面以深蓝色为基底,搭配近白色文字。字体采用 Obviously、MDIO。视觉特点包括胶囊形控件、圆角卡片、渐变展示、细线分隔。适合参考的场景:开发者工具官网、API 服务介绍页。

查看原始网站

使用规范

建议采用

  • 所有交互元素,包括按钮、标签页、徽章和小块,都使用 9999px 圆角。
  • 主要行动按钮使用白背景 #ffffff 配深色文字 #1f232e;反色是系统的标志操作模式。
  • 星云渐变 linear-gradient(83.21deg, #3245ff, #b845ed) 只用于首屏氛围背景和数据条,绝不用在按钮或卡片上。
  • 区块眉题使用 14px、字重 600,并用彩色强调 #4bf3c8、#acafff、#54b9ff,作为每区块唯一色彩标点。
  • 标题使用 Obviously 字重 300-400,保持低声自信,而非高喊。
  • 所有间距保持 4px 基础单位:元素间距 8px 或 16px,区块间距 80px。
  • 功能列中的圆形图标容器使用 1px 彩色边框,颜色为 Aurora Mint、Plasma Blue 或 Amber。

建议避免

  • 不要用投影产生浮起效果;系统依赖颜色稍浅的深色 1px 边框。
  • 文字不要应用星云渐变;这会破坏深色画布上的可读性。
  • 大面积背景填充不要使用彩色;它会破坏宇宙虚空氛围。
  • 卡片不要使用 12px 与 16px 之间的圆角值;系统固定使用 8px、12px 或 16px。
  • 正文字号不要低于 14px 或高于 18px;字号尺度紧凑,以维持仪表板密度。
  • 标题不要使用 obviously > 700;300-400 字重范围是标志性克制。
  • 按钮内不要添加装饰图标;胶囊形按钮应只有文字,或文字加尖括号箭头。