# Daniellelevitt · Design system migration spec

> Source: https://www.daniellelevitt.com  ·  Curated by OpenDesign  ·  en

> This site is an excellent example of a bold, expressive portfolio that uses extreme typography and an unconventional layout to elevate editorial photography.

## 1. Identity DNA

This system operates like a high-end editorial magazine's digital portfolio, where the grid is dissolved and the layout becomes a dynamic collage. Its identity is built on the tension between massive, structural typography and overlapping photographic frames, creating a space that feels both curated and expressive.

**One-liner:** An expressive photography agency portfolio for documenting music, art, fashion, and celebrity.
**Keywords:** fashion · editorial · photography · agency · portrait
**Analogy:** A high-end editorial magazine's digital portfolio

## 2. Color

The palette is a study in stark contrast: a light, warm canvas (#F9F7F7) provides the ground, against which a deep, brownish-ink (#392E2B) and a signature pastel pink (#F1B5C2) assert themselves with graphic precision. The pink functions not as a background, but as a high-chroma accent that activates text and graphic elements.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#F9F7F7` | main background |
| `--bg-quiet` | `#392E2B` | quiet area |
| `--ink` | `#392E2B` | body text |
| `--accent` | `#F1B5C2` | single accent |
| `--line` | `rgba(57, 46, 43, 1)` | divider |

**Color principle:** A stark, high-contrast palette where bold, pastel pink accents and massive typography interact with a clean canvas to frame vibrant editorial photography.

Color is used with graphic intent, never as a passive fill.

## 3. Typography

Typography is the system's structural element, set exclusively in a single grotesque-sans family at an extreme weight (800). The voice is massive, all lowercase, and tightly tracked, using scale and density to create visual hierarchy and architectural presence.

- **Display:** grotesque-sans
- **Body:** grotesque-sans

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 130px | 0.85 | 800 | -1.3px | Massive structural background text and primary branding |
| headline | 72px | 0.95 | 800 | -0.72px | Section headings and large contact details |
| body | 29px | 0.95 | 800 | -0.29px | Subheadings and contact labels |

**Type rules:**
- All typography is set to an extreme heavy weight (800)
- Letter spacing is always tight to negative
- Line height is exceptionally tight for display sizes

## 4. Spacing

Rhythm is intentionally loose and asymmetric, governed by the requirements of overlapping images and the scale of the type.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Asymmetric and loose to accommodate overlapping images and massive type

## 5. Surfaces

Surfaces are defined by absence; there are no borders, shadows, or rounded containers. Depth is achieved through the layering of type and photography, with separation created purely through whitespace and typographic hierarchy.

- **Radius:** sm 0px · md 0px · lg 0px · pill 50px
- **Borders:** No borders used; separation is achieved through whitespace and type hierarchy

## 6. Layout

The layout skeleton is a free-form, gridless collage where images and massive background type are positioned to overlap and interact. This arrangement prioritizes a dynamic, editorial composition over a rigid, predictable structure.

- **Container max:** 1920px
- **Paragraph max:** 800px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

**Skeleton:** A gridless, asymmetric collage where images overlap massive background typography

## 7. Motion & Interaction

Motion philosophy is one of elegant minimalism, favoring smooth, simultaneous fades and slides over complex choreography. All transitions share a consistent 0.5-second duration and a cubic-bezier curve, creating a unified sense of responsive, physical movement.

- **Durations:** micro 300ms · small 500ms · medium 500ms
- **Easing:** `cubic-bezier(0.65, 0, 0.35, 1)`
- **Patterns:**
  - Elements fade and slide in simultaneously
  - Menu overlay slides in from the right with a smooth cubic-bezier

- **Hover:** Text changes color (typically to pink) with a smooth 0.5s transition
- **Click:** Triggers navigation or menu overlay transitions
- **Transition:** All interactive elements use a global 0.5s transition for color and opacity
- **Keyboard:** Standard navigation with no visible focus rings observed

## 8. Voice & Don'ts

The editorial voice is bold and confident, mirroring the visual system's directness. Navigation is reduced to simple text links, and language avoids corporate softness, ornamentation, and subtlety.

- **Tone:** Bold, confident, and highly visual
- **Headline style:** All lowercase, tightly tracked, and massive
- **CTA style:** Simple text-based links without explicit button styling
- **Avoid:** Subtlety / Ornamentation / Corporate language

### Don'ts
- ❌ Don't use multiple font families — screenshot shows a single grotesque-sans family used exclusively for all text
- ❌ Don't use rounded containers or cards — screenshot shows sharp, unstyled photographic frames
- ❌ Don't use soft drop shadows — screenshot shows completely flat typography and photography
- ❌ Don't use uppercase text — screenshot shows exclusively lowercase text for headings and navigation
- ❌ Don't use standard grid spacing — screenshot shows an asymmetric, collage-based layout
- ❌ Don't use a dark primary background — screenshot shows a light #F9F7F7 background with a dark #392E2B footer section

The system deliberately rejects standard UI conventions like uppercase headings, rounded corners, and decorative shadows in favor of its own stark, typographic language.

## System Prompt (paste into AI tool)

```
This is an expressive photography agency portfolio for Danielle Levitt, focusing on music, art, fashion, and celebrity. The design is a bold, asymmetric collage that pairs massive, tightly tracked grotesque-sans typography (#392E2B, weight 800) with vibrant editorial photography. A signature pastel pink (#F1B5C2) acts as a high-chroma accent for text and graphic elements, standing out against the light #F9F7F7 canvas. Critical constraints: use only a single, heavy grotesque-sans font family; avoid uppercase text; use no borders, shadows, or rounded corners; and maintain a loose, asymmetric layout that allows images and type to overlap freely. Interactions should be smooth, using a 0.5s cubic-bezier transition for color and opacity changes.
```