North star · Keep the interface quiet and monochrome, then use one high-contrast feature block and sparse expressive artwork to direct attention.
The page uses a white canvas as its dominant field, with near-black text and a restrained set of pale gray surfaces to keep navigation and developer resources easy to scan. A large black DevDay banner provides the primary visual anchor; its white headline and green-to-purple event lettering belong to the campaign artwork, while purple is a sparse accent rather than a broad interface color. OpenAI Sans carries the interface, combining substantial display lettering in the banner with compact navigation and readable card copy. The top navigation stays light and low-profile, while the centered content area groups model announcements in bordered cards and developer destinations in softly tinted tiles. Generous whitespace separates these modules without making their content feel disconnected. Rounded corners soften the otherwise geometric structure. Small icons and product artwork add variation, but the page relies on typography, contrast, and disciplined card alignment rather than photography or decorative effects.
Site-wide interface, headings, navigation, buttons, and card copy.
角色
示例
字号
字重
行高
字距
特大标题
Large event headline and campaign display lettering.
OpenAI
71.5px
500
1
-0.002em
一级标题
Primary page heading and prominent section titles.
OpenAI
30px
600
1.4
-0.02em
二级标题
Card and destination tile headings.
The quick brown fox 敏捷的狐狸
20px
600
1.3
-0.008em
正文
Descriptions and supporting explanatory copy.
The quick brown fox 敏捷的狐狸
16px
400
1.5
-0.01em
辅助文字
Compact secondary labels and small supporting text.
The quick brown fox 敏捷的狐狸
14px
400
1.43
-0.01em
按钮
Navigation pills and calls to action.
The quick brown fox 敏捷的狐狸
14px
400
1.43
-0.01em
导航
Top-level header links and menu labels.
The quick brown fox 敏捷的狐狸
14px
400
1.43
-0.01em
链接
Inline links and card actions.
The quick brown fox 敏捷的狐狸
16px
400
1.5
-0.01em
代码
Code snippets or developer examples when present.
const style = 1;
16px
400
1.5
-0.01em
间距与布局
基准单位 4px · 密度：适中
64px版块间距
4px元素间距
20px卡片内边距
—内容最大宽度
2px
4px
6px
8px
10px
12px
16px
20px
24px
32px
40px
48px
64px
A slim, full-width header sits above a centered content column. Within that column, the wide black feature banner leads, followed by a two-column row of model announcement cards and a three-column row of developer destination tiles. The top viewport is content-rich, but large surrounding white areas preserve a calm rhythm. Keep alignments crisp and card interiors spacious; the measurements do not specify a maximum page width, so avoid assuming a fixed one.
圆角与层次
按钮 · 8px
卡片 · 8px
导航 · 8px
链接 · 8px
hairline · other
lg · button
The interface reads as mostly flat. Model announcements are defined by thin #e6e6e6 outlines rather than strong shadows, while destination tiles use soft #f9f9f9 fills. The black banner and dark floating Ask AI pill create contrast through color blocks, not layered elevation. Avoid pronounced shadows or stacked surfaces.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
Light horizontal header with OpenAI Developers branding, compact menu links, a selected pale-gray Home pill, and a dark API Dashboard action.
DevDay feature banner
Wide black rounded campaign block with large event artwork, subdued supporting text, a white Explore API updates pill, and a text link.
Model announcement cards
Side-by-side white cards outlined in #e6e6e6, combining a small product icon, title, muted description, and compact text actions.
Developer destination tiles
Three pale #f9f9f9 tiles for API Platform, Codex, and Plugins, each with a line icon, heading, and short description.
Ask AI control
Floating dark pill near the lower-right viewport edge with a short white label.
Imagery · The page is not photography-led. Its most distinctive image is the DevDay banner artwork: an oversized purple circular character on a black field, accompanied by colorful event lettering. Small product icons sit in the model cards, and simple line icons mark the developer destination tiles. Keep artwork contained within its own module rather than spreading decorative imagery across the page.
Reserve black blocks for high-priority campaign content.
Use #e6e6e6 for restrained card outlines.
Group developer destinations into aligned card grids.
Keep body copy muted and comfortably readable.
Use violet sparingly for expressive campaign artwork.
✕ 不该做
Do not turn the whole page into a dark theme.
Do not use purple as a widespread interface color.
Do not add heavy shadows to ordinary cards.
Do not replace the clean sans-serif hierarchy with decorative type.
Do not fill whitespace with unnecessary ornament.
Do not let illustrations overpower navigation or card content.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new OpenAI-style developer page with a white Gallery White (#ffffff) canvas, OpenAI Sans or a close sans-serif substitute, and a restrained monochrome interface. Use OpenAI Ink (#181818) for primary text and dark calls to action, Quiet Graphite (#5d5d5d) for supporting copy, Mist Surface (#f9f9f9) for grouped resource tiles, and Card Hairline (#e6e6e6) for subtle card borders. Organize content in a centered, responsive column beneath a compact horizontal navigation. Lead with one high-contrast black feature block, then present updates and developer destinations in clearly aligned rounded cards. Keep spacing generous, typography direct, and UI mostly flat. If artwork is appropriate, use Electric Violet (#924ff7) as a localized visual accent, not a site-wide color.
