---
name: Buzzusborne
description: "This site is a great example of how personal branding can be conveyed through typography, whitespace, and a warm, conversational tone without relying on complex design elements."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#2A394E"
  line: "rgba(42, 57, 78, 1)"

typography:
  display:
    fontFamily: humanist-sans
    fontSize: 46px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1px"
  body:
    fontFamily: geometric-sans
    fontSize: 15px
    lineHeight: 1.6
    fontWeight: 400
    letterSpacing: "0px"

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

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

---

## Overview

A personal maker portfolio that turns complex problems into simple, lovable products.

*A friendly neighborhood maker showcasing their digital creations.*

## Colors

Clean white canvas with dark navy typography for high contrast and readability.

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#2A394E`)** — uses `ink` token
- **Borders (`rgba(42, 57, 78, 1)`)** — uses `line` token

## Typography

- **Display:** humanist-sans
- **Body:** geometric-sans

- Use Roboto for body text and Poetsen One for bold display headlines.
- Keep line heights generous (1.6 for body) for readability.
- Avoid tight letter spacing on large headlines to maintain a friendly feel.

## Layout

Single-column centered layout with generous vertical spacing between sections.

*Rhythm:* Generous whitespace with 150px side padding on desktop to focus attention on central content.

## Elevation & Depth

- 0 4px 20px rgba(42, 57, 78, 0.05)
- Borders: Solid 2px borders in dark navy for subtle UI elements.

## Shapes

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

## Components

- **button:** Rounded pill buttons with solid dark backgrounds and white text.
- **card:** Rounded containers with soft beige backgrounds showcasing project screenshots.
- **hero:** Large centered headline with playful emojis, followed by a project showcase card.

## Do's and Don'ts

**Don't:**
- Don't use stark, cold color palettes — screenshot shows warm white with friendly dark navy text.
- Don't use sharp, angular corners on cards — screenshot shows large 20px rounded corners.
- Don't use small, cramped typography — screenshot shows large, readable display type at 46px.
- Don't use complex, multi-column layouts — screenshot shows a clean, single-column centered design.
- Don't use dense, text-heavy sections — screenshot shows generous whitespace and breathing room.
- Don't use aggressive, corporate language — screenshot shows friendly, first-person conversational tone.

---

## System Prompt (paste into AI agent)

```
This is a personal portfolio site for a maker named Buzz. It positions itself as a friendly, approachable creator who turns complex problems into simple, lovable products. Key hex colors include a clean white background (#FFFFFF) and dark navy text (#2A394E). Typography categories include humanist-sans for display and geometric-sans for body, using Roboto as the primary font family. The layout is centered and spacious with generous padding. Critical donts: don't use sharp corners (use 20px radius), don't use small cramped type (use large 46px headlines), don't use cold corporate language (use friendly conversational tone). The design emphasizes whitespace, rounded elements, and playful emojis to create a warm, inviting feel.
```