Notion

明暗对比、产品图像展示与衬线字形。

页面兼有浅色与深色区域。字体采用 NotionInter、Lyon Text。视觉特点包括产品图像展示、衬线字形、居中构图、网格布局。适合参考的场景：工作流工具首页、产品功能说明页。

查看原始网站

使用规范

建议采用

所有卡片、图片和产品展示模型容器使用 12px 圆角
按钮、输入框和交互控件使用 8px 圆角
仅对胶囊形标签和徽章使用 9999px 圆角
使用 Signal Blue（#0075de）作为唯一的填充型 CTA 颜色——绝不引入第二个色彩按钮
首屏标题使用 64px NotionInter 字重 700，字间距 -2.3px
主要页面区块之间使用 80px 垂直间距，以实现从深色到浅色的舞台过渡
所有 UI 标签、导航链接和按钮文字使用 NotionInter 字重 500（非 600 或 700）
仅将 Pure White（#ffffff）用于提升表面或反色文本——轻页面背景默认使用 Paper White（#f6f5f4）
Lyon Text 使用需极为克制——每页最多出现一次，字号为 32px，用于编辑性标题强调

建议避免

不要将 Lyon Text 用于产品 UI 标签、导航或小于 24px 的内容——它是一种编辑信号，而非工具字体
不要使用纯黑色（#000000）作为背景——Midnight Ink（#02093a）是深色表面；纯黑色仅用于文本和边框
不要在卡片或图片上使用 5px 或更小的圆角——5px 仅保留用于小芯片和内联元素
不要在彩色背景上放置彩色按钮——Signal Blue CTA 必须置于深色或纸白背景上以维持对比度
正文文本不要低于 14px 或高于 20px——12px 仅用于图注和元数据
不要在单个卡片内混合深色与浅色表面处理——卡片要么是深夜舞台，要么是纸张舞台，绝不会同时存在
不要在同一区块内使用多个标题字重——编辑性标题使用 600，首屏标题使用 700，绝不混合
不要在文本、边框或小型 UI 元素上添加渐变——渐变仅出现在产品展示模型周围作为大型装饰光环

正在读取模板权限…

使用指南

# Notion — Style Reference
> midnight workspace, warm paper below
 
**Theme:** mixed
 
Source measurements are normalized; roles and recommendations are interpreted. Font summary lists are independent, not paired by position. HTML examples are reconstructions, not source components.
 
Notion operates as a midnight workspace that hands you the keys to a clean editorial room. The first screen is a deep navy stage (#02093a) where a single bold headline commands attention, surrounded by subtle violet glows and product screenshots that float like objects under glass. Below the fold, the page lightens into a warm white editorial canvas (#f6f5f4) where product cards, testimonials, and feature blocks read like a well-designed magazine spread. Typography carries the personality: NotionInter does the utilitarian work at compact confident sizes, while Lyon Text appears as occasional editorial accent — a serif whisper that signals 'this is thoughtful, not just functional.' The color system is mostly cool blue and violet for the dark surfaces, with the brand's identity expressed through the midnight canvas itself rather than a single bright accent — a deliberate inversion of the typical SaaS color hierarchy.

Notion

使用规范

建议采用

建议避免

相似设计语言

Shopify

Super

Amie

Notion

Ameba

Hex