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.
©Found
©Found runs on a crisp white foundation that lets color-blocked photography and deep-black feature sections do the talking. Violet accents punch through an otherwise monochrome ink-on-white system — in buttons, badges, and hover states — while huge kinetic type (the trademark ©-prefixed wordmarks, massive rotator text, and oversized service numerals) gives the studio an awards-wall confidence. Interactions are deliberate: cards tilt and stack, headlines slide up from below, and a scrolling marquee footer keeps momentum alive on every page.
Colors
Canvas
Field Mist
#f3f3f3
Form field fills and input backgrounds
Paper White
#ffffff
Primary canvas & card background
Ink
Smoke Gray
#2a2a2d
Pricing link and secondary dark UI chrome
Obsidian Ink
#000000
Primary text, dark section fills, wordmark ink
Midnight Panel
#0c0c1d
Dark surface used in showreel button text and deep panels
Accent
Dust Mauve
#c7abc6
Secondary soft accent for subtle highlights and dividers
Ember Coral
#ff4800
Secondary call-to-action accent. Alternate button text and icon fills
Signal Violet
#5b12b7
Primary brand accent. CTA buttons, badge icons, link hovers
Electric Azure
#5b96fe
Animated button background bloom on hover interactions
State — utility only
Acid Green
#9bfa13
Hover-reveal accent dot on badge interactions
Typography
The quick brown fox jumps
Display headline and wordmark typeface
The quick brown fox jumps
Primary body and UI typeface
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1240pxSection gap
300pxCard padding
28pxElement gap
30pxSpacing scale
Purpose
Value
Preview
--spacing-10
10px--spacing-20
20px--spacing-30
30px--spacing-50
50px--spacing-80
80px--spacing-100
100px--spacing-150
150px--spacing-300
300px--spacing-500
500pxBorder radius
pill100pxcards6pxsmall2pxinputs7pxbuttons40pxSurfaces
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 1Paper White
Level 2Field Mist
Level 3Obsidian Ink
Level 4Smoke Gray
Do's and don'ts
- Use the ©-prefixed wordmark treatment (©Found, ©Work, ©About us) as the signature hero headline across every page.
- Reserve Signal Violet for primary CTAs and interactive accents only — it should read as a rare, deliberate spark against the white-and-black base.
- Pair oversized Geist display type (99px–200px) with tightly tracked negative letter-spacing for logo-scale headlines.
- Apply the 40px / 100px pill radius consistently across all primary and ghost buttons for a soft, rounded interaction language.
- Let color-blocked photography (deep purple, golden yellow, bold red treatments) fill project cards edge-to-edge with no inset padding.
- Keep section padding generous (300px vertical on desktop) to preserve the gallery-like pacing between content blocks.
- Close every page with the kinetic 'Let's Talk' marquee and matching four-column award/service structure for consistency.
- Don't introduce new accent hues beyond violet, coral, and azure — the palette must stay disciplined around black, white, and one dominant accent.
- Don't shrink the hero wordmark below display scale; it is the primary brand signature and must stay monumental.
- Don't apply heavy shadows or skeuomorphic depth — surfaces are flat, separated by color blocks and whitespace, not elevation.
- Don't crowd sections with tight spacing; this system depends on generous breathing room to feel premium.
- Don't use sharp, squared corners on buttons — the pill/rounded language is a core identity marker.
- Don't mix serif or script typefaces into the system — Geist and Switzer Variable carry the entire voice.
- Don't desaturate or mute the project photography; vivid color-blocked imagery is essential to the gallery-drop energy.
Example prompts
Hero section
Work grid card
Awards table
CTA footer
# 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