Morphic

用于 AI 叙事的深色电影画布。纯黑吸收一切,只留下唯一蓝色强调的脉冲和生成图像的光辉。
Morphic 为 AI 叙事提供深色电影画布:纯黑背景吸收视觉噪声,让生成图像成为颜色与光线的唯一来源。系统有 99% 保持无彩色,由 #000000、#212121 到 #333333 的严密中性表面阶梯承载界面;白色文字与灰色辅助文字建立层级,不与作品争夺注意力。鲜蓝色 #0075ff 是唯一彩色强调,专用于主要操作、'New' 徽章和分享按钮;它像哑光暗场中的电脉冲,从不充当装饰。所有字重和字号都使用 Inter,大号展示文字的字间距轻微收紧,正文则留有宽裕行高。组件带有玻璃感并像嵌入表面:边框不透明度低到几乎不可见,采用柔和的 10-16px 圆角,并且几乎没有阴影。信息密度紧凑,以 4px 为基准、8px 为间距;布局向横向大幅铺开,配以水平滚动的卡片行,形成流媒体画廊般的节奏,而非传统 SaaS 页面。
查看原始网站使用规范
建议采用
- #0075ff 仅用于主要操作和 'New' 徽章,不得用作装饰性强调、带色相的背景,或可点击元素之外的文字颜色。
- 所有区块标题和首屏都采用双调标题模式:第 1 行为白色,第 2 行为 #999999。这是网站标志性的文字手法。
- 通过 #000000 → #212121 → #292929 → #333333 的表面叠层建立层级,不要在各级之间添加新的色阶。
- 52px 展示文字使用 -0.0620em 字间距,40px 使用 -0.0480em。紧密字间距使标题具有电影感。
- 图像和展示卡片使用 10px 圆角,按钮使用 7px。这是主要内容流中仅有的两种圆角。
- 所有边框都使用 1px 的 #e5e7eb,并保持极低的 10-20% 不透明度。边框应让人感受到,而非明显看到。
- 所有按钮使用 Inter 字重 500,展示文字使用 700,正文使用 400;同一屏幕上,绝不混用超过两种字重。
建议避免
- 绝不使用第二种彩色。系统刻意采用单色加一种蓝色强调;加入其他色相,会破坏电影画布的概念。
- 绝不给界面组件添加投影。阴影只留给展示网格中的图像卡片。
- 正文绝不使用 #ffffff。正文应为 #999999 或更低对比度的颜色;白色只留给标题、按钮和强强调标签。
- 正文段落绝不居中。只有标题、CTA 和首屏文字区块居中,正文始终左对齐。
- 绝不使用既定尺度之外的圆角值。尺度限定为 7px、10px、16px、24px、32px、100px,临时添加的圆角会破坏系统的几何一致性。
- 文字区块后绝不放置彩色背景。画布必须保持纯黑;卡片浮现在空场上,而不填满空场。
- 绝不使用渐变背景。系统严格保持平面感,纵深来自表面叠层,而非颜色过渡。