---
title: "Danielle Levitt design system"
variant: extended
source: https://www.daniellelevitt.com/
captured_at: 2026-10-12
theme: light
industry: portfolio
generator: Design DNA (https://four.wiralomi.com/style/daniellelevitt-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Danielle Levitt · Design System

> Portrait photography meets oversized editorial typography

**Theme:** light · **Industry:** portfolio · **Source:** https://www.daniellelevitt.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

A photography portfolio pairs full-bleed portraits with monumental name lettering and a restrained contact page. Vivid lime typography punctuates broad white space, while the opening image sets a cinematic, image-led tone.

## North star

Let full-bleed portrait photography and oversized heavy typography lead, then give lime text generous white space.

## Overview

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.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Electric Lime | `#dbf863` | `--color-electric-lime` | brand | Main page text and oversized links, including the biography and contact details. |
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary canvas and the open field surrounding biography and contact content. |
| Slate Teal | `#556f6e` | `--color-slate-teal` | surface | Inverse surface behind project-link treatments; use sparingly. |
| Soft Black | `#000000` | `--color-soft-black` | neutral | Small navigation and project-link text where measured. |
| Citrus Glow | `#dcec5c` | `--color-citrus-glow` | accent | Menu label accent and a secondary lime emphasis in navigation. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#556f6e` (Slate Teal) · `--color-text` → `#dbf863` (Electric Lime) · `--color-accent` → `#dbf863` (Electric Lime) · `--color-accent-2` → `#dcec5c` (Citrus Glow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#dbf863` | `#ffffff` | 1.19:1 | fail |
| `#dbf863` | `#556f6e` | 4.53:1 | AA |
| `#dbf863` | `#ffffff` | 1.19:1 | fail |
| `#dbf863` | `#556f6e` | 4.53:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Helvetica Now Display Condensed | `--font-display` | webfont | 800 | Oversized hero name and large contact links. | Barlow Condensed |
| Helvetica Now Display | `--font-body` | webfont | 800 | Biography, navigation, and smaller supporting text. | Inter |

- **Helvetica Now Display Condensed:** Heavy 800 weight; very large, compact display lettering with slightly negative tracking.
- **Helvetica Now Display:** Measured at weight 800 throughout; bold, tightly set headings and navigation, with no uppercase transformation.

### Type scale — Custom (ratio ≈ 2, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 800 | 0.95 | -0.01em | — | Helvetica Now Display Condensed | Monumental name lettering layered across the opening hero image. |
| h1 | 29px | 800 | 0.95 | -0.01em | — | Helvetica Now Display | Prominent biography statement introducing the photographer and her work. |
| body | 18px | 800 | 1.6 | 0 | — | Helvetica Now Display | Bold supporting copy and contact information. |
| nav | 29px | 800 | 0.95 | -0.01em | — | Helvetica Now Display | Compact header navigation and menu label. |
| link | 72px | 800 | 0.95 | -0.01em | — | Helvetica Now Display Condensed | Oversized email contact links. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 5, 20, 30, 50, 100, 115, 180 px.
- Section rhythm 115px · element gap — · card padding — · max content width 1400px.

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.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s ease` on interactive elements.

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.

## 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.

## Components

### 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.

### Measured component styles

- **Primary button** (“Menu”): transparent background · text #dcec5c · radius 0px · padding 0px · 800 28.8px Helvetica Now Display
- **Link** (“projects”): background #556f6e · text #000000 · radius 0px · padding 0px · 800 10px Helvetica Now Display
- **Navigation item** (“D anielle — L evitt Menu”): transparent background · text #000000 · radius 0px · padding 0px 20px · 800 10px Helvetica Now Display

## Do

- 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.

## Don't

- 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.

## Agent prompt

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.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed opening image with compact header labels and oversized name lettering layered over the photograph. | overlay menu, visual-first entry | full-bleed photography, oversized condensed type, minimal header |
| 2 | contact | Open white content area with a bold introductory statement and separated contact groups. | direct contact links, back-to-top utility | lime typography, single-column flow, generous whitespace |

## Source CSS custom properties (selected)

```css
--swup-fade-theme-duration: .4s;
--logo-color: #E78E29;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/daniellelevitt-com