---
name: Flowen Me
description: "This site is a prime example of brutalist web design, using extreme typographic scale and high contrast to create a memorable and impactful developer portfolio."
version: alpha

colors:
  background: "#161B1B"
  primary: "#FFFFFF"
  line: "rgba(255, 255, 255, 1)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 100px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0px"
  body:
    fontFamily: display-serif
    fontSize: 108px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0px"

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

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

---

## Overview

A high-contrast, typographically intense portfolio for a creative developer.

*A brutalist neon-lit industrial dashboard.*

## Colors

Extreme contrast between a dark, muted background and bright, white typography for maximum legibility and visual impact.

- **Background (`#161B1B`)** — uses `bg` token
- **Primary text (`#FFFFFF`)** — uses `ink` token
- **Borders (`rgba(255, 255, 255, 1)`)** — uses `line` token

## Typography

- **Display:** geometric-sans
- **Body:** display-serif
- **Mono:** monospace

- All primary text is set to uppercase.
- Headlines use a massive, tightly packed geometric sans.
- Alternate headlines use a decorative display serif.

## Layout

Asymmetrical, typography-driven layout where text dictates the flow.

*Rhythm:* Generous vertical padding between major sections to separate large typographic blocks.

## Elevation & Depth

- Borders: No visible borders, relying entirely on typographic scale and spatial separation.

## Shapes

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

## Components

- **button:** Text-based links with underlines or arrows.
- **card:** None, imagery is integrated directly into the typographic flow.
- **chip:** None.
- **input:** None.
- **hero:** A massive typographic stack of words paired with a project thumbnail.

## Do's and Don'ts

**Don't:**
- Don't use a centered layout — screenshot shows left-aligned, asymmetrical text blocks.
- Don't use subtle colors or gradients — screenshot shows a stark, high-contrast palette.
- Don't use small or standard text sizes — screenshot shows massive, display-level typography.
- Don't use rounded corners — screenshot shows sharp, rectangular edges.
- Don't use complex icons or buttons — screenshot shows simple, text-based navigation.
- Don't use a light theme — screenshot shows a dark background with bright text.

---

## System Prompt (paste into AI agent)

```
This is a high-contrast, experimental portfolio for a creative developer. The design DNA is defined by massive, uppercase typography set against a very dark background (#161B1B), using bright white ink (#FFFFFF) for maximum impact. The typography categories include a bold geometric-sans for primary headlines and a decorative display-serif for secondary elements. The layout is asymmetrical and driven entirely by typographic scale rather than traditional grids or cards. Critical donts: Do not use rounded corners or soft shadows, as the aesthetic is sharp and brutalist. Do not center content; maintain the strong left-aligned typographic rhythm. Avoid standard body text sizes; everything is treated as a display element.
```