Tella

紫色广播信号 — 设计风格如同电视网络的播出包:满幅色彩场、粗犷压缩的显示字体、饱和色与纯白之间突兀切换。
Tella 以电紫色能量脉动 — 首屏区域将整个视口浸染在饱和紫色(#5e51f8 到 #251544)中,随后突然转为白色用于功能区块。这种对比是刻意且强烈的:你从沉浸式的色彩场骤然过渡到临床白底网格,毫无过渡。标题字体 NaN Jaune Midi Bold 承担了主要视觉任务 — 一种粗壮、字间距极紧的显示字体,字间距为 -0.054em,感觉像广播电视标题被压缩进浏览器边框。带有薰衣草色调的次要文本(#cfcbfd 在深色背景上,#d7d3fd 在功能区块中)延续品牌色彩,即使在正文部分也保持品牌调性,防止白色区块失去品牌识别。漂浮在紫色海洋中的胶囊形深色行动按钮是标志性矛盾:页面最重要的操作是页面中最深、最内敛的元素。
查看原始网站使用规范
建议采用
- 所有大于 48px 的显示标题均使用 NaN Jaune Midi Bold 字体,字间距设为 -0.047em 至 -0.054em — 一旦字间距超过 -0.036em,字体将失去广播标题的压缩感。
- 将满幅浸染的紫色首屏(#5e51f8 → #251544 渐变)作为硬切区块应用,而非渐变过渡 — 突然转为 #f8fafc 白色是标志性手法,而非设计失误。
- 所有交互类胶囊元素(CTA 按钮、导航注册按钮、标签选择器和标签标签)均使用 40px 圆角半径 — 这是系统内唯一的圆润形态。
- 在白色背景上为功能卡片插图和透明文本添加 #d7d3fd 或 #cfcbfd 色调 — 保持品牌紫色在内容区块中的存在,同时避免白色底面被过度染色。
- 为产品截图和突出框添加薰衣草色光阴影(rgba(238,217,253,0.25) 0px 16px 64px 4px) — 在紫色邻近内容上使用普通黑色阴影会破坏品牌色彩的立体感系统。
- 在紫色首屏区块中保持深色 CTA(#111111 胶囊)作为主要行动 — 面对饱和紫色的深色对比显得果断鲜明,而非品牌缺失。
- 在白色区块中使用 Inter 700 字体,字号 24-30px 用于小节副标题 — NaN Jaune Midi 仅用于显示尺寸;在小于 48px 的层级中,Inter 承担小节层级的结构层级。
建议避免
- 绝不将 NaN Jaune Midi Bold 用于小于 48px 的文本 — 该定制字体在文本尺寸下失去显示表现力,且在可读性上远逊于 Inter。
- 绝不在紫色首屏与白色区块之间添加渐变过渡 — 硬切是刻意的设计选择,而非过渡失误。
- 绝不使用语义性红绿状态色,除非确认其在设计系统中存在 — 提取数据中未检测到语义色;交互状态默认使用紫色(#5e51f8)。
- 绝不将卡片圆角半径设为低于 24px — 即使是小型 UI 元素也使用 12-20px;系统中不存在锐角卡片。
- 永远不要将薰衣草药丸按钮(#d5a8f5)作为唯一的主行动号召(CTA)——它会显得装饰性或次级,与深色药丸并列;务必与其搭配使用,或将其置于 #111111 主行动之下。
- 绝不使用暖色调或黄偏色调的阴影 — 所有立体效果均使用中性黑色 rgba(0,0,0,x) 或品牌调的薰衣草色 rgba(238,217,253,x)。不使用暖棕或金色阴影色调。
- 绝不将正文在卡片网格中超过2 行时居中对齐 — 功能卡片在卡片标题下方使用左对齐正文;多行居中正文会破坏卡片阅读节奏。