---
name: Quentinhocde
description: "This site is a perfect example of brutalist, typography-driven design where the layout and font choices carry all the visual weight."
version: alpha

colors:
  background: "#000000"
  primary: "#FFFFFF"
  neutral: "#FFFFFF"
  line: "rgba(255,255,255,1.0)"

typography:
  display-xl:
    fontFamily: geometric-sans
    fontSize: 144px
    lineHeight: 1.04
    fontWeight: 700
    letterSpacing: "-4.32px"
  display-lg:
    fontFamily: geometric-sans
    fontSize: 97px
    lineHeight: 1.04
    fontWeight: 700
    letterSpacing: "-2.916px"
  body:
    fontFamily: grotesque-sans
    fontSize: 16px
    lineHeight: 1.2
    fontWeight: 400
    letterSpacing: "normal"
  caption:
    fontFamily: grotesque-sans
    fontSize: 10px
    lineHeight: 1.15
    fontWeight: 400
    letterSpacing: "normal"

rounded:
  sm: 0px
  md: 0px
  lg: 0px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  2xl: 24px
  3xl: 32px

---

## Overview

A high-contrast, typography-led portfolio site for an interactive developer.

*A digital portfolio that acts as a modern, brutalist poster for a creative technologist.*

## Colors

Strict monochrome with no accent colors, relying entirely on typography scale and weight for hierarchy.

- **Background (`#000000`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Muted (`#FFFFFF`)** — uses `muted` token
- **Borders (`rgba(255,255,255,1.0)`)** — uses `line` token

## Typography

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

- Use tight, negative letter-spacing for large display text to create a compact, impactful look.
- Uppercase is used extensively for display text and navigation links to maintain a structured, brutalist feel.
- Body text should remain at a standard 16px for legibility against the complex background.

## Layout

A full-bleed immersive layout with a complex background, featuring a fixed top navigation bar and content distributed across a flexible grid.

*Rhythm:* A 4px base scale is used for all spacing, with 12px and 20px acting as primary gutters for internal component padding.

## Elevation & Depth

- Borders: No visible borders; separation is achieved through spatial positioning and typography.

## Shapes

- `sm`: 0px
- `md`: 0px
- `lg`: 0px
- `pill`: 999px

## Components

- **button:** Text-based links with pointer cursors and uppercase styling, lacking traditional button borders or backgrounds.
- **card:** No traditional cards; information is presented as floating text blocks directly over the background.
- **chip:** No chips or tags are visible.
- **input:** No form inputs are visible on the landing page.
- **hero:** A full-viewport immersive section dominated by a massive, multi-line typographic statement overlapping a complex, textured background.

## Do's and Don'ts

**Don't:**
- Don't introduce a third color for accents — screenshot shows a strictly monochrome white-on-black palette.
- Don't use wide letter-spacing on large text — screenshot shows tight, negative letter-spacing for a dense, brutalist look.
- Don't use a serif or script typeface for display text — screenshot shows a geometric sans-serif for all major headings.
- Don't apply borders, shadows, or background colors to interactive elements — screenshot shows plain text links.
- Don't use traditional button components — screenshot shows uppercase text links with pointer cursors instead.
- Don't use a multi-column grid for the main hero statement — screenshot shows a massive, single-column typographic block.

---

## System Prompt (paste into AI agent)

```
A portfolio site for an interactive developer using a strict monochrome palette (#000000 background, #FFFFFF text) and bold, brutalist typography. The design relies on a massive, uppercase display font (categorized as geometric-sans) paired with a clean grotesque-sans for body text. The layout is immersive and full-bleed, avoiding traditional UI components like cards or colored buttons. Interaction feedback is provided through smooth 0.3s cubic-bezier transitions. Critical constraints: never use accent colors, never use wide letter-spacing on large text, and never use traditional bordered buttons.
```