# Phippscharlie · Design system migration spec

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

> Excellent example of a portfolio that lets work speak through bold typography and immersive photography rather than decorative UI elements.

## 1. Identity DNA

The Phippscharlie design system treats the browser window as a printed page—specifically, a high-end magazine spread where each element has been placed with compositional precision. It is a system built on restraint, where the absence of decoration becomes the most powerful statement. Like a well-edited publication, its identity emerges not from what is added, but from what is deliberately withheld.

**One-liner:** A sophisticated graphic design portfolio that uses bold typography and immersive photography to showcase a refined visual identity.
**Keywords:** minimal · editorial · sophisticated · graphic design · portfolio
**Analogy:** A high-end print magazine layout brought to the web

## 2. Color

Color is used as a structural element rather than a decorative one. The palette is a strict monochrome of white and near-black, with full-bleed photography providing the only tonal variation—a choice that ensures the work itself remains the focal point of chromatic energy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#ffffff` | main background |
| `--bg-quiet` | `#ededed` | quiet area |
| `--ink` | `#101011` | body text |
| `--muted` | `#7f7f7f` | placeholder |
| `--line` | `rgba(0, 0, 0, 0.1)` | divider |

**Color principle:** High-contrast monochrome palette with full-bleed photography and stark black sections for dramatic focus

The governing principle is that color should never compete with the imagery it frames; it can only provide a stark, neutral stage.

## 3. Typography

The typographic voice is one of bold, unambiguous statement, set in a consistent regular weight that relies on extreme scale for impact rather than stylistic variation. Display type is treated as a graphic form, often bleeding off-screen edges, while body copy maintains a disciplined, comfortable reading size.

- **Display:** grotesque-sans
- **Body:** grotesque-sans
- **Mono:** monospace

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 162px | 0.9 | 400 | -2px | Massive headlines that bleed off-screen edges |
| headline | 63px | 1.0 | 400 | -1.5px | Section headers and project titles |
| body | 20px | 1.4 | 400 | -0.2px | Main body copy and descriptions |
| caption | 13px | 1.4 | 400 | -0.2px | Navigation links and small UI elements |

**Type rules:**
- Use extremely tight negative letter-spacing for display type
- Maintain consistent regular weight across all typography
- Keep body text at a comfortable reading size while letting display type dominate

## 4. Spacing

Spacing operates on a rhythm of generous, asymmetric whitespace that creates editorial tension and allows each component to breathe.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** generous whitespace with asymmetric placement for editorial feel

## 5. Surfaces

Surfaces are intentionally flat, devoid of shadows or elevation effects, reinforcing the print-inspired aesthetic. Borders are used sparingly, only for the most subtle separation where absolutely necessary.

- **Radius:** sm 4px · md 8px · lg 12px · pill 999px
- **Borders:** minimal, only used for subtle separation

## 6. Layout

The layout skeleton alternates between full-bleed photographic hero sections and clean, monochromatic content blocks, creating a powerful visual cadence. Text is often placed asymmetrically within these containers, rejecting centered defaults for a more dynamic, editorial composition.

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

**Skeleton:** full-bleed hero images with overlaid text, alternating white and black sections

## 7. Motion & Interaction

Motion is applied with the subtlety of a well-executed print transition. Elements reveal themselves through gentle opacity fades and soft transforms on scroll, with durations that feel deliberate rather than instantaneous.

- **Durations:** micro 220ms · small 500ms · medium 1000ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - opacity fade-ins
  - gentle transforms for scrolling reveals

- **Hover:** opacity reduction for links and interactive elements
- **Click:** standard pointer cursor with immediate visual feedback
- **Transition:** smooth opacity and transform transitions on state changes
- **Keyboard:** standard tab navigation

## 8. Voice & Don'ts

The editorial voice is confident, professional, and understated, mirroring the visual tone. Headlines are large, impactful statements that often bleed beyond their containers, while calls to action are rendered as minimal text links, refusing to shout.

- **Tone:** confident, professional, and understated
- **Headline style:** large, impactful statements that bleed beyond container edges
- **CTA style:** subtle text links rather than prominent buttons
- **Avoid:** excessive decoration / bright colors / visual clutter

### Don'ts
- ❌ don't use bright accent colors — screenshot shows strict monochrome palette with white, black, and photographic tones
- ❌ don't add decorative borders or shadows — screenshot shows completely flat surfaces with no elevation effects
- ❌ don't use small, timid typography — screenshot shows massive display type that dominates the viewport
- ❌ don't center-align all content — screenshot shows asymmetric text placement for editorial dynamism
- ❌ don't use heavy button styles — screenshot shows text-only navigation links with minimal visual weight
- ❌ don't overcrowd the layout — screenshot shows generous whitespace and breathing room between elements

This system deliberately avoids bright accent colors, decorative UI elements, and any visual clutter that might distract from the portfolio's photographic work.

## System Prompt (paste into AI tool)

```
This is a sophisticated graphic design portfolio for a London-based designer. The design uses a strict monochrome palette with white (#ffffff) and near-black (#101011) as primary colors, with photographic imagery providing tonal variation. Typography is set in grotesque-sans categories with massive display sizes up to 162px featuring tight letter-spacing. Key critical donts: never use bright accent colors, avoid adding shadows or elevation effects, and never shrink the display typography below its bold, dominant scale. The layout alternates between full-bleed photographic hero sections and clean white or dark sections, creating an editorial magazine-like flow with generous whitespace and asymmetric text placement.
```
