Morflax 网站预览
Morflax 网站预览

Morflax

如同Porcelain画廊中的唯一蓝色火花,近黑导航栏悬在白色房间上方,房间短暂泛出薰衣草色,其余每个操作与边框保持灰阶,直到唯一钴蓝按钮确认这一时刻。

Morflax像一间单色展厅,只有一个蓝色信标:近黑导航栏悬浮于瓷白画布上,首屏短暂铺上柔和薰衣草色洗,随后每个内容分区都回到清晰中性白色。颜色限量使用,鲜亮蓝(#298ef5)严格出现在一个填充操作上,其余边框、正文和表面都采用从#e5e7eb细线到#171718墨色的灰阶。排版将Inter 400/500/600的冷静中性,与只留给品牌文字标志的0.05em宽字间距展示处理配对,首屏则用超大文字越过画布。组件安静圆润,胶囊按钮、16–24px卡片圆角和柔和25px模糊阴影,唯一视觉噪声来自3D渲染产品卡片,它们承载界面拒绝承担的彩色活力。

查看原始网站

使用规范

建议采用

  • #298ef5严格只用于每个视口的一个填充操作;稀少使它像被启动。
  • 所有大型功能卡片采用24px圆角,较小图像卡片16px,卡片绝不采用方角。
  • 每个按钮都设为9999px圆角;胶囊形是系统标志,而非风格选择。
  • Inter 600只留给标题和激活强调,正文保持400或500。
  • 48–72px展示字号采用-0.025em字间距,正文字号0;大文字中的负字间距让标题具有工程感。
  • Lavender Wash渐变只用于首屏,其余分区保持纯白或Bone。
  • 所有卡片级表面采用0px 25px 50px -12px rgba(0,0,0,0.25),绝不用在行内元素上。

建议避免

  • 不要引入额外彩色强调;系统是单色加唯一蓝色,第二种色相会破坏比例。
  • 任何地方都不要使用0px border-radius;系统建立在圆润几何上,而非平面面板。
  • 正文字号不要低于14px或高于18px;尺度从14→16→20跳跃,以保留易读节奏。
  • 正文不要采用彩色,文字色限定为Ink(#171718)、Carbon(#25282b)、Smoke(#7c7e83)和Ash(#a3a7ad)。
  • Cobalt Spark不要作为卡片、分区或大面积表面背景;它只用于按钮和强调。
  • 不要混用#000000与#171718;文字采用Ink(#171718),纯黑只用于摄影或插画语境。
  • 导航栏、正文或行内链接不要添加投影;阴影只留给卡片和填充按钮。