# Gus Biz · Design system migration spec

> Source: https://gus.biz  ·  Curated by OpenDesign  ·  en

> This site is a great example of how to break design conventions thoughtfully to create a memorable, personality-driven brand presence.

## 1. Identity DNA

The Gus Biz design system is built on the logic of a bold, playful scrapbook—one that deliberately breaks traditional design grids to create a memorable, personality-driven presence. It is a system of controlled chaos, where expressive typography and high-contrast color establish a confident, creative voice from the first impression.

**One-liner:** A creative agency site using brutalist aesthetics, high-contrast colors, and playful typography.
**Keywords:** Creative · Brutalist · Playful · Award-Winning
**Analogy:** A bold, playful scrapbook that breaks traditional design grids.

## 2. Color

A high-contrast, playful palette is anchored by a teal-green base, with bold red and yellow accents serving as punctuation. This chromatic strategy prioritizes immediate visual impact and clear differentiation over subtlety.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#008263` | main background |
| `--ink` | `#050000` | body text |
| `--muted` | `#F5C04F` | placeholder |
| `--accent` | `#FF8488` | single accent |
| `--line` | `rgba(5,0,0,1)` | divider |

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

The guiding principle is unapologetic vibrancy; every color choice is made for contrast and character, not corporate neutrality.

## 3. Typography

The typographic voice is split between expressive, transitional-serif for display headlines and a clean, humanist-sans for body text and interface elements. This deliberate pairing creates a clear hierarchy between playful, large-scale statement text and highly readable functional copy.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 28px | 1.2 | 700 | 0px | Display text and emphasis |

**Type rules:**
- 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.

## 4. Spacing

Spacing follows a loose, organic rhythm, often intentionally breaking from a strict grid to reinforce the system's playful, scrapbook-like quality.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Loose and organic rhythm, often breaking strict grids for playful layout.

## 5. Surfaces

Surfaces are defined by depth through stark contrast, not gradients or soft shadows. Thin, 1px solid borders and a single, sharp drop shadow create a flat, graphic depth that feels constructed and direct.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Shadows:**
  - 0px 1px 0px 0px rgba(0,0,0,1)
- **Borders:** Thin, 1px solid borders, often dark.

## 6. Layout

The layout skeleton is fundamentally grid-based, but its execution is intentionally offset and playful. Components and content blocks break strict alignment, creating dynamic compositions that feel hand-assembled rather than rigidly computed.

- **Container max:** 1280px
- **Paragraph max:** 680px
- **Grid:** 12 columns, gutter 24px
- **Breakpoints:** 768 / 1024 px

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

## 7. Motion & Interaction

Motion philosophy centers on smooth, intentional transitions that enhance the playful character without causing distraction. Continuous, lively movement, like the scrolling marquee, is balanced with subtle, responsive transforms on hover to create a dynamic but coherent interface.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.25, 0.1, 0.25, 1)`
- **Patterns:**
  - Smooth color and background transitions
  - Subtle transforms on hover
  - Playful, continuous scrolling marquee

- **Hover:** Color or background changes, subtle transforms.
- **Click:** Immediate visual feedback.
- **Transition:** Smooth transitions for colors and backgrounds (0.5s).
- **Keyboard:** Standard focus states, likely enhanced with custom outlines.

## 8. Voice & Don'ts

The editorial voice is playful, confident, and unapologetically bold, expressed through large, often all-lowercase serif headlines and direct, integrated calls-to-action. The system's personality is defined as much by what it rejects as what it embraces.

- **Tone:** Playful, confident, and unapologetically bold.
- **Headline style:** Large, expressive serif typography, often in all-lowercase.
- **CTA style:** Simple, direct, often integrated into the playful layout.
- **Avoid:** Subtlety / Corporate jargon / Overly complex UI patterns

### Don'ts
- ❌ 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.

Gus Biz deliberately avoids subtlety, corporate jargon, overly complex UI patterns, and any aesthetic that feels muted, sterile, or conventionally minimal.

## System Prompt (paste into AI tool)

```
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.
```