Programa 网站预览
Programa 网站预览

Programa

正午的瑞士设计工作室。白画廊墙由唯一黄色台灯照亮,一切都是灰度,直到按钮、徽章或高亮要求注意;这一点黄音承载整个房间。

Programa 采用瑞士设计语汇:接近纯白的画布、以紧密字间距呈现的小到中字级建筑式无衬线字体、细线边框,以及唯一一种饱和的黄绿色强调色。它像荧光笔一样,为原本严肃克制的页面划出重点。整个色板基本由四种灰色和一个彩色信号组成;彩色占据的面积受到严格限制,而非分布各处,因此黄色一出现,就像一个开关被打开。组件纤细而自信:10px 圆角、1px 细边框、充裕的白色留白,以及完全没有阴影干扰的表面。整体美学融合了编辑式作品集与生产力工具的特点,足够克制,显得严肃专业;也足够大胆,让人感到这是一件设计师的工具。

查看原始网站

使用规范

建议采用

  • 每屏唯一主要操作专用 #fbff2b 填充与 1px #1a1a1a 边框,绝不将黄色作为大表面或装饰块背景。
  • 所有文字使用 Neue Haas Grotesk Text 尺度 14/16/17/20/24/42px,字间距 -0.03em,不引入第二字体,也不在展示字号放松。
  • 按钮、导航元素与输入框使用 10px 圆角,16px 留给较大卡片表面与信息条。
  • 垂直节奏建立在 6px 基础单位上:列表项间 8px,元素间 12px,卡片内边距 16px,区块分隔 48-96px。
  • #f4f4f4 是白与黄色强调之间唯一中间表面,不引入额外灰调或渐变色层。
  • 页面布局居中,max-width 1200px,内容块左边距 111px,让留白承载视觉重量。
  • 层级通过字重 400 与 500 表达,而非颜色或字号变化;系统恰好两种字重与紧密字号尺度。

建议避免

  • 不要引入投影、光晕或模糊,浮起平面且由边框定义。
  • 每个视口 #fbff2b 不要用于超过一个元素,力量来自稀缺。
  • 不要添加第二强调色,色板是单色加唯一黄绿信号。
  • 正文不要用 Ash Gray #a3a3a3,在白底上 2.5:1 对比不合格,只留给占位符与非激活元数据。
  • 圆角不要超过 16px,略方几何是身份一部分。
  • 不要用任意像素值打破 6px 间距网格,每个间隔应是 6 的倍数。
  • 页面标题上方不要添加副标题或眉题,42px 标题独立出现。