深色主题设计机构creative production company homepage暗色编辑式排版电影感极简字体主导原网页 chelsea.com ↗ · 2026-10-12 采集 · 1440×900 桌面端
Chelsea 以满幅动态影像搭配醒目的大字排版，整体采用克制的黑蓝配色。首页通过导演名录、精选作品和办公联系信息，呈现紧凑的编辑式浏览体验。
North star · Let cinematic media and oversized typography dominate, while using black space and Signal Blue links to keep navigation clear.
The page is anchored by a near-total black canvas, letting full-bleed video and oversized off-white lettering carry the opening impression. Signal Blue (#4490ff) is used for roster links, small location labels, and circular controls, while warm off-white (#f4efe9) appears in the navigation and large wordmark against imagery. Neue Haas Unica Pro keeps the typography clean and direct: large, regular-weight display text contrasts with compact captions and practical contact details. The structure moves from immersive media to a two-column director roster, then a tightly arranged strip of work thumbnails and a concise contact footer. Wide black intervals separate these blocks without adding decorative panels. Thin light rules define the navigation and section boundaries. Keep imagery richly cinematic and allow its colors to vary; the measured palette and screenshot indicate that photographic colors are content, not the brand system.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
表层色
中性色
功能色
页面底色 · Deep Canvas主文字 · Signal Blue描边 · Warm Porcelain强调 · Signal Blue
文字
背景
对比度
WCAG
#4490ff Signal Blue
#000000 Deep Canvas
6.68:1
AA
#4490ff Signal Blue
#000000 Deep Canvas
6.68:1
AA
字体
字号阶梯：Custom（比例约 1.852，正文 14px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
Neue Haas Unica Pro
网络字体 · 字重 400 / 700 · 占比 100%
免费替代：Inter
All page typography, from navigation and oversized display lettering to roster links and tiny project captions.
角色
示例
字号
字重
行高
字距
一级标题
Oversized wordmark or lead display text over the opening media.
Chelsea
48px
400
1
0
二级标题
Section-level display headings and large editorial statements.
Chelsea
32px
400
1.12
0
正文
Director roster, office details, and general supporting content.
The quick brown fox 敏捷的狐狸
14px
400
1.43
0
辅助文字
Compact project labels and secondary footer information.
The quick brown fox 敏捷的狐狸
12px
400
1.1
0
按钮
Large, plain-text action or location control.
Chelsea
32px
400
1.12
0
导航
Large top-level navigation labels over the hero.
Chelsea
32px
400
1.12
0
链接
Prominent blue director names and other primary text links.
Chelsea
48px
400
1
0
间距与布局
基准单位 8px · 密度：适中
32px版块间距
16px元素间距
—卡片内边距
1376px内容最大宽度
8px
12px
16px
32px
64px
80px
96px
The opening viewport is a full-bleed video stage with navigation overlaid along its top edge and the wordmark anchored over the footage. Subsequent content sits on a black canvas with a measured page max width of 1376px. The roster uses two columns; selected work is arranged as a dense, multi-column thumbnail strip. A single-column footer gathers social links, office contacts, and legal details. Spacing moves between compact internal groupings and generous black section intervals, with thin rules marking transitions.
圆角与层次
按钮 · 50%
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is predominantly flat: the black canvas separates content rather than cards, and measured data reports no shadows. Use thin light rules for navigation and section boundaries. Place navigation and display type directly over video when needed, with contrast coming from the footage and lettering rather than elevated containers.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Overlay navigation
Large, regular-weight light labels sit across the top of the full-bleed hero; a thin warm off-white rule separates navigation from the footage.
Roster links
Prominent Signal Blue (#4490ff) names form the main content column, balanced by a compact US/INT'L location selector.
Circular accent control
Small blue circular controls punctuate media and footer areas; measured buttons use a 50% radius.
Selected-work strip
A dense row of campaign thumbnails with small blue project and filmmaker captions, set directly on black.
Contact footer
A compact, multi-column directory groups social links, regional representation, office details, and legal links above a fine divider.
Oversized wordmark
Large warm off-white lettering overlays the hero footage, cropped and stacked as a bold image-led brand signature.
Imagery · Use full-bleed, cinematic video for the opening, with active scenes and natural motion rather than a static product render. The selected-work area uses a horizontal-feeling strip of film and campaign thumbnails with tiny captions. Imagery is edge-to-edge or tightly cropped; its warm, varied photographic colors are content rather than additions to the measured brand palette.
Separate sections with generous black space and fine rules.
Keep project captions compact and secondary.
✕ 不该做
Do not add card shadows or decorative gradients.
Do not introduce unmeasured brand colors.
Do not box every roster link into a card.
Do not make the page feel like a conventional SaaS dashboard.
Do not let captions compete with the main imagery.
Do not add dense ornament around the wordmark.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new creative-agency page in Chelsea’s cinematic editorial style. Use Deep Canvas (#000000) as the dominant background, Signal Blue (#4490ff) for prominent links and small accents, and Warm Porcelain (#f4efe9) for light navigation and display lettering. Set all text in Neue Haas Unica Pro, or use Inter as a free substitute; favor regular weight and strong changes in scale. Lead with full-bleed moving imagery and restrained overlay navigation. Follow it with an open roster or editorial content block, a compact image-led work gallery, and a practical multi-column contact footer. Keep content directly on the canvas, use thin rules sparingly, and leave generous black intervals between sections. Avoid card-heavy UI, shadows, gradients, and invented palette colors.
