Super

如同洒满阳光的纸质书桌,上面只有一支琥珀色标记笔。
Super采用近乎单色的暖中性画布,借用笔记本的触感语法,奶油纸背景、炭灰墨色文字和细线分隔,再以唯一饱和琥珀色作为页面仅有的彩色强调。结果像一份精心排版、连接了一个有效按钮的文档,安静、经过考虑,并让点击位置立即清晰可见。定制Beausite排版在展示字号中紧密,在正文字号中自信,赋予页面编辑式分量,却不厚重。组件轻巧,柔和白色卡片坐在奶油色上,没有装饰渐变,抬升极少,导航为无填充链接,多数屏幕上唯一响亮元素是鲜明琥珀填充按钮。视觉系统延续Notion自身的画布调色板(#f9f9f8、#37352f),再加入阳光般暖色强调,使品牌区别于其母工具。
查看原始网站使用规范
建议采用
- 每个浅色主题屏幕的页面背景都采用#f9f9f8(Cream Paper);#ffffff(White Card)只留给需要呈现为位于画布之上的抬升表面。
- 展示标题设为64px、300字重和-2.5px letter-spacing;低语般轻展示字重是标志性选择,不要为“增加权威”而提高至500+。
- 琥珀填充按钮是系统唯一的填充操作控件,背景#ffbe3c、文字#262a2、圆角8px;不要引入次级填充按钮样式。
- 除琥珀强调外,调色板保持单色;若屏幕需要暖意,使用#787673(Warm Taupe)或#f9f9f8(Cream Paper),绝不使用第二种彩色色相。
- 卡片边缘和分隔线使用1px的#ebebeb(Hairline)边框;避免卡片和按钮投影,改为依靠奶油色与白色之间的明度对比。
- 所有字号都应用紧密负letter-spacing:64px时-2.5px、38px时-1.18px、26px时-0.75px、20px时-0.52px;12–16px正文可使用比例等效的em字间距。
- 社会证明行中的第三方标志统一改为#262a2(Ink Charcoal);一致单色处理将不同品牌标志统一于Super视觉系统之下。
建议避免
- 不要将蓝、绿、红或紫作为强调或操作色;琥珀是系统唯一彩色语气,增加其他颜色会稀释品牌身份。
- 卡片或按钮不要采用厚重投影;唯一允许的阴影是大型首屏模型图上的柔和长偏移阴影(rgba(0,0,0,0.05) 0px 30px 22px -11px)。
- 首屏标题不要采用500–700字重;300展示字重是标志性特征,更重字重会破坏定义品牌的编辑式克制。
- 不要将描边或无填充按钮变体作为主要操作;琥珀填充按钮可用时,它必须成为转化路径。
- 文字或背景不要使用纯黑(#000000);系统最深文字为#262a2(Ink Charcoal),最深表面#090909,细微暖意让调色板不显冷清或普通。
- 展示字号不要采用0或正letter-spacing;负字间距-0.026em至-0.039em,是Beausite字体语气不可缺少的部分。
- 琥珀强调不要放在大型装饰形状或背景上;只留给功能时刻,包括标志圆点、填充按钮和小状态指示。