North star · Let warm whitespace and oversized editorial type carry the page; use Groq orange only for precise signals and actions.
The page is defined by a warm off-white canvas (#f3f3ee), not by saturated blocks or product imagery. Muted gray-beige text and hairline borders keep the interface quiet; Groq orange (#f43e01) appears selectively in the logo, announcement link, small edge markers, and outlined pill CTA. The opening narrative sits in a narrow, left-aligned column with generous surrounding whitespace, making successive short statements feel like an editorial manifesto. Display typography changes the scale dramatically in the footer: dark, uppercase words span two broad columns and become the dominant graphic. The measured sans-serif esBuild handles the large headline and navigation details, while the lightweight serif komuna supplies uppercase body, eyebrow, and link text with airy tracking. Layout remains flat and spacious, with thin separators rather than cards, shadows, or stacked surfaces. Decorative orange marks provide small moments of motion and contrast without competing with the copy.
Large display headline and selected navigation text.
Aa 设计
komuna
网络字体 · 字重 100 · 占比 26%
免费替代：Cormorant Garamond
Uppercase body narrative, announcement, eyebrow, and text links.
角色
示例
字号
字重
行高
字距
特大标题
Oversized uppercase footer statement spanning two broad columns.
Groq
135.5px
500
0.95
-0.01em
一级标题
Primary page heading when a conventional headline is needed.
Groq
50.5px
500
1
-0.03em
正文
Uppercase editorial narrative and supporting text.
The quick brown fox 敏捷的狐狸
16px
100
1.3
0.08em
导航
Uppercase utility and footer navigation links.
The quick brown fox 敏捷的狐狸
16px
100
1
0.08em
链接
Uppercase inline announcement and read-more links.
The quick brown fox 敏捷的狐狸
16px
100
1
0.08em
眉题
Small uppercase section labels or introductory markers.
The quick brown fox 敏捷的狐狸
16px
100
1
0.08em
间距与布局
基准单位 4px · 密度：宽松
56px版块间距
40px元素间距
—卡片内边距
1376px内容最大宽度
1px
6px
8px
10px
14px
16px
24px
32px
40px
45px
54px
56px
68px
80px
90px
Use a spacious, single-column narrative within a wide page frame; the measured maximum width is 1376px. Keep the central story column narrow relative to the canvas and left-aligned, with substantial whitespace around it. The header and announcement sit in horizontal bands separated by hairlines. The footer changes to a broad, two-column typographic composition. Maintain a sparse density and generous section rhythm; avoid packing copy into cards or forcing a conventional grid onto the hero.
圆角与层次
按钮 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is flat, with no measured shadows or elevated cards. Separate header, announcement, and footer with fine neutral hairlines instead of layered surfaces. The CTA is an outlined pill, not a filled button; maintain clear contrast through typography and borders rather than shadow, glow, or gradients.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
Sparse horizontal header with the orange Groq mark, understated navigation links, and a pill-shaped outlined START BUILDING action.
Announcement strip
A thin, rule-bounded band with uppercase tracked announcement copy and a compact orange READ MORE link.
Narrative hero
A left-aligned sequence of short statements on the warm canvas, surrounded by generous whitespace and occasional orange geometric marks.
Outlined CTA
Uppercase komuna text in #f43e01 with a matching thin border and fully rounded pill silhouette; no fill or shadow.
Footer display
A large dark uppercase two-column statement beneath a thin divider, with the logo and social links above and compact navigation below.
Imagery · The supplied views are primarily typographic rather than photographic: there is no prominent product photography, 3D render, or video in the visible story. Small orange geometric marks act as sparse decorative signals around the text. Keep them crisp, isolated, and secondary; do not introduce illustrative imagery that would compete with the narrative or warm neutral canvas.
Keep the narrative narrow, left-aligned, and surrounded by whitespace.
Reserve #f43e01 for links, marks, the logo, and outlined actions.
Use hairlines to separate horizontal page bands.
Set supporting copy in airy uppercase typography.
Let the footer display become the page’s strongest typographic moment.
✕ 不该做
Do not add gradients, shadows, or raised cards.
Do not fill the page with orange or other saturated blocks.
Do not center the hero narrative.
Do not introduce prominent stock photography or product renders.
Do not compress the announcement or footer navigation into dense controls.
Do not make every text element equally dark or visually prominent.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new Groq-style page on a warm, near-white #f3f3ee canvas. Treat whitespace and editorial text as the main visual material; use #cecebf for muted copy and hairline dividers, #2d2f33 for strong display text, and #69695d for subdued navigation. Keep #f43e01 reserved for the logo, links, small geometric signals, and thinly outlined pill CTAs. Use esBuild or a close sans-serif substitute for display typography, and a light, tracked serif-like face for uppercase supporting copy. Create a sparse horizontal header, a rule-separated announcement band, and a narrow left-aligned narrative with generous breathing room. Finish with a flat footer where oversized uppercase typography spans two broad columns. Avoid cards, shadows, gradients, and decorative imagery that competes with the copy.
