---
name: Simonfosters Website
description: "A masterclass in restraint—this portfolio proves that confident typography and generous whitespace can create more impact than complex visual effects."
version: alpha

colors:
  background: "#F6F7F6"
  primary: "#393737"
  neutral: "rgba(57,55,55,0.5)"
  line: "rgb(57,55,55)"

typography:
  display:
    fontFamily: grotesque-sans
    fontSize: 61px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.5px"
  heading:
    fontFamily: grotesque-sans
    fontSize: 55px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "-0.5px"
  subhead:
    fontFamily: grotesque-sans
    fontSize: 24px
    lineHeight: 1.3
    fontWeight: 400
    letterSpacing: "0"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.56
    fontWeight: 400
    letterSpacing: "0"
  small:
    fontFamily: grotesque-sans
    fontSize: 14px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0"

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

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

---

## Overview

A senior product designer's portfolio showcasing premium case studies with restrained aesthetics

*A curated gallery of design work presented with quiet confidence and precise typography*

## Colors

Neutral warm grays with subtle noise texture, letting project imagery provide all color

- **Background (`#F6F7F6`)** — uses `bg` token
- **Primary text (`#393737`)** — uses `ink` token
- **Muted (`rgba(57,55,55,0.5)`)** — uses `muted` token
- **Borders (`rgb(57,55,55)`)** — uses `line` token

## Typography

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

- All text uses weight 400 consistently
- Uppercase is used sparingly for labels and tags
- Tight leading on display sizes for impact

## Layout

Single-column portfolio layout with generous padding and centered content

*Rhythm:* Generous vertical spacing between sections with consistent 32px and 96px gaps creating breathing room

## Elevation & Depth

- Borders: 1px solid borders in dark gray (#393737) with generous pill-shaped corners on buttons and tags

## Shapes

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

## Components

- **button:** Pill-shaped outline buttons with generous padding (16px 32px) and 48px border-radius, dark text on transparent background
- **card:** Full-width project showcases with noise-textured gradient backgrounds and embedded browser screenshots
- **chip:** Small uppercase label tags with 1px solid borders and tight padding for categorization
- **hero:** Large typographic project title with year range, tag label, and descriptive subtitle above a full-width project preview image

## Do's and Don'ts

**Don't:**
- Don't use multiple font weights — screenshot shows uniform weight 400 throughout
- Don't add decorative graphics or illustrations — screenshot shows only typography and project imagery
- Don't use bright accent colors in the UI — screenshot shows neutral grays with color coming only from project content
- Don't create complex multi-column layouts — screenshot shows a clean single-column centered layout
- Don't add drop shadows to cards or elements — screenshot shows completely flat, shadow-free surfaces
- Don't use serif fonts anywhere — screenshot shows exclusively grotesque-sans typography with clean lines
- Don't add background colors to buttons — screenshot shows only outline-style pill buttons

---

## System Prompt (paste into AI agent)

```
This is a senior product designer's portfolio site with a clean, understated aesthetic. The design uses a neutral warm gray (#F6F7F6) background with subtle noise texture and dark charcoal (#393737) typography. All text uses Neue Montreal (grotesque-sans category) at weight 400, creating a consistent and refined appearance. Project titles are displayed large (55-61px) with tight leading. The layout is single-column with generous 96px spacing between sections. Buttons are pill-shaped with 48px border-radius and 1px solid borders. Accent colors are absent from the UI itself—color comes exclusively from project showcase imagery. Critical donts: never use multiple font weights, never add shadows, never use decorative graphics, and keep the palette strictly neutral grays. The site prioritizes content clarity and breathing room over visual complexity.
```