IAD LAB 2025以大面积炭灰色画布、超大圆润标题字和克制的导航呈现设计活动。页面以醒目的字体和充裕留白为主,不依赖图片或常规促销区块。
North star · Let oversized rounded typography and deliberate negative space carry the identity on a restrained charcoal canvas.
The visual system is built around a near-black charcoal canvas, with a slightly darker section surface creating subtle shifts between long page bands. Bright off-white is reserved for the primary display wordmark and readable text; muted gray is used sparingly for navigation emphasis and small progress dots. The opening screen is deliberately sparse: an enormous, tightly framed rounded uppercase title anchors the top edge, while a compact stacked event identifier sits beneath it. 8000 Round Black gives display headings a distinctive inflated, friendly silhouette; Neue Haas Unica handles supporting copy and navigation with a clean, neutral voice. Content appears as small, left-aligned text groupings set within otherwise open space, with later program content arranged across columns. There is no meaningful photographic language: the identity comes from typography, contrast, and pacing. Keep surfaces flat and transitions quiet, allowing the long vertical rhythm and deliberate emptiness to feel intentional.
配色
点色块复制色值。用途说明来自对页面的实测位置(背景、文字、描边、按钮)与截图判读。
品牌色
强调色
表层色
中性色
页面底色 · Charcoal Canvas表层 · Deep Section主文字 · Soft Porcelain
Supporting event information, body copy, and navigation.
Aa 设计
8000 Round Black
网络字体 · 字重 400 · 占比 32%
免费替代:Bowlby One SC
Oversized uppercase display title and prominent section headings.
角色
示例
字号
字重
行高
字距
特大标题
Oversized uppercase event wordmark in the opening hero.
IAD LAB
211.5px
400
1.3
0
一级标题
Large uppercase title for major event sections.
IAD LAB
115px
400
1.08
0
二级标题
Rounded display-style section heading, such as the program title.
IAD LAB
44px
400
1.08
0
三级标题
Bold sans-serif subheadings within event information.
IAD LAB
36px
700
1.3
0
四级标题
Smaller bold labels for program details.
The quick brown fox 敏捷的狐狸
27px
700
1.3
0
正文
Regular sans-serif event description and explanatory copy.
The quick brown fox 敏捷的狐狸
18px
400
1.35
0
辅助文字
Compact supporting details and small navigation text.
The quick brown fox 敏捷的狐狸
16px
400
1.3
0
间距与布局
基准单位 8px · 密度:适中
—版块间距
4px元素间距
—卡片内边距
—内容最大宽度
3px
4px
5px
10px
15px
16px
20px
22px
24px
40px
Use a long, vertically paced single-page composition with broad full-width canvas bands. The hero title begins flush near the top-left and spans most of the viewport width; place the event identifier directly below it. Supporting text sits in narrow, left-aligned blocks, with substantial open space around each group. The program content shifts into a three-column arrangement. Measurements indicate a comfortable density and an 8px base spacing unit, but do not assume a fixed maximum width or section gap.
圆角与层次
导航 · 50%
没有测到阴影:页面是扁平的,层次靠底色和描边区分。
The measured system has no shadows. Favor flat charcoal surfaces and subtle tonal separation between the main canvas and darker section bands; avoid card-like elevation. Borders are not established as a defining treatment, so use spacing and background contrast instead of prominent outlines or layered containers.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。
Oversized event wordmark
A giant rounded uppercase “IMAGINE” display title spans the opening viewport, rendered in off-white against charcoal.
Stacked event identifier
Compact Neue Haas Unica text beneath the wordmark stacks the lab name, location, and year into a narrow left-aligned block.
Section progress dots
A vertical run of small muted-gray dots sits near the right edge as a restrained page-position cue.
Pill navigation highlight
The “Programm” navigation item can sit on a gray, rounded active surface with off-white 18px Neue Haas Unica text.
Editorial copy blocks
Event introduction and practical information appear as compact off-white text groups with substantial surrounding negative space.
Program columns
The program area uses three columns, with headings, copy, links, and lists organized as distinct content groups.
Imagery · The measured page contains no image, video, or photographic content. Treat typography as the main visual asset: oversized rounded display lettering, compact text labels, and small navigation dots. Avoid introducing decorative photography or illustrative assets that compete with the wordmark; any visual treatment should remain flat, restrained, and consistent with the monochrome palette.
Set the main display title in oversized rounded uppercase lettering.
Use #f8f8f8 for legible text and the primary wordmark.
Keep event details compact, left-aligned, and surrounded by negative space.
Use #747576 only for secondary navigation emphasis or small indicators.
Separate page bands with subtle tonal shifts rather than effects.
✕ 不该做
Do not introduce bright colors absent from the measured palette.
Do not fill the open hero with extra promotional content.
Do not use shadows or glossy, layered card effects.
Do not add photography or decorative imagery as a competing focal point.
Do not apply the rounded display font to all body copy.
Do not invent fixed container widths or spacing values.
给 AI 的提示词
想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。
Build a new event page using the IAD LAB visual language: a long, editorial composition on a #2a2b2d Charcoal Canvas, with restrained #222222 Deep Section tonal bands. Use #f8f8f8 Soft Porcelain for readable text and a very large, rounded uppercase display title; choose a close free substitute such as Bowlby One SC if the original display font is unavailable. Set supporting copy and navigation in a neutral sans like Inter, with compact text blocks and generous negative space. Use #747576 Quiet Graphite only for small secondary indicators or a restrained active navigation state. Keep the hero sparse and left-aligned, then organize detailed event content into clear columns. Avoid decorative imagery, shadows, and prominent borders. Preserve a flat, high-contrast, typography-led hierarchy.