# Antoniouve · Design system migration spec

> Source: https://antoniouve.com  ·  Curated by OpenDesign  ·  en

> An excellent example of expressive, playful web design that prioritizes personality and motion over rigid structure.

## 1. Identity DNA

This design system treats the screen as a living sketchbook, one that has lifted itself off the page and begun to move. It is a language of deliberate whimsy, where every element participates in a playful choreography against a high-energy field of warm yellow.

**One-liner:** A playful illustration and animation portfolio defined by vibrant yellow hues, bold black typography, and scattered whimsical graphic elements.
**Keywords:** Playful · Whimsical · Animated · Illustrative · Fun
**Analogy:** A sketchbook that jumped off the page and started dancing.

## 2. Color

The color system is built on a singular, declarative foundation: a luminous yellow ground that demands attention. Against this, sharp black typography creates immediate, high-contrast clarity, while scattered vibrant accents inject bursts of joyful energy.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FFC900` | main background |
| `--ink` | `#000000` | body text |
| `--muted` | `#7A7A7A` | placeholder |
| `--line` | `rgba(0,0,0,1.0)` | divider |

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

The guiding principle is one of maximum impact through warm, high-chroma saturation and stark, confident contrast.

## 3. Typography

Typographic voice is carried entirely by a geometric sans-serif, its clean lines providing a modern, friendly backbone. The category is chosen for its approachability and expressive flexibility, from massive display titles to small, clear UI labels.

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

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 123px | 1.0 | 500 | -1px | Hero title |
| h1 | 34px | 1.4 | 400 | 0px | Section headings |
| body | 26px | 1.0 | 400 | 0px | Body text |
| small | 9px | 1.0 | 400 | 0px | UI labels |

**Type rules:**
- Use geometric sans-serif for all text
- Maintain tight line-heights for display text

## 4. Spacing

Spacing follows a flexible, generous rhythm, prioritizing ample padding on interactive elements over rigid, mathematical grids.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Flexible spacing with generous padding on key interactive elements.

## 5. Surfaces

Surfaces are defined by crisp, 1px black borders that sketch clear containers without visual weight. The system forgoes drop shadows entirely, relying on the stark border lines and overlapping color for depth and hierarchy.

- **Radius:** sm 17px · md 17px · lg 429px · pill 429px
- **Borders:** 1px solid black

## 6. Layout

The layout is a full-viewport canvas, a field of opportunity for composition rather than a grid of constraints. Within this space, a massive central headline coexists with scattered, absolutely-positioned graphic elements that overlap and animate.

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

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

## 7. Motion & Interaction

Motion is philosophy here, not decoration. Elements float with smooth, elastic transitions defined by custom cubic-bezier easing, giving each shape a sense of buoyant, physical presence as it transforms and fades.

- **Durations:** micro 450ms · small 450ms · medium 600ms
- **Easing:** `cubic-bezier(0.19, 1, 0.22, 1)`
- **Patterns:**
  - Smooth elastic transitions for floating elements
  - Transform and opacity fades

- **Hover:** Smooth transforms and transitions on interactive elements.
- **Click:** Standard interaction feedback.
- **Transition:** 0.45s to 0.6s cubic-bezier easing.
- **Keyboard:** Standard focus management.

## 8. Voice & Don'ts

The editorial voice is informal, confident, and unapologetically playful, with headlines that are bold, expressive, and often mixed-case. The tone is set by simple, inviting call-to-actions housed in rounded, pill-shaped forms.

- **Tone:** Playful, informal, and confident.
- **Headline style:** Bold, lowercase or mixed case, and highly expressive.
- **CTA style:** Simple, inviting, and rounded.
- **Avoid:** Corporate language / Rigid grids / Dull colors

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

What is deliberately avoided is any hint of corporate sterility: rigid grids, dull palettes, and serif typography are strictly off-limits.

## System Prompt (paste into AI tool)

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