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.
JulianVoss
JulianVoss© is a portfolio system built on confrontation rather than persuasion — a single blood-red hero portrait, a massive wordmark, and a terse statement of intent replace the usual scroll of self-justification. Typography does the heavy lifting: an oversized Switzer Variable grotesque is set at gargantuan viewport-relative sizes, tightened with aggressive negative tracking, while a wisp of italic Playfair Display gives the only moment of softness in an otherwise unapologetically graphic system. The palette is a study in tension — near-black ink, stark white, and a glowing cyan accent are all pushed through a saturated red field that functions as both background and mood lighting. Everything else — grids, dividers, tables — stays quiet and structural, letting the imagery and the headline type carry the entire emotional register.
Colors
Canvas
Fog Grey
#ebebeb
Soft structural surface. Subtle dividers and secondary panel fills in light contexts.
Milk Footer
#f1f1f1
Footer & closing surface. Grounds the final marquee section in a near-white canvas.
Ink
Ash Grey
#494949
Muted secondary text & button fill. Section labels, deemphasized copy, default button background.
Void Black
#000000
Primary ink & deep surface. Base page color, footer background, and body text on light sections.
Ghost White
#ffffffb3
Translucent overlay ink. Semi-transparent captions and secondary labels over imagery.
Paper White
#ffffff
Primary inverse ink. Wordmark, headlines, and button text over dark or red surfaces.
Accent
Reactor Cyan
#9ef4f0
Signature accent glow. Emphasis spans in headlines, nav underlines, and the certified-partner mark.
Bloodlight Red
#cc0d0d
Hero atmosphere & brand signature. Full-bleed portrait background and page-opening mood lighting.
Typography
The quick brown fox jumps
Italic accent voice. Reserved for the 'Voss' flourish in the wordmark and rare editorial emphasis.
The quick brown fox jumps
Primary display & body grotesque. Used for the wordmark, navigation, headings, and all body copy.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1600pxSection gap
250pxCard padding
20pxElement gap
20pxSpacing scale
Purpose
Value
Preview
--spacing-10
10px--spacing-20
20px--spacing-30
30px--spacing-50
50px--spacing-67
67px--spacing-120
120px--spacing-150
150px--spacing-250
250pxBorder radius
cards10pxbadges7pxbuttons2560pxcontainer10pxnavigation2560pxSurfaces
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 2Bloodlight Red
Level 3Milk Footer
Level 4Fog Grey
Do's and don'ts
- Lead every page with a single full-bleed, high-contrast portrait or project image — let imagery set the mood before any copy appears.
- Set hero wordmarks and section titles at extreme viewport-relative sizes (10–20vw) with tight negative letter-spacing for maximum impact.
- Reserve Reactor Cyan strictly for emphasis spans, underlines, and the certified-partner mark — never as a large fill.
- Keep body copy short, declarative, and lowercase-styled in navigation to contrast against the oversized display type.
- Use the italic Playfair Display only for the single flourish moment in the wordmark — never for paragraph text.
- Maintain generous 150–250px section padding so each statement has room to breathe before the next.
- Close every page with the full-width JULIANVOSS© marquee as a consistent signature element.
- Apply the pill radius (160rem) to all buttons and nav links for a uniform soft-edged interactive language.
- Don't introduce additional accent colors beyond cyan and red — the restraint is the brand.
- Don't soften the red hero atmosphere with gradients or pastels; keep it saturated and direct.
- Don't shrink the hero wordmark below a dominant, page-filling scale — it must command the first screen.
- Don't use serif type for body copy or UI labels; Playfair is an accent, not a workhorse.
- Don't crowd the work grid with captions or borders beyond thin tv-dot details — let photography breathe edge to edge.
- Don't add drop shadows or skeuomorphic depth; surfaces stay flat with color and light doing the work.
- Don't reduce section padding on desktop; compressed spacing undercuts the confident, unhurried pacing.
Example prompts
Hero statement
Service list
Project caption
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