---
name: Antoniouve
description: "An excellent example of expressive, playful web design that prioritizes personality and motion over rigid structure."
version: alpha

colors:
  background: "#FFC900"
  primary: "#000000"
  neutral: "#7A7A7A"
  line: "rgba(0,0,0,1.0)"

typography:
  display:
    fontFamily: geometric-sans
    fontSize: 123px
    lineHeight: 1.0
    fontWeight: 500
    letterSpacing: "-1px"
  h1:
    fontFamily: geometric-sans
    fontSize: 34px
    lineHeight: 1.4
    fontWeight: 400
    letterSpacing: "0px"
  body:
    fontFamily: geometric-sans
    fontSize: 26px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0px"
  small:
    fontFamily: geometric-sans
    fontSize: 9px
    lineHeight: 1.0
    fontWeight: 400
    letterSpacing: "0px"

rounded:
  sm: 17px
  md: 17px
  lg: 429px
  pill: 429px

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

---

## Overview

A playful illustration and animation portfolio defined by vibrant yellow hues, bold black typography, and scattered whimsical graphic elements.

*A sketchbook that jumped off the page and started dancing.*

## Colors

High-chroma, warm yellow background with sharp black typography for maximum impact and playful energy.

- **Background (`#FFC900`)** — uses `bg` token
- **Primary text (`#000000`)** — uses `ink` token
- **Muted (`#7A7A7A`)** — uses `muted` token
- **Borders (`rgba(0,0,0,1.0)`)** — uses `line` token

## Typography

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

- Use geometric sans-serif for all text
- Maintain tight line-heights for display text

## Layout

Full-width hero canvas with scattered absolute-positioned graphic elements.

*Rhythm:* Flexible spacing with generous padding on key interactive elements.

## Elevation & Depth

- Borders: 1px solid black

## Shapes

- `sm`: 17px
- `md`: 17px
- `lg`: 429px
- `pill`: 429px

## Components

- **button:** Rounded pill-shaped buttons with black borders and 24px padding.
- **card:** Rounded containers, though the primary visual is scattered floating elements.
- **hero:** Massive 123px title overlapping abstract animated shapes on a solid yellow background.

## Do's and Don'ts

**Don't:**
- Don't use a white background — screenshot shows a dominant yellow instead
- Don't use serif fonts — screenshot shows geometric sans-serif text instead
- Don't make it minimal — screenshot shows a canvas full of scattered, colorful shapes instead
- Don't use subtle pastels — screenshot shows saturated yellow, orange, and pink accents instead
- Don't use sharp corners — screenshot shows rounded and pill-shaped elements instead
- Don't use rigid alignment — screenshot shows scattered, overlapping graphic elements instead

---

## System Prompt (paste into AI agent)

```
This is a playful, expressive portfolio for an illustrator and animator. It is positioned as a fun, creative, and approachable studio. The dominant color is a warm yellow (#FFC900) paired with solid black (#000000) for text. Typography features a geometric sans-serif category, with large display text up to 123px and small UI text at 9px. Critical donts: Never use a white or dark background, never use rigid grid structures, never use serif fonts, and never present elements in a sterile or overly corporate manner. The layout is a full-viewport canvas with scattered, overlapping colorful graphic elements.
```