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.
Ups™
Ups™ is an uncompromisingly dark agency template built for studios that treat their site as a portfolio piece in its own right. Deep matte black carries every page, punctuated by electric purple accents, hard white type blocks, and a vivid, colour-rich project grid in oranges, teals, and tans that lets each thumbnail read as its own brand statement. Oversized uppercase display type, looping 3D hero logos, and scrolling ticker-style marquees ('About UPS', 'Let's Talk') give the whole experience a kinetic, slightly irreverent energy — confident, loud, and unmistakably creative-agency. Structurally it leans on full-bleed black sections separated by subtle blur-glass overlays, numbered hover-reveal service lists, and a grid of saturated full-color project tiles with floating pill-shaped labels. Everything resolves in a theatrical 'Let's Talk' footer with a chat-bubble 'Say Hello 😎' CTA, keeping the tone playful even as the palette stays severe and monochrome at its core.
Colors
Canvas
Ink Field
#080808
Form field background
Void Black
#000000
Primary canvas & ink
Studio Mist
#f1f3f8
Soft off-white for subscribe and highlight fills
Charcoal Panel
#121212
Elevated card surface
Ink
Paper White
#ffffff
Primary text & inverted surfaces
Ghost Border
#ffffff26
Hairline dividers & card outlines on black
Body Mist Gray
#d9dae2
Muted body text on dark surfaces
Accent
Faded Lilac
#dfdbe6
Secondary hover fill on light elements
Signal Orange
#ff6a1a
Project grid accent color
Electric Violet
#4353ff
Interactive accent & hover glow
Typography
The quick brown fox jumps
Primary UI, body, and display typeface across all pages
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1440pxSection gap
150pxCard padding
35pxElement gap
30pxSpacing scale
Purpose
Value
Preview
--spacing-5
5px--spacing-10
10px--spacing-15
15px--spacing-20
20px--spacing-30
30px--spacing-40
40px--spacing-60
60px--spacing-100
100px--spacing-150
150px--spacing-300
300pxBorder radius
cards7pxpills6pxcircle9999pxinputs3pxbuttons0pxicon-buttons3pxSurfaces
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 1Void Black
Level 2Charcoal Panel
Level 3Ink Field
Level 4Paper White
Do's and don'ts
- Keep the page canvas pure black (#000000) and let white type and imagery provide all the contrast.
- Use full uppercase, tight-tracking display type for hero headlines and section titles (WORKS, ABOUT UPS, LET'S TALK).
- Reserve Electric Violet strictly for interactive hover states and small circular accents, never as a large fill.
- Let project thumbnails carry the color — bold saturated photography and graphic art against an otherwise monochrome UI.
- Apply the pill-shaped frosted-glass label (blurred black background, white text, 7px radius) to tag project tiles on hover.
- Use sharp 0px-radius rectangular buttons with uppercase bold labels for primary CTAs.
- Maintain generous 150px+ vertical rhythm between major sections to preserve the spacious, theatrical pacing.
- Pair the scrolling marquee pattern (ticker text + divider icon) for any repeating tagline or call-to-action band.
- Don't introduce light/white page backgrounds — this template has no light-mode variant and depends on black for impact.
- Don't round primary action buttons; rounded corners should stay limited to cards, tags, and form inputs.
- Don't desaturate the project grid imagery — vivid color photography is the counterpoint to the monochrome chrome.
- Don't overcrowd the hero — keep the 3D logo block and marquee as the only focal elements with ample negative space.
- Don't use serif or soft rounded fonts; the system depends on Instrument Sans' geometric, confident character.
- Don't stack more than one accent color per section — Electric Violet and one supporting hue (like orange) is the ceiling.
- Don't shrink the uppercase display headlines below ~40px; they're meant to dominate the viewport.
Example prompts
Hero section
Work grid tile
CTA button
Footer marquee
# 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