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.
LunaArc
LunaArc is a cinematic design system for architectural studios that treat presentation as part of the practice. Near-black canvases hold warm amber-lit renders of sculpted interiors, coastal pavilions, and hand-drawn blueprints, letting photography carry the emotional weight while typography stays disciplined, uppercase, and quiet. Large serif-free display type in heavy weights anchors every section, paired with a restrained ink-on-charcoal palette that never competes with the imagery. The system favors flat black and near-black surfaces layered in subtle steps — pure black hero canvas, slightly lifted charcoal cards, and a single cool-blue accent reserved for rare interactive flourishes. Spacing is generous and cinematic, with full-bleed imagery, long vertical rhythms, and sparse chrome (a thin nav, understated buttons) that keeps focus on the architecture itself.
Colors
Canvas
Fog Line
#d8dfe0
Divider lines, hairline separators
Void Black
#040404
Primary canvas
Charcoal Lift
#141414
Lifted surface & card backgrounds
Hairline Fade
#ffffff21
Border on inputs, cards, and buttons against black
Ink
Mist Gray
#d9dae2
Secondary body copy, muted labels
Paper White
#ffffff
Primary text on dark, display headlines
Accent
Amber Glow
#e8a85c
Warm interior lighting accent drawn from hero photography
Dusk Horizon
#4361ee
Rare interactive accent, links and focus states
State — utility only
Alert Coral
#e74c3c
Form validation and cart errors
Typography
The quick brown fox jumps
Primary typeface for all headings, body copy, and UI labels
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1240pxSection gap
200pxCard padding
40pxElement 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-30
30px--spacing-40
40px--spacing-60
60px--spacing-80
80px--spacing-100
100px--spacing-150
150px--spacing-200
200pxBorder radius
cards0pxinputs0pxbuttons0pxcart-count9pxclose-button9999pxSurfaces
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 3Cart Overlay
Do's and don'ts
- Keep hero and section backgrounds near-black (#040404) to let amber-lit architectural photography carry the visual weight.
- Use uppercase, letter-spaced labels for navigation and eyebrow text to maintain the editorial, gallery-like tone.
- Pair oversized display headlines (70px+) with short, confident sentence fragments rather than long paragraphs.
- Reserve the Dusk Horizon blue strictly for functional links and focus states — never as a decorative fill.
- Maintain generous vertical section padding (150–200px) so each project or service image breathes like a film still.
- Use square-cornered, zero-radius buttons and cards throughout to reinforce the architectural, blueprint-precise aesthetic.
- Let photography transition between warm amber interiors and cool blue exteriors to create rhythmic contrast between sections.
- Don't introduce rounded corners on buttons, cards, or inputs — the brand is built on sharp, architectural edges.
- Don't use light or white page backgrounds; the system is built exclusively on dark, cinematic canvases.
- Don't overcrowd sections with multiple accent colors — stay within the near-monochrome palette plus one blue accent.
- Don't shrink the display headline type below ~50px for primary section statements; scale is part of the drama.
- Don't use serif or decorative typefaces — Instrument Sans carries the entire system.
- Don't place body copy directly on busy photography without a dark overlay gradient for legibility.
- Don't use bright saturated colors for icons or illustrations; keep imagery-driven color as the only vibrant note.
Example prompts
Hero section
Services grid
Stats block
Contact form
# 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