Design systems, extracted.
Paste any URL to create a design system from it. Open any style for colors, type, spacing, components, and a DESIGN.md or tokens.json your agent can use.
THAT© Studio
THAT© is a maximalist-but-disciplined agency system built for studios that refuse a single look. Jet-black intro sections explode into oversized, negative-tracked display type, then give way to airy off-white and lavender-gray canvases where pricing tables, team cards, and work grids sit on hairline dividers instead of shadows. Electric teal and voltage yellow are deployed sparingly as full-bleed hero backdrops and single-icon accents, so the loud color moments read as intentional punctuation rather than noise. Structurally the template is a toolkit: three homepage variants, three work-grid styles, three blog layouts, and dedicated case-study and post templates all share the same geometric language — 7–8px radii, uppercase display headlines, sticky work cards, and a black footer CTA grid that closes every page with the same confident "Let's Chat" invitation.
Colors
Canvas
Fog Divider
#d8dfe0
Structural hairline. Divides pricing columns, service lists, and card footers without shadow.
Paper White
#ffffff
Elevated card surface. Presentation tiles, pricing plans, team cards, and blog thumbnails.
Cloud Canvas
#f1f3f8
Primary light canvas. Default background for content sections, subscribe fields, and badge chips.
Pale Lilac Mist
#dfdbe6
Hover & alt surface. Secondary-button hover states and lightly tinted panel backgrounds.
Ink
Blackout Ink
#000000
Primary ink & dark surfaces. Nav bar, intro hero, footer, and primary button fills across every page.
Whisper Lavender
#d9dae2
Inverse body text. Paragraph copy and nav labels set over black sections, plus muted field backgrounds.
Accent
Coral Flare
#ef5350
Secondary pop accent. Technology-service icon tile and occasional tag chips breaking the neutral rhythm.
Voltage Yellow
#f6c520
High-impact highlight. Service icon fills, badge accents, and hero-suit color blocking.
Electric Lagoon
#27d9c4
Signature brand hue. Full-bleed hero backdrops that announce the studio's energy on the main homepage variant.
Typography
The quick brown fox jumps
Sole interface and display typeface — carries navigation, body copy, and the oversized uppercase hero headlines.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1600pxSection gap
150pxCard padding
40pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-32
32px--spacing-40
40px--spacing-60
60px--spacing-80
80px--spacing-100
100px--spacing-150
150pxBorder radius
cards7pxpills100pxbuttons8pxsection-corner90pxnavigation-dropdown30pxSurfaces
Step from canvas (level 1) to lifted (level 2) to inset depth (level 3), then invert into the dark levels for full-bleed sections. Hex codes and roles live in the Colors section above; this ladder shows the layering only.
Level 1Blackout Ink
Level 2Cloud Canvas
Level 3Paper White
Level 4Electric Lagoon
Do's and don'ts
- Use the 7px/8px radius consistently on cards, buttons, and presentation tiles to keep the system's crisp geometric rhythm.
- Open every homepage variant with oversized uppercase display type at tight negative tracking (-5px) over a jet-black intro section.
- Reserve Electric Lagoon teal and Voltage Yellow for full-bleed hero backdrops or single accent icons — never both at full saturation in the same frame.
- Apply the large section-corner radius when transitioning between a dark section and a light section to soften the seam.
- Keep body copy on Instrument Sans Medium (500) at 14–18px for legibility against both dark and light canvases.
- Use mix-blend-mode difference on captions overlaying photography to guarantee contrast regardless of image tone.
- Let pricing and service cards float on Paper White with a hairline Fog Divider border instead of a drop shadow.
- Don't introduce additional saturated accent hues beyond teal, yellow, and the occasional coral icon fill; the palette must stay disciplined.
- Don't tighten section padding below ~100px on desktop; the spacious rhythm (150px+) is core to the agency-portfolio feel.
- Don't mix vw-based and fixed-px display sizes within the same hero composition.
- Don't apply drop shadows to cards — the system relies on hairline borders and flat color blocks for depth.
- Don't set body copy below 500 weight; the typeface reads thin at regular weight and undercuts the bold tone.
- Don't abandon the uppercase + negative letter-spacing treatment on primary headlines — regular case undersells the brand's confidence.
- Don't crowd the hamburger dropdown or footer CTA grid; preserve generous grid-gap (16–30px) and breathing room.
Example prompts
Hero section
Service grid
Work showcase
Footer CTA
# Design System Guide
> Unlock the template to access the full design system.
## Brand voice
A short paragraph describing the brand voice, mood, and visual
principles that anchor the system. Tone, cadence, and intent.
## Colors
| Token | Hex | Role |
| ------------ | -------- | ------------------------------------- |
| canvas-1 | #xxxxxx | Page background, large surfaces |
| canvas-2 | #xxxxxx | Lifted surfaces, cards |
| canvas-3 | #xxxxxx | Inset wells, depressed states |
| ink-1 | #xxxxxx | Primary body text |
| ink-2 | #xxxxxx | Secondary text, labels |
| ink-3 | #xxxxxx | Tertiary text, hints |
| accent-1 | #xxxxxx | Primary brand accent |
| accent-2 | #xxxxxx | Secondary accent |
| state-ok | #xxxxxx | Success, confirmations |
| state-warn | #xxxxxx | Warnings |
| state-err | #xxxxxx | Errors, destructive actions |
## Typography
- **Display** — heading scale, used for hero text and section titles.
- **Body** — primary reading text, optimized for paragraphs.
- **Mono** — code, data, and tabular numerals.
```
display: 32px / 40px / 48px / 64px / 80px
body: 14px / 16px / 18px
mono: 12px / 14px
```
## Spacing & shape
Base unit: 4px. Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
Radii: sm (4px), md (8px), lg (12px), xl (20px), full (9999px).
## Surfaces
Layered elevation from canvas → lifted → inset. Surfaces invert in
dark sections for full-bleed contrast.
## Do's and don'ts
- Do use accent-1 sparingly for primary CTAs only.
- Do maintain at least 4.5:1 contrast on body text.
- Don't mix display and body in the same line.
- Don't use state colors for branding.
## Agent prompt guide
Prompts for AI design tools that respect this system.
Includes example prompts for sections, components, and layouts.
# ...
Unlock the full style guide