Charlie 的作品集以近乎纯黑的画布、醒目的定制字标和长篇作品网格呈现平面设计项目。导航与页脚保持克制，让色彩丰富、风格多样的作品图像承担主要的视觉节奏。
North star · Keep the interface nearly monochrome and let large, distinctive type and project artwork carry the visual impact.
The page is built on a nearly uninterrupted #000000 canvas, with #ffffff reserved for the expressive custom Charlie wordmark, navigation labels, borders, and other key text. #838383 appears as subdued footer copy rather than a competing brand accent. The opening is deliberately sparse: a small centered pill navigation sits above an oversized typographic mark, followed by generous black space before the portfolio grid begins. The grid is the visual engine of the page, displaying varied graphic design and typography projects as colorful, high-contrast tiles against black gutters. These artwork colors belong to individual projects, not the site’s core palette. NeueHaas provides clean sans-serif navigation and supporting text, while the display lettering is custom and highly geometric. The overall layout feels editorial and gallery-like: consistent grid placement gives structure, while each artwork brings its own scale, color, and typographic character. The footer returns to compact, quiet navigation and metadata.
配色
点色块复制色值。用途说明来自对页面的实测位置（背景、文字、描边、按钮）与截图判读。
品牌色
中性色
页面底色 · Gallery Black主文字 · Paper White次要文字 · Quiet Grey描边 · Paper White
文字
背景
对比度
WCAG
#ffffff Paper White
#000000 Gallery Black
21:1
AAA
#838383 Quiet Grey
#000000 Gallery Black
5.54:1
AA
字体
字号阶梯：Custom（比例约 4.243，正文 20px）。示例用免费替代字体渲染，数值为实测。
Aa 设计
NeueHaas
网络字体 · 字重 400 / 700 · 占比 99%
免费替代：Inter
Navigation, links, headings, body copy, captions, and footer text.
角色
示例
字号
字重
行高
字距
特大标题
Oversized custom lettering forming the hero wordmark.
Charlie
360px
400
0.7
-0.075em
一级标题
Bold section or page headings where present.
Charlie
40px
700
1.08
0
正文
Project labels and supporting portfolio text.
The quick brown fox 敏捷的狐狸
20px
400
1.25
0
辅助文字
Compact supporting labels and footer details.
The quick brown fox 敏捷的狐狸
19px
400
1.32
0
按钮
Short labels inside pill-shaped navigation controls.
The quick brown fox 敏捷的狐狸
19px
400
1.32
0
间距与布局
基准单位 1px · 密度：适中
59px版块间距
30px元素间距
—卡片内边距
1306px内容最大宽度
7px
16px
20px
30px
50px
55px
59px
The page uses a centered, gallery-like composition on a black canvas, with the measured content max width of 1306px. The hero wordmark and pill navigation are centered, while the long portfolio grid occupies the main scroll area and aligns project tiles into repeated columns. Generous black gutters separate artworks and preserve their individual framing. The opening has pronounced negative space; the footer compresses back into a three-column row. Overall density is comfortable, with a strong contrast between sparse introduction and image-rich gallery.
圆角与层次
按钮 · 9999px
没有测到阴影：页面是扁平的，层次靠底色和描边区分。
The interface is flat: there are no measured shadows or gradients. Strong contrast, black negative space, and thin white pill borders define the controls. Project images sit directly against the canvas with clear gutters rather than elevated cards or layered panels.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建（字体用替代字体）。
Pill navigation
Centered row of rounded controls labeled Work, Type, and About; white outlines and text, with the active Work control filled white and set in black text.
Hero wordmark
Large white custom display lettering centered beneath navigation; its distinctive segmented letterforms function as the primary visual anchor.
Project gallery
Long, multi-column collection of graphic and typographic project images. Keep the surrounding canvas black and allow each tile’s artwork to retain its own palette.
Project links
White NeueHaas links identify projects and may include a concise open-case-study action; avoid adding card-like surfaces.
Footer navigation
Repeats the compact Work, Type, and About pill controls above a restrained footer row.
Footer metadata
Copyright, email contact, and coding credit appear in a sparse three-column arrangement, with muted secondary text.
Imagery · The gallery consists of graphic design and typography project images, including poster-like compositions, experimental lettering, and vivid color treatments. Tiles retain their individual artwork palettes and proportions against the black page rather than adopting a unified image filter. The first viewport also shows a security restriction notice, which is not representative of the portfolio’s visual system; follow the full-page gallery for the intended content style.
Use Gallery Black (#000000) as the dominant canvas.
Reserve Paper White (#ffffff) for key text and outlined controls.
Let project artwork supply its own colors.
Center the hero mark and primary navigation.
Use rounded, thinly outlined navigation pills.
Keep the footer compact and visually quiet.
✕ 不该做
Do not introduce new interface accent colors.
Do not place project images inside raised cards.
Do not crowd the hero with supporting copy.
Do not treat artwork colors as brand palette colors.
Do not add gradients or decorative shadows.
Do not make footer metadata compete with the gallery.
给 AI 的提示词
想快速出一个同风格的新页面，把这段话连同 DESIGN.md 一起发给 AI。
Build a new creative portfolio page in Charlie’s style. Use Gallery Black (#000000) for the dominant canvas, Paper White (#ffffff) for primary text and thin pill-control outlines, and Quiet Grey (#838383) only for subdued secondary metadata. Center a compact row of rounded navigation pills above an oversized, custom-feeling typographic display mark. Keep the opening sparse, then give the work a long, multi-column gallery whose images retain their own colors and compositions; do not tint them to match the interface. Use a clean NeueHaas-like sans serif for labels and supporting text, with strong, expressive display lettering for the hero. Keep the layout flat, use clear black gutters between projects, and finish with a restrained three-part footer. Avoid shadows, gradients, colored UI accents, and card surfaces.
