精选 · 开放 · 免费

OMA

一个巨构的建筑作品集，在UI退让时让建筑自行言说

architecturestudio

OMA 网站截图

↓ 下载设计系统包 (75 MB)在 OpenDesign 中打开

原站: https://www.oma.com

📦 浏览包内文件 →

01

设计气质 DNA

建筑工作室全球编辑极简

一块偶尔发出红色嘀嗒声的瑞士单色腕表

02

色彩

#FF0000Accent

#000000Ink

#FFFFFFBG

#666666Muted

rgba(0,0,0,1.0)Line

严格的黑白基底，仅被一个用于关键元数据的、鲜明的红色点缀所打破

03

字体

grotesque-sans

display58px · 700
heading50px · 700
body16px · 500

展示层级必须使用全大写 · 大号文本需要紧凑的负字间距 · 字体字重严格在500和700之间交替

04

间距

4px

8px

12px

16px

24px

32px

48px

64px

96px

严格的4px基础单位，一致用于内边距和内部元素间距

05

表面 (圆角 / 阴影 / 边线)

sm · 0px

md · 0px

lg · 0px

pill · 0px

硬朗的4px实线边框，专门用于突出显示时间敏感的内容块

06

布局

1280container

12columns

24pxgutter

768 / 1024breakpoints

边缘对齐的摄影图与叠加其上的硬边排版容器

07

动效与交互

220msmicro

400mssmall

800msmedium

cubic-bezier(0.25, 0.1, 0.25, 1.0)easing

标准的链接过渡（所有属性）

所有文本链接和元素均使用标准指针光标 · 标准的指针交互

08

组件

button 无可见组件；排版本身作为主要的交互层
card 不可见的结构容器，将文本块对齐在全出血图片上
chip 无
input 无
hero 巨大的建筑摄影图与叠加其上的大号无衬线文本

09

文案语气与禁用清单

语气权威、机构化，且严格陈述性
标题风格 简短、有力的建筑标题，加粗大写
按钮文案 标准的行内文本链接

不要使用border-radius——截图显示仅为锋利的90度直角
不要添加阴影——截图显示完全平面化、无阴影的表面
不要使用小写标题——截图显示所有导航和标题均为严格大写
不要使用厚重的内边距——截图显示紧凑的12px至15px内部间距
不要使用复杂的调色板——截图显示仅使用黑、白和一个红色点缀
不要使用衬线或装饰字体——截图显示严格的、功能性的无衬线怪诞体
避免: 温暖感
避免: 趣味性
避免: 装饰性元素
避免: 过多的内边距
避免: 圆角

10

包内真实截图

OMA — 桌面首屏（hero） — 桌面首屏（hero）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

OMA — 移动首屏 — 移动首屏

抓自真实页面 · 真 computed styles

11

System Prompt

一个全球建筑作品集网站（OMA），采用极简、高对比度的设计系统。调色板严格限于黑色（#000000）和白色（#FFFFFF），辅以一个仅用于日期元数据的、鲜明的红色点缀（#FF0000）。字体是统一的无衬线怪诞体（Arial W01），仅以大写形式使用，并带有紧凑的负字间距。所有组件均为平面化设计，具有0度直角且无任何阴影，依靠巨大的、全出血的建筑摄影提供视觉吸引力。关键禁忌：切勿使用border-radius，切勿添加阴影，切勿在标题中使用小写字母。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗ · 本站 Agent 包 ↗

en · zh-CN · zh-TW · ja · ko