风格库/个人作品集/Danielle Levitt

Danielle Levitt

肖像摄影与超大编辑字体相遇Portrait photography meets oversized editorial typography

浅色主题个人作品集photographer portfolio homepage编辑感摄影超大字体极简全幅影像原网页 daniellelevitt.com ↗ · 2026-10-12 采集 · 1440×900 桌面端
Danielle Levitt 首屏

摄影作品集以全幅肖像和醒目的姓名大字开场,并以简洁的联系信息收尾。鲜亮的柠檬绿文字点缀大片留白,首屏则以电影感影像建立视觉基调。

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 White1.19:1不达标
#dbf863 Electric Lime#556f6e Slate Teal4.53:1AA
#dbf863 Electric Lime#ffffff Gallery White1.19:1不达标
#dbf863 Electric Lime#556f6e Slate Teal4.53:1AA

字体

字号阶梯: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
72px8000.95-0.01em
一级标题
Prominent biography statement introducing the photographer and her work.
Danielle Levitt
29px8000.95-0.01em
正文
Bold supporting copy and contact information.
The quick brown fox 敏捷的狐狸
18px8001.60
导航
Compact header navigation and menu label.
Danielle Levitt
29px8000.95-0.01em
链接
Oversized email contact links.
Danielle Levitt
72px8000.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.

页面版块

共 2 个版块,按页面从上到下排列,每个都标了类型、布局和交互套路。

该做与不该做

✓ 该做

  • Lead with a full-bleed, editorial photograph.
  • 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.

相似风格

Danielle Levitt 设计系统 — 配色、字体与 DESIGN.md | Design DNA