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.
Maxira
Maxira is a dark, atmospheric design system engineered for marketing agencies that lead with proof. Deep navy and near-black canvases recede into the background while electric blue light floods in from above, casting glowing rays, grid overlays, and diffuse volumetric haze across every hero. Typography pairs a confident grotesque for body copy and UI chrome with a serif italic accent that surfaces mid-headline to soften the system's edge — proof that performance and craft can share a sentence. Every surface is built for conversion: pill-shaped buttons in saturated indigo-blue, uppercase monospace micro-labels bracketed like terminal output ([ WHY CHOOSE US ]), and hard-edged white panels that interrupt the darkness to showcase case-study numbers in stark contrast. The result is an aesthetic equal parts nightclub stage lighting and boardroom dashboard — ambitious, kinetic, and numbers-first.
Colors
Canvas
Fog Gray
#f7f7f7
Light neutral card fill used for feature cards on dark backgrounds.
Void Black
#000000
Primary page canvas
Charcoal Card
#121212
Dark card and secondary button surface, slightly lifted from void black.
Deep Navy Glow
#060a22
Hero and section background gradient base beneath the blue glow
Ink
Paper White
#ffffff
Primary text, inverted panels, light-mode section fills
Muted Slate Text
#838383
Secondary/muted body text on dark surfaces.
Accent
Indigo Hover
#2927e4
Hover state for primary buttons and interactive indigo fills.
Electric Indigo
#110fdf
Primary brand accent. CTA buttons, active nav pill, blue section fills.
Ultraviolet Flare
#b300ff
Rare decorative accent for gradient glows and image treatments.
State — utility only
Signal Green
#1dd35a
Success state and positive-metric highlight accents.
Typography
The quick brown fox jumps
UI labels, buttons, data text, monospace-style micro-copy
The quick brown fox jumps
Primary body copy and base document font
The quick brown fox jumps
Italic accent spans within headlines for brand warmth and contrast
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1200pxSection gap
120pxCard padding
35pxElement gap
20pxSpacing scale
Purpose
Value
Preview
--spacing-4
4px--spacing-8
8px--spacing-10
10px--spacing-15
15px--spacing-20
20px--spacing-30
30px--spacing-40
40px--spacing-50
50px--spacing-80
80px--spacing-100
100px--spacing-120
120pxBorder radius
cards6.4pxsmall6.4pxmedium12pxbuttons100pxnavigation200pxSurfaces
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 Card
Level 3Fog Gray
Level 4Electric Indigo Panel
Level 5Paper White Panel
Do's and don'ts
- Use the full-bleed indigo (#110fdf) section fill sparingly — reserve it for one high-impact quote or CTA moment per page.
- Pair every bold sans headline with a single italic serif phrase mid-sentence to keep the brand's signature contrast alive.
- Keep primary buttons pill-shaped (100px+ radius) in Electric Indigo with uppercase Geist Mono-style labels.
- Let hero sections breathe with generous top padding (120–180px) and a radial blue glow fading into black.
- Present case-study metrics in oversized display numerals against solid white or indigo cards for maximum scan-ability.
- Use bracketed uppercase micro-labels like '[ WHY CHOOSE US ]' to introduce every major section.
- Invert to a stark white or light-gray panel when showcasing testimonials or feature cards to create rhythm against the dark base.
- Don't introduce additional saturated hues beyond indigo, signal green, and the rare violet flare — the palette must stay disciplined.
- Don't place body copy directly on the glowing hero background without the dark gradient overlay for contrast safety.
- Don't use sharp, squared-off buttons — the system is built entirely on pill and soft-rounded shapes.
- Don't overcrowd the grid-pattern hero overlay with more than one headline block; it's meant to frame, not compete.
- Don't mix in serif body text — the italic serif is strictly a headline accent, never used for paragraphs.
- Don't reduce section padding below 60px on desktop; the spacious rhythm is core to the agency-caliber feel.
- Don't desaturate the indigo CTA buttons to gray or muted tones — full-strength brand blue signals confidence.
Example prompts
Hero section
Case study card
Founder quote block
Stat strip
# 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