---
name: Phippscharlie
description: "Excellent example of a portfolio that lets work speak through bold typography and immersive photography rather than decorative UI elements."
version: alpha

colors:
  background: "#ffffff"
  primary: "#101011"
  neutral: "#7f7f7f"
  bg-quiet: "#ededed"
  line: "rgba(0, 0, 0, 0.1)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 162px
    lineHeight: 0.9
    fontWeight: 400
    letterSpacing: "-2px"
  headline:
    fontFamily: grotesque-sans
    fontSize: 63px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-1.5px"
  body:
    fontFamily: grotesque-sans
    fontSize: 20px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.2px"
  caption:
    fontFamily: grotesque-sans
    fontSize: 13px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "-0.2px"

rounded:
  sm: 4px
  md: 8px
  lg: 12px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

A sophisticated graphic design portfolio that uses bold typography and immersive photography to showcase a refined visual identity.

*A high-end print magazine layout brought to the web*

## Colors

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

- **Background (`#ffffff`)** — uses `bg` token
- **Primary text (`#101011`)** — uses `ink` token
- **Muted (`#7f7f7f`)** — uses `muted` token
- **Borders (`rgba(0, 0, 0, 0.1)`)** — uses `line` token

## Typography

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

- 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

## Layout

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

*Rhythm:* generous whitespace with asymmetric placement for editorial feel

## Elevation & Depth

- Borders: minimal, only used for subtle separation

## Shapes

- `sm`: 4px
- `md`: 8px
- `lg`: 12px
- `pill`: 999px

## Components

- **button:** minimal text links with subtle hover opacity changes
- **card:** large image-forward project showcases with minimal text overlay
- **chip:** none visible
- **input:** none visible
- **hero:** full-screen photographic background with massive bleeding typography

## Do's and Don'ts

**Don't:**
- 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

---

## System Prompt (paste into AI agent)

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