Concrete Club Studio 以超大衬线标题、克制的编辑式文案和鲜明的色块，介绍一个位于巴黎的创意协作团队。页面依次呈现亮黄色首屏、深色工作室介绍、浅色作品画廊和深色理念区。
North star · Let oversized editorial typography and uninterrupted colour fields define the page, keeping supporting content sparse and deliberately placed.
The page’s visual identity is led by a saturated muted-yellow field (#e1d372) and oversized plum lettering (#462d4a), rather than the white canvas suggested by the measured first-section background. The screenshot makes the yellow hero the defining brand moment: small, restrained metadata sits near the top edges, while the huge, delicate serif wordmark occupies most of the viewport. Subsequent sections switch to charcoal (#212121) with fine light copy, then a pale grey gallery whose many image tiles introduce project-specific colour and texture. TRJN DaVinci supplies the expressive display and much of the compact uppercase copy; Neue Montreal is a minor supporting face. The layout is deliberately spacious and asymmetrical, with isolated text groups rather than conventional cards or dense content columns. Keep surfaces flat and transitions clear: contrast comes from large uninterrupted colour bands, expressive typography, and illustrative or portfolio imagery, not from shadows or decorative UI chrome.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
表层色
中性色
功能色
页面底色 · Paper White表层 · Studio Charcoal表层 2 · Gallery Mist表层 3 · Concrete Yellow主文字 · Plum Ink次要文字 · Gallery Mist弱文字 · Paper White强调 · Concrete Yellow
文字
背景
对比度
WCAG
#462d4a Plum Ink
#ffffff Paper White
12.11:1
AAA
#462d4a Plum Ink
#212121 Studio Charcoal
1.33:1
不达标
#462d4a Plum Ink
#f5f6f5 Gallery Mist
11.17:1
AAA
#462d4a Plum Ink
#e1d372 Concrete Yellow
7.93:1
AAA
#f5f6f5 Gallery Mist
#ffffff Paper White
1.08:1
不达标
#f5f6f5 Gallery Mist
#212121 Studio Charcoal
14.86:1
AAA
字体
字号阶梯：Custom（比例约 18.75，正文 16px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
TRJN DaVinci
网络字体 · 字重 400 · 占比 90%
免费替代：Cormorant Garamond
Expressive hero display, navigation, captions, and uppercase body copy.
Aa 设计
Neue Montreal
网络字体 · 字重 400 · 占比 10%
免费替代：Inter
Minor supporting text face within the measured font mix.
角色
示例
字号
字重
行高
字距
特大标题
Oversized two-line Concrete Club hero wordmark.
Concrete Club Studio
300px
400
0.73
-0.03em
正文
Compact uppercase studio statements and explanatory copy.
The quick brown fox 敏捷的狐狸
16px
400
1.19
0
辅助文字
Small editorial labels and supporting metadata.
The quick brown fox 敏捷的狐狸
14px
400
1.14
-0.03em
导航
Small, understated header navigation links.
The quick brown fox 敏捷的狐狸
16px
400
0.75
-0.03em
间距与布局
基准单位 2px · 密度：宽松
230px版块间距
—元素间距
—卡片内边距
1380px内容最大宽度
3px
5px
10px
30px
60px
The page uses broad, full-width horizontal bands and an intentionally spacious rhythm, with a measured maximum content width of 1380px. The hero’s huge wordmark is left aligned and nearly fills the viewport, while tiny intro and location/navigation details sit at opposite top corners. Dark-section copy appears in separate, asymmetrically positioned groups. The pale portfolio area is measured as an eight-column image grid with generous breathing room. Keep the density low and the composition editorial rather than applying a uniform card layout.
圆角与层次
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The visual system is flat: measured shadows and gradients are absent, and component radii are not part of the style. Separate content with uninterrupted colour bands and whitespace, not elevated cards. Avoid adding prominent borders; the measured palette contains no clear border colour, and the screenshot’s hierarchy comes from colour and typography.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Hero wordmark
A huge, regular-weight TRJN DaVinci serif title in Plum Ink (#462d4a), broken across lines on the Concrete Yellow (#e1d372) field.
Corner metadata
Small, quiet introductory text and location/navigation details sit near opposite top corners of the hero.
Studio statement
Sparse, uppercase copy is positioned in isolated groups on a full-width Studio Charcoal (#212121) section.
Portfolio gallery
An eight-column measured image grid occupies the Gallery Mist (#f5f6f5) section; imagery remains visually varied and unboxed.
Principles section
A second full-width charcoal band carries numbered collective principles as editorial text, without card styling.
Text links
Minimal navigation links use TRJN DaVinci, with Plum Ink on light surfaces and white text where contrast requires it.
Imagery · The pale gallery section contains many portfolio images arranged as a grid, with project imagery carrying its own varied colours. The dark introduction also shows a small hand-drawn line illustration, reinforcing the analog-meets-digital character. Treat imagery as artwork rather than product photography: preserve its original aspect and visual character, and let the surrounding pale or charcoal bands remain quiet.
Use Concrete Yellow (#e1d372) as the signature hero field.
Set the hero title in an expressive, oversized serif.
Keep metadata small and peripheral to the main title.
Alternate broad charcoal and pale section bands.
Use asymmetrical placements for editorial text.
Let portfolio imagery retain its individual character.
✕ 不该做
Do not turn the layout into a conventional SaaS dashboard.
Do not add shadows, gradients, or rounded-card styling.
Do not crowd the hero with supporting content.
Do not use the gallery as a uniform set of boxed cards.
Do not introduce extra colours as defining brand colours.
Do not replace the delicate serif character with heavy geometric display type.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new creative-studio page in Concrete Club’s editorial visual language. Use Concrete Yellow (#e1d372) as a bold uninterrupted opening field, with a very large, delicate Plum Ink (#462d4a) serif headline and minimal corner-aligned metadata. Use TRJN DaVinci where available; approximate it with Cormorant Garamond, and keep copy compact and often uppercase. Structure the page as spacious full-width bands, alternating Studio Charcoal (#212121) with Gallery Mist (#f5f6f5). Place text asymmetrically and leave substantial negative space. Present project work as an open image grid without card chrome, allowing the artwork’s colours to vary. Keep controls and links understated, use flat surfaces, and avoid shadows, gradients, and invented ornamental borders.
