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.
Vluna
Vluna is a dark-foundation design system built for architecture and design studios whose work speaks in volume, shadow, and light. A near-black canvas (#040404) and a slightly lifted charcoal (#141414) hold every section, letting full-bleed desert and gallery photography — arched interiors, sculptural concrete, sun-bleached sand — carry the emotional weight. Typography does the rest: an oversized Georgia-style serif display for wordmark moments like 'VLUNA', 'ABOUT', and 'FOOTER', paired with a clean, confident Instrument Sans for everything functional, from navigation pills to pricing tables. Color stays disciplined — ink blacks, bone whites, and a single cool indigo accent reserved for interactive states — so the architecture photography itself supplies the warmth: terracotta, sand, and bleached stone. Pill-shaped buttons, circular nav icons, and soft 30px-radius inputs soften an otherwise severe grid, giving the system a gallery-opening hush rather than a corporate starchiness.
Colors
Canvas
Void Black
#040404
Primary page canvas. Base background for every section and the body element.
Divider Haze
#d8dfe0
Hairline dividers on light contexts. Separates form rows and light-mode utility elements.
Charcoal Lift
#141414
Lifted surface & secondary sections. Used for 'gray' section variants, cards, inputs, and the testimonial surface.
Ink
Mist Gray
#d9dae2
Secondary body text. Paragraph copy, placeholder text, and subscribe-field accents against dark surfaces.
Bone White
#ffffff
Primary text & display wordmarks. Headlines, serif display type, icon fills, and button labels on dark grounds.
Hairline White
#ffffff21
Border on dark surfaces. Outlines inputs, pricing cards, and the cart container at low opacity.
Accent
Dune Beige
#c9b89a
Architectural warmth accent. Sampled from desert and sandstone photography; used for decorative overlays and imagery framing.
Indigo Signal
#4361ee
Interactive accent & link hover. Reserved for focus states, checkout CTAs, and subscribe-field iconography.
Terracotta Clay
#b5602f
Warm decorative accent. Evokes the clay archways and canyon tones in hero photography; sparing use in imagery-adjacent graphics.
State — utility only
Alert Ember
#ea4335
Error state. Form validation and destructive messaging, sampled from third-party icon sets.
Typography
The quick brown fox jumps
Display wordmark and ceremonial headline typeface — hero logotype, section dividers like 'ABOUT' and 'FOOTER'.
The quick brown fox jumps
Primary UI and body typeface — navigation, buttons, forms, paragraph copy.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1240pxSection gap
200pxCard padding
45pxElement 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-140
140px--spacing-200
200px--spacing-300
300pxBorder radius
cards7pxpills40pxsmall8pxinputs30pxbuttons50pxtextarea15pxicon-buttons12pxSurfaces
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 3Hairline Frame
Do's and don'ts
- Keep the page canvas at Void Black (#040404) and reserve Charcoal Lift (#141414) only for alternating 'gray' sections, cards, and inputs.
- Use the Velista serif exclusively for oversized wordmark moments (logo, 'ABOUT', 'FOOTER') — never for body copy or UI labels.
- Apply full 50px pill radius to all primary buttons and 30px radius to form inputs to keep the soft, rounded contrast against sharp architectural photography.
- Let full-bleed photography carry color and warmth; keep surrounding UI strictly monochrome plus the single indigo accent.
- Pair every button and nav link with a small circular icon affordance (navigation-circle) to reinforce the system's consistent interaction language.
- Maintain generous 140–300px vertical section padding to preserve the gallery-like pacing between content blocks.
- Use opacity-based hairline borders (#ffffff1f–#ffffff3b) rather than solid grays to keep edges feeling light against black.
- Don't introduce saturated colors beyond Indigo Signal and the imagery-derived terracotta/beige accents — the palette must stay disciplined.
- Don't set long-form body copy in the Velista serif; it is strictly a display/wordmark face.
- Don't use sharp 0px corners on buttons or inputs — the system's softness depends on consistent pill and rounded radii.
- Don't place dense UI clusters without breathing room; this template relies on spacious padding, not compact stacking.
- Don't darken text below Mist Gray (#d9dae2) for secondary copy — contrast against Void Black must stay legible.
- Don't crop architectural photography tightly; the brand depends on full-bleed, atmospheric imagery with visible depth and scale.
- Don't add drop shadows heavier than the defined soft/floating shadows — the look stays flat and ink-like, not skeuomorphic.
Example prompts
Hero section
Service accordion
Team grid
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