North star · Let full-bleed portrait photography and oversized heavy typography lead, then give lime text generous white space.
The homepage opens with a full-bleed photographic hero, using the image itself as the canvas for monumental, condensed lettering. The screenshot shows the opening name in warm orange over a dark portrait; this is image-specific color, not evidence of the site’s consistent text palette. Across the rest of the page, the measured brand system is primarily pure white (#ffffff) with vivid lime (#dbf863) used for large text, links, and headings. A muted teal (#556f6e) appears as an inverse surface in project-link treatments, while a second lime (#dcec5c) highlights navigation. Typography is heavy, tightly tracked Helvetica Now Display, with its condensed variant reserved for oversized display text. The layout is intentionally sparse: a small, quiet header sits over the hero, followed by a large white interval and a compact biographical statement, then widely separated contact details. Photography carries the personality; decoration stays minimal, with flat surfaces and no measured shadows or rounded-card language.
配色
点色块复制色值。用途说明来自对页面的实测位置(背景、文字、描边、按钮)与截图判读。
品牌色
强调色
表层色
中性色
页面底色 · Gallery White表层 · Slate Teal主文字 · Electric Lime强调 · Electric Lime强调 2 · Citrus Glow
文字
背景
对比度
WCAG
#dbf863 Electric Lime
#ffffff Gallery White
1.19:1
不达标
#dbf863 Electric Lime
#556f6e Slate Teal
4.53:1
AA
#dbf863 Electric Lime
#ffffff Gallery White
1.19:1
不达标
#dbf863 Electric Lime
#556f6e Slate Teal
4.53:1
AA
字体
字号阶梯:Custom(比例约 2,正文 18px)。示例用免费替代字体渲染,数值为实测。
Aa 设计
Helvetica Now Display Condensed
网络字体 · 字重 800 · 占比 81%
免费替代:Barlow Condensed
Oversized hero name and large contact links.
Aa 设计
Helvetica Now Display
网络字体 · 字重 800 · 占比 19%
免费替代:Inter
Biography, navigation, and smaller supporting text.
角色
示例
字号
字重
行高
字距
特大标题
Monumental name lettering layered across the opening hero image.
Danielle Levitt
72px
800
0.95
-0.01em
一级标题
Prominent biography statement introducing the photographer and her work.
Danielle Levitt
29px
800
0.95
-0.01em
正文
Bold supporting copy and contact information.
The quick brown fox 敏捷的狐狸
18px
800
1.6
0
导航
Compact header navigation and menu label.
Danielle Levitt
29px
800
0.95
-0.01em
链接
Oversized email contact links.
Danielle Levitt
72px
800
0.95
-0.01em
间距与布局
基准单位 4px · 密度:宽松
115px版块间距
—元素间距
—卡片内边距
1400px内容最大宽度
5px
20px
30px
50px
100px
115px
180px
The page uses a single-column flow with a measured maximum width of 1400px and a spacious overall density. The first section is a full-bleed image hero; the later white content section begins after a pronounced vertical pause. Keep the biography readable and left-aligned, then arrange contact groups with generous separation rather than enclosing them in cards. The visual rhythm comes from contrast between image-filled opening and open white space, not a dense grid.
圆角与层次
没有测到阴影:页面是扁平的,层次靠底色和描边区分。
The interface is predominantly flat: measured data contains no shadows, gradients, or radius scale. Avoid floating cards and decorative borders. Create depth through full-bleed photography, overlap between image and hero lettering, and the contrast between dark imagery and clean white content areas.
组件
下面的预览按实测的按钮、输入框、徽标、卡片样式重建(字体用替代字体)。
Hero wordmark
A huge, heavy condensed name sits over a full-bleed portrait, spanning most of the viewport and becoming the dominant graphic element.
Header
A minimal overlay header places a compact monogram at the left and a Menu control at the right; measured navigation uses bold display type.
Project links
Small project labels use black text over muted teal surfaces in the measured link treatment; keep them visually secondary to photography.
Biography
A bold lime statement introduces Danielle Levitt’s work on a white field, with substantial whitespace around it.
Contact links
Contact details are presented as large, heavy lime text links, including oversized email lettering rather than button-shaped controls.
Back to top
A simple text-only utility link uses the main lime accent and bold display type, without a filled button background.
Imagery · Use documentary-style portrait and fashion photography as the primary visual material. The opening frame is full bleed, with oversized name lettering layered directly over the photograph. Further down, a loose collage of project images punctuates the white canvas. Keep images photographic and editorial rather than substituting illustrations or 3D graphics; photographed colors may vary and should not be mistaken for brand palette tokens.
Use Electric Lime (#dbf863) for prominent text and links.
Set display lettering in a heavy condensed face.
Keep the canvas white and generously open.
Overlay the hero name directly on the image.
Use text links instead of rounded button treatments.
✕ 不该做
Do not treat colors inside photographs as brand tokens.
Do not add gradients or decorative shadows.
Do not introduce rounded cards or pill buttons.
Do not crowd the biography and contact content.
Do not replace the photographic character with illustrations.
Do not soften the heavy typographic hierarchy with light weights.
给 AI 的提示词
想快速出一个同风格的新页面,把这段话连同 DESIGN.md 一起发给 AI。
Build a new page in Danielle Levitt’s portfolio style. Start with a full-bleed documentary portrait and layer oversized, heavy condensed display lettering over it; use photograph-specific colors only within the image. For the interface, make Gallery White (#ffffff) the main canvas, Electric Lime (#dbf863) the dominant text and link color, and Citrus Glow (#dcec5c) a restrained navigation accent. Use Slate Teal (#556f6e) only for occasional inverse project-link surfaces and Soft Black (#000000) for small supporting labels where appropriate. Choose a bold Helvetica Now Display-like sans serif, with a condensed alternative for the largest type. Keep the header minimal, the biography direct, contact links text-only, and the vertical rhythm spacious. Avoid cards, shadows, gradients, and rounded controls.