North star · Use stark black-and-white typography and spacious structure as the frame for vivid, playful geometric event artwork.
The page opens on a black canvas with white Figma-Sans typography, giving the event title and registration link immediate contrast. The hero stays spare: a small uppercase virtual label, a large lightweight title, two lines of date information, and a wide outlined registration control. A full-bleed geometric illustration then introduces saturated blue, pale cyan, lilac, orange, and red; treat these as artwork colors rather than additions to the measured core palette. The next sections shift to pale cyan and vivid green, using black text and thin horizontal rules to organize the event details and agenda. White sections provide a calmer backdrop for the speaker grid and FAQ. Typography is generally clean and unembellished, with display faces reserved for large titles and agenda links. The layout alternates broad color fields with compact, aligned content, while portraits are consistently cropped into rectangular color-backed tiles. The footer returns to black and oversized white branding.
Display headlines, section titles, large agenda links, and prominent registration text.
Aa 设计
Figma-Sans-Text-Regular
网络字体 · 字重 400 / 600 · 占比 33%
免费替代：Inter
Body copy, navigation, event information, and registration text.
Aa 设计
Figma VF-normal-700-75
网络字体 · 字重 400 · 占比 7%
免费替代：Inter
Small share of measured site text; likely a variable display or emphasis face.
Aa 设计
Figma-Sans-Text-Medium
网络字体 · 字重 400 · 占比 4%
免费替代：Inter
Minor emphasis within text and interface labels.
Aa 设计
Figma-Mono-Regular
网络字体 · 字重 400 · 占比 2%
免费替代：IBM Plex Mono
Code-like or technical labels where a monospaced treatment is needed.
角色
示例
字号
字重
行高
字距
特大标题
Oversized event or brand display headlines.
Figma
86px
400
0.9
-0.02em
一级标题
Primary hero title, “Schema by Figma.”
Figma
72px
400
1
-0.02em
二级标题
Large section headings and prominent agenda links.
Figma
56px
400
1.1
-0.02em
三级标题
Secondary section titles and speaker-area headings.
Figma
32px
400
1.4
0
四级标题
Smaller subsection headings and FAQ labels.
The quick brown fox 敏捷的狐狸
24px
400
1.2
0
正文
Event description, speaker details, and explanatory copy.
The quick brown fox 敏捷的狐狸
18px
400
normal
0
辅助文字
Small section labels and compact supporting information.
The quick brown fox 敏捷的狐狸
16px
400
1.4
0
导航
Header navigation links such as FAQ and Agenda.
The quick brown fox 敏捷的狐狸
18px
600
normal
0.03em
链接
Large, prominent agenda session links.
Figma
56px
400
1.1
-0.02em
代码
Occasional compact technical or code-like text.
const style = 1;
16px
400
1.4
0
间距与布局
基准单位 4px · 密度：宽松
120px版块间距
4px元素间距
—卡片内边距
1320px内容最大宽度
1px
4px
8px
16px
20px
24px
60px
120px
The page uses broad, full-width section bands and a spacious overall rhythm, with content aligned to consistent inset edges. The measured maximum content width is 1320px; the opening screenshot shows a left-aligned hero and an almost full-width registration control. The agenda is organized as stacked rows separated by fine horizontal rules, while speakers use a multi-column portrait grid. Large areas of black, green, cyan, and white alternate to make the long page legible. Keep density low in the hero and more compact in schedules and speaker details.
圆角与层次
链接 · 20px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The page is predominantly flat: large solid-color bands and artwork carry the visual hierarchy rather than shadows or card elevation. Use thin dark rules to divide agenda rows and a fine light outline around the prominent registration control. Keep portrait tiles and FAQ rows visually crisp, with contrast and spacing doing the separation work.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Header navigation
Black top bar with a white Figma mark on the left and compact FAQ and Agenda links aligned on the right; a fine horizontal rule separates it from the hero.
Event hero
Black field with a small uppercase virtual label, large white event title, date and time, and a broad transparent registration control outlined in a light line.
Geometric artwork strip
Edge-to-edge collage of flat, brightly colored geometric forms; preserve the playful blocks and circles as illustration rather than interface surfaces.
Registration status band
Pale cyan section pairs a left-aligned registration heading with a compact event-ended status and alert icon.
Agenda list
Bright green section with a short event overview followed by stacked time-and-session rows, black text, and thin horizontal dividers.
Speaker grid
White section with a prominent heading and a multi-column set of rectangular portrait tiles, names, and compact role and company captions.
FAQ and footer
FAQ uses a quiet white layout with question rows and dividers; the closing footer returns to black with large white Figma branding.
Imagery · The signature artwork is a full-width, flat geometric collage of circles, squares, and bold abstract marks in saturated blue, cyan, lilac, orange, and red. These colors are concentrated in illustration and portrait backdrops, not the measured core palette. Speaker photography is presented as consistent rectangular head-and-shoulders crops, often monochrome subjects against bright solid-color tiles. Avoid gradients, decorative shadows, and realistic 3D effects.
Reserve #24cb71 for the agenda and event-details band.
Use #c7f8fb for the virtual status section.
Set display titles in a clean, lightweight sans-serif.
Separate agenda entries with thin horizontal rules.
Treat vivid geometric colors as artwork and image treatments.
✕ 不该做
Do not add gradients or shadow-heavy cards.
Do not use bright illustration colors as the default page canvas.
Do not crowd the hero with secondary information.
Do not turn the agenda into floating cards.
Do not crop speaker portraits inconsistently.
Do not replace the restrained black rules with heavy borders.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new event page in Figma’s Schema visual style. Use Schema Ink (#000000) for a strong hero and footer, Gallery White (#ffffff) for quiet content areas, Agenda Green (#24cb71) for the main schedule band, and Virtual Cyan (#c7f8fb) for a status or registration section. Set large, clean sans-serif headings with a lightweight feel; use compact, readable sans-serif text for navigation and details. Create a spacious, left-aligned hero with a large outlined registration control, then use full-width flat color bands and a lively geometric illustration strip. Keep illustrations vivid but separate from the core interface palette. Structure schedules with aligned time and title columns and fine rules; show speakers in consistent rectangular portrait tiles. Favor flat surfaces, crisp edges, generous breathing room, and clear section changes over shadows or decorative effects.
