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.
Omnera©
Omnera© is a proprietary-feeling agency system built on stark black-and-white contrast, oversized condensed-serif wordmarks, and ©-stamped section labels that make every heading feel trademarked and intentional. The foundation is crisp white and whisper-gray, punctuated by near-black ink, blurred glass cards, and rare flashes of acid yellow — a palette disciplined enough to let vivid editorial photography (deserts, portraits, abstract close-ups) carry the emotional weight. Spacing is generous to the point of theatrical: 250–300px section padding, sticky scroll-driven work cards, and a single 1400px container give the whole site a slow, confident pace. Typography pairs an enormous Caslon Condensed display face for hero moments with a disciplined IBM Plex Mono for eyebrow labels and tags, while Switzer Variable carries all functional UI text — the result reads as a studio that is done with generic templates and ready to own its presence.
Colors
Canvas
Canvas White
#ffffff
Primary page background. Base canvas for nearly every section and card surface.
Whisper Smoke
#f5f5f5
Lifted surface. Footer background, gray sections, and muted card fills.
Ink
Absolute Black
#000000
Button fills & deepest ink. Primary CTA backgrounds, overlays, pure-black accents.
Midnight Charcoal
#1a1a1a
Primary text & inverted surfaces. Headlines, body copy, dark section and footer backgrounds.
Accent
Ash Border
#414141
Dark surface border. Hairline edges on dark-background cards and buttons.
Electric Yolk
#ffd500
Rare brand accent. Reserved for singular highlight moments, never decorative filler.
Graphite Mist
#535353
Tag & badge fill. Background for small uppercase labels like work-category chips.
Slate Charcoal
#2a2a2d
Dark card surface. Pricing CTA backgrounds and other high-contrast inset panels.
Typography
The quick brown fox jumps
Uppercase eyebrow labels, badges, and small tracked tags layered over photography.
The quick brown fox jumps
Primary UI, body copy, navigation, and functional text across the whole site.
The quick brown fox jumps
Monumental hero wordmarks and oversized display headlines.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1400pxSection gap
250pxCard padding
30pxElement gap
20pxSpacing scale
Purpose
Value
Preview
--spacing-10
10px--spacing-20
20px--spacing-30
30px--spacing-40
40px--spacing-50
50px--spacing-60
60px--spacing-100
100px--spacing-120
120px--spacing-150
150px--spacing-250
250px--spacing-300
300pxBorder radius
pill160pxcards10pxsmall4pxcircle999pxbuttons10pxcontainer10pxlarge-cards25pxSurfaces
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 1Canvas White
Level 2Whisper Smoke
Level 3Midnight Charcoal
Level 4Slate Charcoal
Do's and don'ts
- Use ©-marked section headings (e.g. "Work©", "Testimonials©") to reinforce the proprietary studio-system identity.
- Pair the oversized Caslon Condensed display headline with compact IBM Plex Mono labels for contrast between scale and restraint.
- Keep section padding generous (250–300px vertical) to preserve the breathing room that defines the editorial rhythm.
- Apply dark, blurred overlay cards (backdrop-filter blur) over photography to maintain legibility without flattening the image.
- Use pill-shaped buttons with 10px radius and black (#000000bf) fill for primary CTAs, keeping hover state at 76% opacity.
- Limit color to near-monochrome blacks, whites, and whitesmoke grays — reserve Electric Yolk yellow for rare accent moments only.
- Let big editorial photography (deserts, portraits, abstract textures) anchor each hero and work card, letting typography sit on top.
- Don't introduce bright multi-color palettes; the system is built on black/white/gray contrast with one accent yellow at most.
- Don't shrink the display headline treatment — the oversized hero wordmark is a core brand signature, not a decorative afterthought.
- Don't use heavy drop shadows; this system favors flat surfaces, soft blur overlays, and crisp 4–25px radii instead.
- Don't crowd sections — avoid reducing the generous vertical padding that gives the layout its confident, uncluttered pace.
- Don't mix serif display type with mono labels inconsistently; reserve serif strictly for hero/display moments and mono strictly for eyebrow/badge text.
- Don't use the 160px pill radius for every button — reserve it for distinct, high-visibility call-to-action moments only.
Example prompts
New hero section
Services breakdown
Testimonial carousel
Pricing CTA
# 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