---
title: "SICK AGENCY design system"
variant: extended
source: https://sick.agency/
captured_at: 2026-10-12
theme: light
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/sick-agency)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# SICK AGENCY · Design System

> Oversized type, playful details, unapologetic colour.

**Theme:** light · **Industry:** agency · **Source:** https://sick.agency/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

SICK AGENCY opens with an oversized typographic manifesto on a muted blue canvas, divided by fine pink rules. Narrow display lettering, editorial copy and small playful graphics give the agency homepage a distinctive print-inspired energy.

## North star

Treat the page as a living editorial poster: let oversized condensed type, precise pink grid lines and sparse playful graphics organize the experience.

## Overview

The page is built around a restrained, memorable palette: muted blue fills the canvas, while pale pink carries nearly all of the headline and body text. Fine pink rules divide the canvas into an asymmetric editorial grid; a vivid blue button and sticker-like marks provide small, high-energy interruptions. Display typography does most of the visual work. Tall, tightly set uppercase letters create a monumental headline that occupies the right side and continues beyond the viewport, while a vertical phrase anchors the left edge. A small serif paragraph balances the condensed typography with a quieter reading texture. The image area is sparse rather than photographic: simple social icons sit inside pink scalloped shapes, and circular graphic badges add personality. Broad open blue areas keep the dense type legible. The overall effect is flat, graphic, and intentionally poster-like, with generous section-scale breathing room rather than conventional cards or soft effects.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Blush Signal | `#ffbfbf` | `--color-blush-signal` | brand | Primary text and headline colour across the canvas; also defines the fine grid rules and scalloped illustration shapes. |
| Muted Periwinkle | `#6888b7` | `--color-muted-periwinkle` | brand | Main page canvas and dominant section background, providing a calm field behind the pink typography. |
| Electric Cobalt | `#0029ff` | `--color-electric-cobalt` | accent | Bright outline and fill for the rounded TEXT US CTA; also appears in small sticker-like graphics. |
| Pure Black | `#000000` | `--color-pure-black` | surface | Measured dark surface colour, but not a defining visible brand colour in the supplied homepage screenshot. |

### Semantic aliases

`--color-canvas` → `#6888b7` (Muted Periwinkle) · `--color-surface` → `#000000` (Pure Black) · `--color-text` → `#ffbfbf` (Blush Signal) · `--color-border` → `#0029ff` (Electric Cobalt) · `--color-accent` → `#ffbfbf` (Blush Signal) · `--color-accent-2` → `#6888b7` (Muted Periwinkle) · `--color-accent-3` → `#0029ff` (Electric Cobalt) · `--color-on-accent` → `#ffffff`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffbfbf` | `#6888b7` | 2.32:1 | fail |
| `#ffbfbf` | `#000000` | 13.46:1 | AAA |
| `#ffbfbf` | `#6888b7` | 2.32:1 | fail |
| `#ffbfbf` | `#000000` | 13.46:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Sentient | `--font-body` | webfont | 400 | Editorial paragraph copy and CTA label | Cormorant Garamond |
| Thunder | `--font-display` | webfont | 300 | Large uppercase headline and prominent vertical lettering | Oswald |
| Morganite | `--font-morganite` | webfont | 900 | Measured display role; not clearly distinguishable in the supplied first viewport | Bebas Neue |

- **Sentient:** Regular weight with subtly tight tracking; paragraph text uses a readable serif texture against the condensed display lettering.
- **Thunder:** Light weight, uppercase, extremely narrow and tall; scale and line breaks create the poster-like impact.
- **Morganite:** Heavy display face reserved for oversized emphasis; use sparingly and only where the composition needs a bold typographic counterpoint.

### Type scale — Custom (ratio ≈ 3.089, base 24px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 229px | 900 | 0.7 | 0 | — | Morganite | Oversized typographic emphasis, not prominent in the supplied first viewport. |
| h1 | 122px | 300 | 0.65 | 0 | uppercase | Thunder | Main uppercase agency services manifesto on the right. |
| body | 24px | 400 | 1.33 | -0.01em | — | Sentient | Compact agency introduction in the lower-left text panel. |
| button | 24px | 400 | 1.1 | 0 | — | Sentient | Label inside the rounded TEXT US call-to-action. |

## Spacing & layout

- Base unit **4px**, density **spacious**.
- Scale (most used values): 1, 5, 6, 8, 12, 14, 16, 36, 48, 120, 172 px.
- Section rhythm 172px · element gap — · card padding — · max content width —.

A full-canvas, two-column editorial composition is subdivided with thin pink rules into unequal panels. A narrow vertical strip at the far left carries oversized rotated lettering; the central-left column holds small graphic marks above a compact paragraph, while the right side is dominated by a very large, right-aligned headline. The headline intentionally runs beyond the viewport. The page feels spacious at section scale but densely composed within its grid, with no measured maximum width or conventional card system.

## Shape & elevation

- Radius: button `50%`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.4s ease` on interactive elements.

The composition is predominantly flat, with no measured shadow system. Thin pink rules create structure and separation instead of card surfaces. The blue CTA and circular graphic badges may overlap nearby elements like stickers, but keep layering limited and edges sharp rather than adding soft depth effects.

## Imagery

The opening view uses graphic illustration rather than photography: two pink scalloped badges contain simple social symbols, accompanied by small circular sticker-like marks. Keep these elements crisp, flat and secondary to the typography. Use them as playful punctuation within the grid, not as large hero media or realistic product imagery.

## Components

### Editorial grid

Use thin blush rules to divide the blue canvas into asymmetrical panels, including a narrow left rail and a large headline field.

### Oversized manifesto

Set the service statement in tall, light, uppercase condensed lettering with dramatic line breaks and deliberate cropping.

### Vertical brand phrase

Place oversized blush lettering vertically along the far-left edge as a strong graphic anchor.

### Intro copy panel

Set a short serif paragraph in a compact block, aligned within the lower-left grid panel.

### Social icon badges

Use simple icons centered in flat blush scalloped shapes, keeping illustration secondary to the headline.

### Contact CTA

Use a rounded electric-cobalt button with white Sentient text; measured styling uses a 50% radius.

### Measured component styles

- **Primary button** (“TEXT US”): background #0029ff · text #ffffff · border 1px solid #0029ff · radius 999px · padding 5px 6px 1px 6px · 400 24px Sentient
- **Link**: transparent background · text #0000ee · radius 0px · padding 172px 0px 0px 0px · 400 10px Times New Roman

## Do

- Use #6888b7 as the dominant canvas colour.
- Set primary display copy in pale pink #ffbfbf.
- Build structure with thin, precise grid rules.
- Make display type tall, condensed and uppercase.
- Keep body copy compact and serif-led.
- Use cobalt #0029ff only for small, high-contrast accents.

## Don't

- Do not replace the poster-like grid with generic cards.
- Do not introduce gradients or decorative shadows.
- Do not use photography as the main visual anchor.
- Do not crowd the headline with extra interface controls.
- Do not add colours outside the measured palette.
- Do not make every graphic element equally prominent.

## Agent prompt

Build a new page in the SICK AGENCY visual style as a graphic editorial poster, not a conventional card-based agency template. Use Muted Periwinkle (#6888b7) as the dominant canvas and Blush Signal (#ffbfbf) for headlines, copy and thin structural rules. Organize content with an asymmetric grid, a narrow vertical typographic rail, compact editorial text, and a dominant oversized statement in light, tall uppercase lettering. Keep body copy serif-led and readable. Use Electric Cobalt (#0029ff) sparingly for a rounded, high-contrast CTA or small sticker-like accent; reserve white for text on that button. Add only a few flat, playful icons or badges. Preserve open areas around the typography, allow intentional crop at the viewport edge, and avoid gradients, heavy shadows and generic card surfaces.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Asymmetric full-canvas grid with vertical left rail, small illustration and copy panels, and a dominant right-side headline. | Oversized service statement, Compact introductory copy, Prominent contact action | Blue canvas, Pink hairline grid, Condensed uppercase type, Scalloped icon badges, Cobalt sticker accents |

## Source CSS custom properties (selected)

```css
--background: #6888B7;
--foreground: #FFBFBF;
--accent: #0029FF;
--borders: 3px;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/sick-agency