North star · Let oversized, expressive type introduce the story, then use quiet white space, deep teal text, and fine dividers to make details easy to scan.
The visual identity begins with a near-black teal canvas and oversized uppercase display lettering, colored by a restrained olive-to-lavender gradient. This dramatic opening gives way to broad white editorial sections, where deep teal headings and dark body text keep long-form information legible. The custom AngelList display face carries large headlines; its companion sans-serif handles paragraphs, labels, navigation, and buttons. Typography is generally regular-weight, with uppercase used for navigation and section markers rather than throughout the body. The page alternates narrative blocks, product groupings, statistics, and team content, using generous whitespace and fine pale borders to establish rhythm instead of card-heavy decoration. Images appear primarily in the team profiles and related-content cards; people are shown in simple portrait crops, while resource cards can include product imagery or colored fields. Accent gradients are reserved for expressive headline moments and visual transitions.
Body copy, navigation, labels, buttons, and links.
Aa 设计
angellistDisplay
网络字体 · 字重 400 · 占比 44%
免费替代：DM Sans
Large display lettering and editorial headings.
角色
示例
字号
字重
行高
字距
特大标题
Oversized uppercase lettering in the opening year-in-review hero.
AngelList
260px
400
0.8
-0.025em
一级标题
Primary editorial headlines introducing major page chapters.
AngelList
80px
400
1.05
-0.01em
二级标题
Large section titles and key narrative statements.
AngelList
60px
400
1.15
-0.015em
三级标题
Product-group and prominent subsection headings.
AngelList
38px
400
1.25
0
四级标题
Smaller feature or product headings within content groups.
AngelList
28px
400
1.3
0
正文
Paragraphs explaining product changes, company context, and team details.
The quick brown fox 敏捷的狐狸
18px
400
1.6
-0.002em
辅助文字
Compact supporting copy and secondary labels.
The quick brown fox 敏捷的狐狸
16px
400
1.5
-0.002em
按钮
Uppercase CTA text, including the header join action.
The quick brown fox 敏捷的狐狸
14px
500
1.5
-0.002em
导航
Uppercase header navigation and section links.
The quick brown fox 敏捷的狐狸
14px
500
0.8
-0.002em
链接
Prominent text links, such as open roles and related resources.
The quick brown fox 敏捷的狐狸
20px
400
1.4
-0.004em
间距与布局
基准单位 8px · 密度：宽松
32px版块间距
32px元素间距
—卡片内边距
1344px内容最大宽度
4px
8px
12px
16px
24px
32px
40px
48px
80px
144px
A long, vertically paced editorial page, with a centered content frame capped at the measured 1344px maximum width. The opening hero and partner section span dark teal bands; most narrative content sits on a white canvas. Use clear section breaks, broad whitespace, and fine rules rather than dense panels. Product content forms three-column groups where measured, while industry and team content use two-column layouts. Align headings and paragraphs to the start edge, reserving centered alignment for the partner heading.
圆角与层次
按钮 · 50%
徽标 · 4px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface reads as flat: no measured shadows are present. Separate content with whitespace, pale hairlines, and shifts between white and deep teal surfaces. Buttons use rounded pill silhouettes, while small role badges keep a modest rectangular radius. Avoid raised card stacks; imagery and color fields provide the limited depth.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Pill navigation CTA
Header join action uses a Soft Ivory (#f9f9f7) fill, Deep Teal (#001d21) uppercase medium text, and a pill-shaped silhouette.
Hero display
Oversized uppercase year-in-review lettering sits on Deep Teal (#001d21), using an olive-to-periwinkle gradient treatment and a muted supporting line.
Section introduction
Large regular-weight display heading and a shorter body paragraph share a spacious white section, aligned to the start.
Metric presentation
Prominent financial and platform figures are set within the dark opening portion, with sparse labels and restrained separators.
Team profile row
Profile content uses fine horizontal dividers, large names, compact role badges, expandable rows, and simple portrait crops.
Related-content cards
Three-column editorial resource links combine concise headings and descriptions with image or color-field treatments.
Imagery · The page is primarily typographic and does not depend on decorative illustration or 3D renders. Photography is concentrated in the team profiles, using individual portraits with clean crops and minimal framing. Related-content cards mix editorial text with a small number of product or report images; keep these images inside their card layouts rather than spreading them across the page as full-bleed backgrounds. Gradient lettering is the dominant expressive visual.
Use Deep Teal (#001d21) for the hero and selected inverse bands.
Keep the main editorial canvas white and visually quiet.
Reserve the olive and periwinkle gradient for expressive display moments.
Pair oversized display headings with restrained, readable body copy.
Use whitespace and pale rules to separate long-form sections.
Keep navigation and CTA labels uppercase and compact.
✕ 不该做
Do not turn every section into a colored card.
Do not use heavy shadows to create depth.
Do not apply gradients indiscriminately to body text or controls.
Do not crowd the page with dense copy or tight section spacing.
Do not replace the restrained palette with vivid unrelated colors.
Do not make photography the dominant visual system.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new editorial page in AngelList’s 2024 review style. Use Deep Teal (#001d21) for a dramatic opening or selected inverse bands, and Gallery White (#ffffff) for the long-form content canvas. Set the main display headlines in a light, custom-feeling sans-serif, with oversized uppercase lettering where appropriate; reserve an Olive Gold (#7f7833) to Periwinkle (#898ee5) gradient for high-impact display moments. Use a clean companion sans-serif for body copy, navigation, labels, and links. Keep content spacious, align section introductions to the start edge, and divide blocks with whitespace and pale Mist Border (#ccd5d6) rules rather than shadowed cards. Use simple portrait photography for people, restrained resource-card imagery, and compact pill CTAs in Soft Ivory (#f9f9f7).
