IAD LAB 2025

深色画布,呈现大胆巨字A dark canvas for bold, oversized type.

深色主题设计工具design event landing page极简深色字体主导编辑式实验感原网页 iad-lab.ch ↗ · 2026-10-12 采集 · 1440×900 桌面端
IAD LAB 2025 首屏

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
文字背景对比度WCAG
#f8f8f8 Soft Porcelain#2a2b2d Charcoal Canvas13.34:1AAA
#f8f8f8 Soft Porcelain#222222 Deep Section14.98:1AAA

字体

字号阶梯:Golden Ratio(比例约 1.637,正文 18px)。示例用免费替代字体渲染,数值为实测。

Aa 设计

Neue Haas Unica

网络字体 · 字重 400 / 700 · 占比 68%
免费替代:Inter

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.5px4001.30
一级标题
Large uppercase title for major event sections.
IAD LAB
115px4001.080
二级标题
Rounded display-style section heading, such as the program title.
IAD LAB
44px4001.080
三级标题
Bold sans-serif subheadings within event information.
IAD LAB
36px7001.30
四级标题
Smaller bold labels for program details.
The quick brown fox 敏捷的狐狸
27px7001.30
正文
Regular sans-serif event description and explanatory copy.
The quick brown fox 敏捷的狐狸
18px4001.350
辅助文字
Compact supporting details and small navigation text.
The quick brown fox 敏捷的狐狸
16px4001.30

间距与布局

基准单位 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.

页面版块

共 4 个版块,按页面从上到下排列,每个都标了类型、布局和交互套路。

该做与不该做

✓ 该做

  • Use #2a2b2d as the dominant page canvas.
  • 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.

相似风格

IAD LAB 2025 设计系统 — 配色、字体与 DESIGN.md | Design DNA