North star · Let oversized warm-white type and restrained hairline geometry carry the composition across a quiet, textured dark canvas.
The first view is defined by a near-black, subtly grainy canvas and warm off-white typography. Although measured CSS reports olive and several saturated burgundy, green, and blue hues, the screenshot reads as monochrome; treat those extra colours as section or media-derived values, not as the defining brand palette. A thin pale rule divides the compact top navigation from the full-bleed hero. The title is oversized, uppercase, and tightly stacked, with a small index counter offset at the upper right. Fine circular arcs cross the dark field as delicate geometric overlays, not as prominent illustrations. Small uppercase mono labels form a low, three-part information row beneath the headline. The page feels spacious despite its dense information architecture: large areas of dark negative space balance the headline and hairline geometry. Keep surfaces flat, typography light in weight, and rules crisp; avoid conventional cards, button fills, or decorative colour blocks.
Display and editorial sans-serif for the hero headline and larger studio statements.
Aa 设计
NB Akademie Mono
网络字体 · 字重 400 · 占比 21%
免费替代：IBM Plex Mono
Compact navigation, counters, captions, contact links, and small metadata.
角色
示例
字号
字重
行高
字距
特大标题
Oversized uppercase hero statement, stacked across the opening canvas.
cthdrl
121px
400
0.85
0
一级标题
Primary page heading or prominent studio statement.
cthdrl
35px
400
1
0
二级标题
Secondary section headings and editorial statements.
cthdrl
32px
400
1.2
-0.01em
正文
Supporting studio description and explanatory copy.
The quick brown fox 敏捷的狐狸
16px
400
normal
-0.031em
辅助文字
Small uppercase location labels and metadata.
The quick brown fox 敏捷的狐狸
11px
400
1.2
-0.045em
导航
Compact uppercase header navigation and studio identifier.
The quick brown fox 敏捷的狐狸
11px
400
1.2
-0.045em
链接
Small uppercase contact and utility links.
The quick brown fox 敏捷的狐狸
11px
400
1.2
-0.045em
代码
Technical-looking index labels and compact mono details.
const style = 1;
11px
400
1.2
-0.045em
间距与布局
基准单位 2px · 密度：适中
45px版块间距
30px元素间距
—卡片内边距
1380px内容最大宽度
10px
16px
26px
30px
50px
Use a 12-column, full-bleed composition with content aligned to a shared left edge and a measured maximum width of 1380px. The hero is dominated by a very large, tightly stacked headline; place its sequence counter separately at the upper right. Keep the header as a narrow ruled band and arrange supporting location, contact, and studio copy in a compact three-part row. Preserve broad empty areas below the copy, letting circular linework span the canvas. Spacing is comfortable, not card-dense.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is essentially flat: no measured shadows or card elevation define the page. Use thin, bright rules for separation and delicate outlines for the oversized arcs. Keep text and geometry layered over the dark media field, with no filled CTA treatment or raised panels.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Top navigation
A narrow full-width header with a small studio mark, mono studio identifier, work/contact links, and an adjacent horizontally moving statement; separate it from the hero with a fine light rule.
Hero statement
A huge regular-weight uppercase sans headline, broken into close stacked lines and aligned to the left edge.
Sequence counter
A compact mono index, shown separately near the upper-right of the hero.
Geometric hero overlay
Large, thin circular arcs cross the dark canvas as low-key outlines behind and around the headline.
Studio details row
Small uppercase mono location, contact, and studio-description blocks arranged as three concise columns below the heading.
Contact link
An understated uppercase mono email link using the same warm off-white as the rest of the interface.
Imagery · The visible hero relies on motion-led or video-backed dark texture, subtle grain, and fine circular linework rather than product photography. Media should feel full-bleed and atmospheric, with low-contrast detail that never competes with the headline. The measured page includes many video and image elements, so allow future sections to carry expressive media, but keep the opening frame predominantly monochrome.
Set the hero in oversized, regular-weight uppercase sans type.
Use warm off-white for the main text and navigation.
Keep navigation and metadata compact and monospaced.
Use thin rules and sparse circular geometry.
Leave substantial negative space around the supporting copy.
✕ 不该做
Do not make olive the dominant visible hero colour.
Do not turn the measured gradient palette into a rainbow UI.
Do not place the content in conventional raised cards.
Do not use filled, rounded CTA buttons.
Do not crowd the headline with supporting copy.
Do not add heavy shadows or thick borders.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in cthdrl’s experimental editorial studio style. Use a full-bleed near-black, subtly textured canvas, with Warm Paper (#e7ded1) for primary type and Rule White (#fefefd) only for delicate dividers and outlines. The measured Olive Canvas (#3e4107) and saturated section colours are secondary; do not let them override the screenshot’s monochrome character. Set a narrow ruled mono navigation band above an oversized, regular-weight uppercase sans headline. Add a small upper-right index, a few compact mono metadata blocks, and restrained circular linework layered behind the content. Preserve broad negative space, flat surfaces, and crisp alignment. Avoid card grids, heavy shadows, filled buttons, and decorative gradients in the hero. Use NB Akademie and NB Akademie Mono where available, with close free sans and mono substitutes otherwise.
