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.
Valtero
Valtero© runs on a deep black foundation where editorial fashion photography — rich reds, forest greens, warm browns — explodes off every page with gallery-level impact. The design discipline is strict: oversized condensed display type in uppercase, generous negative space, pill-shaped buttons, and a signature '©' mark that closes sections like a watermark. This is a system built for agencies that build at scale: a six-project work grid, rolling stats, testimonial cards with blurred glass surfaces, pricing panels, and FAQ accordions, all unified by one condensed grotesque typeface stretched to extremes and one deep black canvas that never competes with the imagery.
Colors
Canvas
Glass Ash
#171717b0
Frosted glass overlay
Void Black
#000000
Primary canvas & ink
Smoke Panel
#222222
Secondary panel surface
Charcoal Lift
#151515
Lifted card surface
Ink
Muted Fog
#ffffffb3
Secondary text, captions, metadata
Footer Ash
#c9c7c2
Footer text tone
Paper White
#ffffff
Primary text & button fills
Accent
Signal Red
#e8291c
Editorial accent from fashion photography
Forest Feature
#1a5c3a
Secondary editorial accent
State — utility only
Caution Amber
#ffb020
Warning / limited-spots badges
Typography
The quick brown fox jumps
Rare handwritten accent flourishes
The quick brown fox jumps
Body copy, paragraphs, form fields, UI labels
The quick brown fox jumps
Display headlines, oversized hero wordmarks, navigation, buttons
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1400pxSection gap
250pxCard padding
35pxElement gap
20pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-10
10px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-30
30px--spacing-40
40px--spacing-50
50px--spacing-60
60px--spacing-100
100px--spacing-120
120px--spacing-150
150px--spacing-250
250pxBorder radius
badge7pxcards30pxsmall10pxbuttons30pxcontainer10pxphoto-wrapper20pxbuttons-circle160pxSurfaces
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 Lift
Level 3Smoke Panel
Level 4Glass Ash
Do's and don'ts
- Keep the page canvas pure black (#000000) and let editorial photography supply all the color.
- Set display headlines in Coolvetica Condensed, uppercase, with tight negative letter-spacing for maximum visual density.
- Use full-bleed, gallery-quality fashion/lifestyle photography as the primary visual language, not illustration or flat graphics.
- Apply the 30px radius consistently across cards, photo wrappers, and pricing panels for a soft-edged, modern feel.
- Pair every primary CTA with a pill-shaped white button (30px radius) and uppercase Coolvetica label.
- Use the '©' glyph as a recurring signature motif in logos, footers, and section closings.
- Reserve color accents (red, green, brown) strictly for photography — never tint UI chrome with them.
- Give sections generous vertical breathing room (150–250px padding) to maintain the gallery pacing.
- Don't introduce light backgrounds or white sections — this system is unambiguously dark-only.
- Don't substitute the condensed display font for a standard grotesk in hero or section titles; it breaks the editorial tension.
- Don't crowd photography with excessive UI chrome or borders; let images breathe inside clean 20–30px radius frames.
- Don't use sharp 0px corners anywhere — every surface in this system is rounded.
- Don't add saturated UI accent colors beyond white/black; the richness must come from imagery alone.
- Don't shrink the hero wordmark scale below its intended oversized presence — it's a brand signature, not decoration.
- Don't stack more than one glass-blurred card per view; overuse dilutes the frosted-glass effect's impact.
Example prompts
Hero section
Work grid tile
Pricing card
Testimonial card
# 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