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.
Optune
Optune is a deep-space agency template where near-black canvases meet electric cobalt light. Glassmorphic cards hover above a void of ink and indigo, their frosted blur catching glints of blue like light refracted through glass spheres — an aesthetic signature echoed literally in the hero's iridescent orb imagery. Typography pairs a crisp grotesque sans for structure and labels with an elegant italic serif for emotive emphasis, giving every headline a spoken cadence: bold word, soft aside. The system is built for confident, data-forward storytelling — stat cards, glowing pill buttons, and uppercase micro-labels create a dashboard-like rhythm that feels equal parts creative studio and growth platform. White surfaces appear sparingly as high-contrast punctuation (pricing cards, testimonial panels, the final CTA) against an otherwise ink-black, blue-lit world.
Colors
Canvas
Ash Grey
#f5f5f5
Light neutral surface. Alternate pricing card and form field backgrounds.
Void Black
#000000
Primary canvas. Base background for hero, sections, and footer.
Frosted Glass
#ffffff0d
Glass surface tint. Backdrop-blur cards, nav pill, and glassmorphic panels over dark backgrounds.
Ink
Muted Fog
#ffffffb3
Secondary text. Subheads and supporting copy at reduced opacity on dark surfaces.
Paper White
#ffffff
Primary text & light surfaces. Headlines, body copy on dark, and lifted white cards.
Accent
Violet Pulse
#7468fc
Secondary accent. Gradient endpoint on primary buttons and hover states.
Electric Cobalt
#110fdf
Primary brand accent. Button gradients, glowing CTA shadows, gradient overlays.
State — utility only
Signal Green
#1dd35a
Success state. Positive status indicators and confirmation accents.
Typography
The quick brown fox jumps
Primary UI and body typeface. Headlines, labels, navigation, buttons.
The quick brown fox jumps
Emphasis typeface. Italic accent words within headlines for emotive contrast.
Spacing & shape
Purpose
Value
Preview
Density
comfortableMax width
1260pxSection gap
120pxCard padding
30pxElement gap
20pxSpacing scale
Purpose
Value
Preview
--spacing-10
10px--spacing-15
15px--spacing-20
20px--spacing-30
30px--spacing-40
40px--spacing-50
50px--spacing-60
60px--spacing-70
70px--spacing-80
80px--spacing-90
90px--spacing-100
100px--spacing-150
150px--spacing-200
200pxBorder radius
cards6.4pxsmall10pxbadges7pxbuttons50pxnavigation100pxSurfaces
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 2Frosted Glass
Level 3Paper White
Level 4Ash Grey
Do's and don'ts
- Use the cobalt-to-violet gradient (#110fdf to #7468fc) exclusively on primary CTA buttons with the signature glow shadow beneath them.
- Apply 0.4rem radius consistently across all content cards, images, and glass panels for a tight, modern corner language.
- Pair bold sans headlines with italic Playfair Display words for emphasis — never italicize an entire headline.
- Keep body copy on dark backgrounds at 70-80% white opacity to maintain hierarchy against pure-white headlines.
- Use frosted glass (backdrop-blur) surfaces for any card or badge floating over imagery or gradient backgrounds.
- Reserve pure white panels for high-stakes conversion moments: pricing, testimonials, and the closing CTA.
- Uppercase small labels (tags, categories, navigation pills) with letter-spacing around 0.5px for structure.
- Don't introduce additional saturated accent colors beyond cobalt blue and its violet gradient partner.
- Don't set body paragraphs in Playfair Display — reserve the serif for short emphasis phrases only.
- Don't use sharp, large-radius-free corners; every surface should carry the soft 0.4rem card radius or full pill radius.
- Don't place dark glass cards directly on other dark glass cards without a clear background separation.
- Don't fill large areas with flat electric blue — use it as a gradient, glow, or thin accent rather than a solid block.
- Don't reduce the hero's atmospheric lighting/gradient background; it's core to the brand's depth.
- Don't mix in rounded pill buttons with sharp-cornered secondary buttons on the same screen.
Example prompts
Hero section
Stat card
Pricing table
Testimonial panel
# 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