Figma 网站预览
Figma 网站预览

Figma

白色画廊墙面,只有一束靛蓝聚光。

Figma 是承载创意的纯白画布:无彩色界面以黑色文字、白色表面和单一电光靛蓝点缀完成表达。视觉系统主动退后,让用户创作的设计成为主角;醒目的展示标题、轻字重正文和胶囊形控件构成安静、自信的舞台。色彩只作为功能性的标点,少量出现在行动号召、悬停状态和 Figma 标志中;周围页面刻意保持空白,几乎像画廊。悬浮层级仅保留抬升卡片上的一道柔和投影,其余层级由留白、字重对比和尺度建立。页面节奏在大量呼吸空间的区块与紧凑卡片网格之间交替,形成博物馆与工作空间结合的感觉。

查看原始网站

使用规范

建议采用

  • 每个视口只在一个行动号召上使用 Electric Indigo(#4d49fc);重复使用会削弱它作为唯一饱和操作色的吸引力。
  • 首屏标题使用 56-72px 的 figmaSans,字重 320-340;超轻字重是标志性选择,不是备用方案。
  • 主操作按钮与标签块统一使用 50px 胶囊圆角;8px 圆角留给透明描边控件与输入框。
  • 卡片使用 16px 圆角,徽章、分隔线和图标容器等细小 UI 使用 2px;三层圆角体系(2/8/16/50)构成完整的曲率语言。
  • 以黑色(#000000)文字配白色(#ffffff)形成最大对比;graphite(#595959)仅用于弱化元数据。
  • 代码片段与技术注释使用 figmaMono,并采用正字间距(+0.03em 至 +0.05em);不能用于正文。
  • 让社区画廊和产品截图承载全部装饰性色彩;界面框架严格保持无彩色,靛蓝是唯一例外。

建议避免

  • 次级按钮不能添加彩色填充;黑色透明描边才是靛蓝主按钮的正确搭配。
  • 面向用户的正文或标题不能使用高于 520 的字重;700 仅留给紧凑标签与导航项。
  • 网格布局中的卡片不能加投影;唯一的 24px 70px 阴影留给悬浮首屏卡片。
  • 卡片或输入框不能使用 50px 圆角;胶囊形仅属于按钮。
  • 界面色板不能加入新的彩色;四种品牌标记色存在于标志中,靛蓝存在于行动号召中,粉彩仅存在于插画中。
  • 正文不能小于 16px;系统最小的可读字号为 16px,figmaMono 12px 仅用于注释。
  • 字间距不能超出 -0.02em 至 +0.05em;经过字偶距调校的自定义字间距构成字体系统的语气。