North star · Keep the interface quiet and centered so the founder’s video and announcement remain the unmistakable focus.
The page uses a white canvas as its defining visual field, with pale gray surfaces reserved for section details and FAQ rows. Dark navy headings provide strong hierarchy without introducing a loud brand color; slate tones soften navigation and supporting copy. The measured typeface, Greycliff, gives headings a rounded, contemporary character, while the centered display headline is compact and assertive. A narrow single-column content area keeps the announcement readable and gives the founder video a prominent, wide frame. The video thumbnail supplies most of the page’s warm brown and black color, but those hues belong to the footage, not the site palette. Long-form text sits in a softly elevated white card, followed by a separate FAQ panel. Generous vertical pauses separate the major blocks. Rounded media and cards, restrained shadows, and minimal borders create gentle structure without making the page feel dense or heavily boxed.
Site-wide type, from display headline and section headings to body copy, links, and controls.
角色
示例
字号
字重
行高
字距
特大标题
Large centered announcement headline above the video.
Limitless
60px
600
1
-0.025em
一级标题
Primary page or major content heading.
Limitless
36px
600
1.11
0
二级标题
Announcement card and FAQ section headings.
Limitless
30px
600
1.2
0
正文
Founder announcement paragraphs and explanatory copy.
The quick brown fox 敏捷的狐狸
18px
400
1.63
0
辅助文字
Supporting labels and smaller interface copy.
The quick brown fox 敏捷的狐狸
16px
500
1.5
0
按钮
Emphasized pill-shaped navigation or action controls.
The quick brown fox 敏捷的狐狸
16px
600
1.5
0
链接
Navigation, footer destinations, and inline references.
The quick brown fox 敏捷的狐狸
16px
400
1.5
0
间距与布局
基准单位 8px · 密度：适中
48px版块间距
6px元素间距
40px卡片内边距
960px内容最大宽度
4px
6px
8px
12px
16px
20px
24px
32px
48px
64px
80px
A centered, single-column announcement occupies the main page, with the content constrained to a measured 960px maximum width. The header aligns the brand at left, navigation through the middle, and sign-in at right. The hero heading is centered above a wide video; below it, the message card and FAQ stack vertically. Major blocks have generous measured section spacing, while paragraph and control groupings remain comfortably readable. The footer changes to a multi-column link layout.
圆角与层次
按钮 · 9999px
卡片 · 24px
图片 · 16px
链接 · 9999px
xl · card
hairline · other
The interface is mostly flat, with pale borders and surfaces doing more work than outlines. The announcement and FAQ panels use a soft, broad shadow for gentle separation from the white canvas. Avoid stacking layers or adding strong elevation; the video frame and card corners provide the main visual contours.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
Brand mark and wordmark sit left, links run across the center, and sign-in is aligned at the far right; text remains small and slate-toned.
Announcement headline
A centered, two-line dark headline introduces the acquisition above the video.
Founder video
Wide embedded video with rounded media corners, photographic thumbnail, and a central play control.
Founder message card
White rounded panel containing a section heading, several paragraphs, closing, and signature, elevated with a soft shadow.
FAQ accordion
A separate FAQ panel with a clear heading and stacked pale-gray question rows, each ending in a disclosure chevron.
Footer link columns
Brand and sign-in lead into grouped Product, Company, Resources & Support, and Social links.
Imagery · A large embedded founder video is the key visual, framed with rounded corners and a familiar play affordance. The footage is warm, photographic, and people-focused, with a dark shirt and home-office background; its browns and blacks are image content rather than core brand colors. The rest of the page uses little decorative imagery, letting the video carry the emotional emphasis.
Use dark ink for headings and muted slate for secondary links.
Give the video and content cards rounded corners.
Separate the message and FAQ with generous vertical breathing room.
Use soft shadows sparingly to distinguish the content panels.
✕ 不该做
Do not treat video-frame browns as brand palette colors.
Do not add bright accent bands or decorative gradients.
Do not turn the announcement into a dense multi-column layout.
Do not make body copy compete with the headline.
Do not use heavy borders or pronounced stacked shadows.
Do not crowd the video against nearby content.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new announcement-style page in the Limitless visual language. Use Gallery White (#ffffff) as the dominant canvas, Midnight Ink (#0f172a) for the main heading, and Slate Copy (#475569) or Quiet Slate (#64748b) for secondary navigation and links. Use Cloud Gray (#f2f3f5) only for quiet surfaces and hairlines. Set the content in a rounded modern sans-serif similar to Greycliff, with a centered headline, a wide rounded video or image, and vertically stacked message and FAQ panels. Keep content within the measured 960px maximum width, maintain generous section pauses, and keep paragraph density readable. Use soft, broad card shadows sparingly. Keep image colors inside the media itself; do not promote them into interface colors. Finish with a compact, grouped-link footer.
