Sleeve 网站预览
Sleeve 网站预览

Sleeve

大理石上漂浮的 Dock。

Sleeve 像在画廊中组成的 macOS 产品页：无限白画布，唯一首屏产品照漂浮，应用图标卫星绕着它，排版承担全部表达。色板近单色，黑、白、灰细边框是唯一结构色，彩色能量只来自应用自身蓝渐变和少量作为装饰标点的彩色系统图标。标题巨大紧密，96px 展示字间距 -0.025em、48px 区块标题，正文系统无衬线 15-18px，THEMING、FEATURE LIST 等微标签用 0.05em 字间距低声而非高喊。组件柔厚：24px 卡片圆角、9999px 胶囊按钮、0.05 不透明度的 1px 内边框代替重阴影。设计语言通过克制表达自信，界面无渐变、按钮无彩色，只有排版重量和宽裕呼吸承载每屏。

查看原始网站

使用规范

建议采用

  • 所有卡片、图片和产品展示用 24px 圆角，这是主导形状语言。
  • 所有按钮、标签、切换和公告栏用 9999px 胶囊圆角。
  • 每页唯一展示标题用字重 900、96px、字间距 -2.4px，绝不用正文或区块标题。
  • 每页唯一主要行动按钮用 #000000，次要行动用 #e5e7eb 轮廓边框，无彩色按钮。
  • 蓝渐变 linear-gradient to right top, #0e95ee, #27c9f5 只用于产品展示与装饰色层，绝不用界面控件。
  • 所有 12-13px 小大写标签用 0.05em 字间距，作为区块标题上方安静宽字间距眉题。
  • 功能卡片内部内边距 36px，网格列间距 16px。

建议避免

  • 不要用彩色行动按钮，按钮色只有 #000000 填充，或透明配 #e5e7eb 轮廓边框。
  • 不要用重投影，浮起优先用 0.05 不透明度的 1px 内边框，或 4 层卡片阴影叠层。
  • 正文或区块标题不要用 900，专供 96px 展示标题。
  • 32px 以下文字不要用 -0.025em 字间距，紧密字间距只在展示字号成立。
  • 14px 以下文字不要用蓝强调，它只出现在 12-13px 大写区块标签上。
  • 可见元素圆角不要低于 8px，系统一切都积极圆润。
  • 导航或区块背景不要添加背景色，页面应像内容浮在无限白上。

相似设计语言