---
name: Gus Biz
description: "This site is a great example of how to break design conventions thoughtfully to create a memorable, personality-driven brand presence."
version: alpha

colors:
  background: "#008263"
  primary: "#050000"
  tertiary: "#FF8488"
  neutral: "#F5C04F"
  line: "rgba(5,0,0,1)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 28px
    lineHeight: 1.2
    fontWeight: 700
    letterSpacing: "0px"

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

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

---

## Overview

A creative agency site using brutalist aesthetics, high-contrast colors, and playful typography.

*A bold, playful scrapbook that breaks traditional design grids.*

## Colors

High-contrast, playful palette built on a teal-green base with red and yellow accents.

- **Background (`#008263`)** — uses `bg` token
- **Primary text (`#050000`)** — uses `ink` token
- **Accent (`#FF8488`)** — uses `accent` token
- **Muted (`#F5C04F`)** — uses `muted` token
- **Borders (`rgba(5,0,0,1)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** humanist-sans

- Use serif for primary headlines and display text.
- Use sans-serif for body text and UI elements.
- Maintain a clear typographic hierarchy between playful display and readable body text.

## Layout

Grid-based but intentionally offset and playful, breaking strict alignment.

*Rhythm:* Loose and organic rhythm, often breaking strict grids for playful layout.

## Elevation & Depth

- 0px 1px 0px 0px rgba(0,0,0,1)
- Borders: Thin, 1px solid borders, often dark.

## Shapes

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

## Components

- **button:** Simple, text-based or basic geometric shapes like circles.
- **card:** Minimal, often defined by borders or stark background contrast.
- **chip:** Simple geometric shapes or stars.
- **input:** Standard text inputs, minimal styling.
- **hero:** Large, bold typography with playful graphic elements, full-width.

## Do's and Don'ts

**Don't:**
- Don't use a muted or subtle color palette — screenshot shows a vibrant teal, red, and yellow.
- Don't use a strictly minimal layout — screenshot shows a playful, grid-breaking composition.
- Don't use only sans-serif fonts — screenshot prominently features a serif display font.
- Don't avoid geometric shapes — screenshot shows a starburst logo and circular elements.
- Don't create a static hero section — screenshot shows a dynamic, scrolling marquee.
- Don't use subtle shadows or gradients — screenshot shows flat colors with thin, sharp borders.

---

## System Prompt (paste into AI agent)

```
Gus Biz is a playful, creative agency website with a bold, brutalist-inspired aesthetic. It features a vibrant color palette centered around a teal-green background (#008263), with strong accents of red (#FF8488) and yellow (#F5C04F), and dark ink (#050000). Typography is expressive, combining transitional-serif for display text with a humanist-sans for body copy. The layout is grid-based but intentionally playful and organic, often breaking strict alignment. Key features include a dynamic scrolling marquee, a bold starburst logo, and minimal, geometric UI components. Critical don'ts: do not use a muted or corporate color palette, do not create a strictly minimal or sterile layout, and do not avoid playful geometric elements or expressive typography.
```