Voice intelligence
Article launch
Centered date, category tags, oversized headline, wide video, article tools, voice demo, tabs, and long-form sections.
Design system
Design systems that make evidence easier to trust.
MAEK pages should feel like evidence essays: restrained, readable, and built around source material people can inspect.
Reference method
AI pages need restraint, proof, and room for context.
Careers reference: one centered thesis, long readable principles, real people media, practical cards, structured rows, and a focused final action.
Human context first. The page should explain why the work matters before it explains how the system works.
Proof before polish. Use reference pages, workflow images, tables, and source-backed examples as the visual material.
Quiet hierarchy. Large type is useful only when it gives the reader a clear entry point. Section titles should stay calm.
Responsive discipline. Viewport-based type needs a strict maximum so Chrome and the in-app browser do not feel like different designs.
Daybreak
Symbolic hero
White field, huge wordmark, single accent, small pill CTAs, symbolic system graphic, table, tabs, partner proof.
Frontier
Enterprise platform
Centered platform statement, customer logo strip, architecture diagram, feature blocks, industry proof, governance copy.
Small business stories
Editorial story
Real video, large photo grids, founder quotes, compact prompt-response examples, and generous section spacing.
Design tokens
White space first. Color second.
The system should feel editorial and inspectable: black text, calm signal color, thin borders, and only enough UI chrome to support the story.
Canvas
#ffffff / Page background
Soft canvas
#f7f5f0 / Secondary surface
Ink
#171717 / Primary text
Muted
#5f6470 / Secondary text
Line
#e7e2d9 / Hairline borders
Signal
#0f766e / Primary accent
Sage
#edf4ef / Quiet proof panels
Steel
#edf3f4 / Technical diagrams
Use type as the visual system.
Scale
Hero headlines now use a lower viewport multiplier and a 5rem cap. Section titles use a smaller cap so the rhythm stays closer to OpenAI Careers than to a poster layout.
Body copy should use high line-height and narrow measure. Do not explain the UI in the UI; let the evidence, media, and component shape carry meaning.
Component System
Components that prove, not decorate.
Each component must answer one evidence question: what happened, what supports it, who trusts it, or what action follows.
Hero
One message, centered. Use a date or context line above, one large headline, one plain lead, and one media asset below.
Media
Use actual product, workflow, or customer evidence. Keep it wide, unframed, and separated by generous whitespace.
Proof
Use logo rows, architecture diagrams, tables, quotes, and short tabs. Avoid stacked decorative cards.
Story
Long-form sections can breathe. Pair paragraphs with images, prompt examples, and short pull quotes.
Question
What evidence supports this answer, and where did it come from?
System answer
Show the source package, linked entities, exact passage, and workflow output in one traceable view.
Design rule
Make the evidence visible before describing the interface.
Page Template
Build pages as evidence essays.
- 01
Start with one clear thesis and one real media object.
- 02
Move into a proof section: customer logos, architecture, table, or tabs.
- 03
Use prompt-response cards only where they reveal actual workflow behavior.
- 04
End with one focused action, not a generic feature grid.