Hard Work Club 以近乎全黑的作品展示页面，搭配电影感营销影像和克制的白色文字。页面末尾切换为简洁的白色联系区，形成鲜明收尾。
North star · Keep the interface nearly monochrome and let cinematic campaign media provide the page’s colour, texture, and movement.
The visual identity is anchored by a black canvas (#000000), used across the opening, introduction, and extensive portfolio rather than alternating decorative section colours. White (#ffffff) carries the wordmark, project labels, navigation, and contact-area canvas. The vivid blue menu control is visible in the screenshot but is not part of the supplied measured palette, so treat it as a small isolated interface detail rather than a broader brand colour. Founders Grotesk supplies light, readable supporting copy and bold uppercase captions; Maligna adds a distinctive editorial display voice. The layout uses a centered site mark above a large full-bleed video frame, then a long sequence of image-led portfolio compositions with generous black intervals. Rounded, irregular media masks and asymmetrical tile groupings give the gallery its shape. Keep imagery responsible for most colour and texture: campaign footage can be vibrant, but the surrounding interface remains flat, quiet, and high contrast.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
表层色
中性色
功能色
页面底色 · Gallery White表层 · Club Black主文字 · Club Black次要文字 · Gallery White描边 · Soft Charcoal
Body copy, section headings, captions, navigation, buttons, and contact details.
Aa 设计
Maligna
网络字体 · 字重 500 / 300 · 占比 37%
免费替代：Bodoni Moda
Expressive display and headline typography, including the refined brand wordmark character.
角色
示例
字号
字重
行高
字距
特大标题
Oversized editorial statements and prominent brand moments.
Hard Work Club
61.5px
300
1.2
-0.03em
一级标题
Primary headline or standout page statement.
Hard Work Club
31.5px
500
1.2
-0.03em
二级标题
Introduction and major section headings.
The quick brown fox 敏捷的狐狸
22.5px
300
1.21
0
正文
Introductory copy and contact information.
The quick brown fox 敏捷的狐狸
18px
300
1.5
0
辅助文字
Uppercase portfolio labels and section markers.
The quick brown fox 敏捷的狐狸
16px
700
1.2
0
按钮
Compact social and navigation actions.
The quick brown fox 敏捷的狐狸
18px
300
0.78
0
间距与布局
基准单位 8px · 密度：适中
48px版块间距
8px元素间距
—卡片内边距
1344px内容最大宽度
3px
5px
8px
13px
16px
24px
32px
48px
Use a centered site header and a wide, capped content area, with the measured page maximum of 1344px. The first screen is dominated by a large inset video frame; below it, maintain a single-column page rhythm while arranging portfolio items in asymmetric two-column groups and full-width media bands. Align project titles over their images. Leave generous black intervals between campaigns, then switch to a spacious white contact section with four aligned content areas. Overall density is comfortable, not card-heavy.
圆角与层次
按钮 · 9999px
导航 · 9999px
链接 · 8px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is predominantly flat: no measured shadows or gradients. Use dark canvas bands and image overlays for separation rather than raised cards. Keep borders rare and subtle; the supplied measured border colours appear on outlines, while the main visual depth comes from footage, contrast, and overlapping media crops.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Centered wordmark header
Place the white Hard Work Club mark at the center of the black header, with a compact circular menu control offset to the right.
Hero video frame
Use a large, nearly viewport-wide inset video frame against black, with gently rounded corners and minimal surrounding interface.
Intro statement
Set the short agency introduction as quiet white copy on black, with generous separation from the hero and portfolio.
Featured work gallery
Arrange campaign videos and stills in varied wide and paired compositions; overlay centered white project names directly on imagery.
Portfolio action
Use a restrained text link near the end of the black work sequence, rather than a large filled CTA.
Contact section
Switch to a white canvas and organize inquiry categories and email links into aligned columns with dark typography.
Social outline button
Render Instagram actions as light text with a thin #cccccc outline and a pill-shaped silhouette.
Imagery · Prioritize full-bleed campaign video and still photography over decorative illustrations. Frame media in broad rounded or sculpted masks, mixing wide panels with differently sized paired tiles. Preserve the source footage’s colour and texture, while placing a darkened or black interface around it so white project titles remain legible. The measured screenshot’s dominant near-black values largely reflect the site canvas and media treatment.
Keep the main canvas black and the interface monochrome.
Let campaign media supply most of the page’s colour.
Use white project names directly over their imagery.
Vary gallery composition while maintaining a clear page rhythm.
Keep navigation and calls to action visually restrained.
Make the contact section a deliberate white-on-black-to-black-on-white transition.
✕ 不该做
Do not introduce extra interface colours from campaign footage into the brand palette.
Do not turn every work item into a conventional bordered card.
Do not crowd the black space between major portfolio moments.
Do not use heavy shadows or decorative gradients.
Do not make buttons more prominent than the work.
Do not force the gallery into a repetitive uniform grid.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new creative-agency page in the Hard Work Club visual style. Use Club Black (#000000) as the dominant canvas and Gallery White (#ffffff) for navigation, headlines, and text; reserve Soft Charcoal (#313130) and Button Silver (#cccccc) for rare, subtle outlines. Set body and utility copy in a light Founders Grotesk-style sans serif, with an editorial Maligna-style display face for standout headlines. Create a centered header, a cinematic video-led hero, and an asymmetric portfolio gallery with broad rounded media crops and titles overlaid directly on footage. Use generous black intervals, restrained links, and no shadows. Close with a spacious white contact band arranged in aligned columns. Keep colours in the interface quiet and let photography or video carry the visual drama.
