# Sick Agency · Design system migration spec

> Source: https://sick.agency  ·  Curated by OpenDesign  ·  en

> This site is a masterclass in using extreme typography and bold color to create a memorable and impactful brand identity without relying on photography.

## 1. Identity DNA

The system is built as a vibrant, street-art-inspired digital magazine, where every component feels like a stencil or poster element applied with conviction. It treats typography not as content but as the primary architectural material, constructing a dense, expressive structure from type alone.

**One-liner:** An expressive digital design agency specializing in complete product packaging with a bold, typographic-first visual identity.
**Keywords:** creative · agency · expressive · packaging · bold
**Analogy:** A vibrant, street-art-inspired digital magazine.

## 2. Color

The palette is a high-energy, two-tone primary scheme of vibrant orange and bold yellow, punctuated by a striking blue accent reserved for interactive elements. This is not a subtle gradient but a deliberate, confrontational contrast.

| Token | Value | Use |
|---|---|---|
| `--bg` | `#FF4E27` | main background |
| `--ink` | `#FFC700` | body text |
| `--muted` | `#0029FF` | placeholder |
| `--accent` | `#0029FF` | single accent |
| `--line` | `rgba(255,199,0,1)` | divider |

**Color principle:** High-contrast, energetic palette using a primary orange background with bold yellow typography and a striking blue accent for interactive elements.

The principle is absolute high contrast; every hue is fully saturated to maximize visual impact and maintain an unapologetically bold presence.

## 3. Typography

The typographic voice is dual: a condensed grotesque handles massive, uppercase display headlines with tight tracking, while a transitional-serif provides a contrasting, legible foundation for body copy.

- **Display:** condensed-grotesque
- **Body:** transitional-serif

| Token | Size | Line-height | Weight | Letter-spacing | Use |
|---|---|---|---|---|---|
| display | 200px | 0.85 | 900 | -0.24px | Hero headlines and dominant typographic elements |
| display-sm | 160px | 0.9 | 900 | -0.24px | Section headlines |
| body | 24px | 1.4 | 400 | 0 | Descriptive text blocks |

**Type rules:**
- Use uppercase for display type
- Maintain tight letter-spacing for condensed grotesque display font
- Use transitional-serif for body copy to provide contrast

## 4. Spacing

Spacing is dictated by the dense typographic layout, creating an asymmetrical rhythm that feels packed and energetic rather than airy.

- **Base unit:** 4px
- **Scale:** 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96 px
- **Rhythm:** Asymmetrical and tight, dictated by the dense typographic layout rather than a strict grid.

## 5. Surfaces

Depth is achieved not with shadows but through division; solid 1px lines in the background color carve the layout into distinct, graphic blocks. Surface is a matter of delineation, not elevation.

- **Radius:** sm 0px · md 0px · lg 0px · pill 999px
- **Borders:** Solid 1px lines in the background color (#FFC700) used to divide layout blocks.

## 6. Layout

The layout is a dense, asymmetrical block-based skeleton, where strong vertical and horizontal lines divide the canvas into graphic fields. It prioritizes packed, overlapping compositions that make typography the primary visual structure.

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

**Skeleton:** Asymmetrical, dense block-based layout with strong vertical and horizontal dividing lines.

## 7. Motion & Interaction

Motion follows a philosophy of expressive, bouncy interaction. Spring-physics transitions on interactive elements are paired with smooth opacity fades, creating a sense of playful, tangible feedback.

- **Durations:** micro 220ms · small 400ms · medium 800ms
- **Easing:** `cubic-bezier(0.34, 1.56, 0.64, 1)`
- **Patterns:**
  - Bouncy spring transition on interactive elements
  - Smooth opacity fade-in

- **Hover:** Subtle scale or color transition with a bouncy easing curve.
- **Click:** Standard pointer interaction with immediate feedback.
- **Transition:** Transform and opacity transitions with staggered delays.
- **Keyboard:** Default focus outlines.

## 8. Voice & Don'ts

The editorial voice is bold, confident, and slightly irreverent, using short, punchy, all-caps headlines and direct, commanding calls to action.

- **Tone:** Bold, confident, and slightly irreverent.
- **Headline style:** Short, punchy, and often in all-caps.
- **CTA style:** Direct and commanding (e.g., 'TEXT US').
- **Avoid:** Subtlety / Muted tones / Standard corporate jargon

### Don'ts
- ❌ don't use thin fonts — screenshot shows extremely bold, heavy weights.
- ❌ don't use wide letter-spacing — screenshot shows tight tracking on display type.
- ❌ don't use muted, desaturated colors — screenshot shows highly vibrant orange and yellow.
- ❌ don't use rounded rectangles for primary buttons — screenshot shows circular, dashed badge buttons.
- ❌ don't use generous white space — screenshot shows a dense, tightly packed layout.
- ❌ don't use sans-serif for body text — screenshot shows a transitional-serif font for paragraphs.

The system deliberately rejects subtlety, muted tones, and standard corporate jargon in favor of its own loud, typographic-first language.

## System Prompt (paste into AI tool)

```
This is a highly expressive digital design agency website focusing on complete product packaging. The primary palette consists of a vibrant orange background (#FF4E27) with bold yellow typography (#FFC700) and a striking blue accent (#0029FF). The typography is a mix of a condensed grotesque for massive display headlines and a transitional-serif for body copy. Critical design rules: 1) Prioritize massive, heavy-weight typography over imagery. 2) Maintain a dense, tight layout with minimal white space. 3) Use bold, high-contrast colors and avoid any muted or desaturated tones. 4) Avoid standard rectangular UI components in favor of expressive, custom shapes like starbursts and dashed circular badges. 5) Keep letter-spacing tight and use uppercase for display elements to maintain visual impact.
```