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.
Modulabs
Modulabs is a precision-engineered dark-first design system tuned for consulting firms, software teams, and advanced-industry brands. Its signature mood blends near-black canvases with warm cream contrast and a single ember-orange accent — the kind of restraint you find in instrumentation panels and machined parts. The template trades flourish for legibility: variable Geist sans handles every headline and body, Geist Mono carries uppercase micro-labels, and translucent lifted surfaces with hairline 1px borders create depth without ornament. Typography pulls tight (-2.5px tracking on display) while UI radii stay deliberately small at 8px — corporate polish with experimental, instrument-grade flair.
Sections from Modulabs
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Navigation Bar with Mega Menu
View section
Video Hero with Case Studies
View section
Interactive Service Features Tabs
View section
Multi Column Footer Layout
View section
FAQ Section with Expandable Tabs
View section
Hero Risk Assessment Dashboard
View section
Video Background Contact Form
View section
Video Hero with CTA Buttons
View section
Features Grid with Client Testimonial
View section
Contact Form With Contact Cards
View section
Statistics Grid with Labels
View section
Feature Slider with Navigation Arrows
View section
Colors
Canvas
Lifted Onyx
#121212
Elevated surface in dark mode. Cards, form panels, and lifted sections atop the void.
Stone Depth
#e6e0da
Light-mode depth surface. Inset panels and contrast areas in light theme.
Lifted Paper
#fcfaf6
Light-mode lifted surface. Cards and panels in light theme contexts.
Graphite Void
#0a0a0b
Base canvas & primary dark surface. Page backgrounds, hero sections, and dark-mode foundation.
Depth Charcoal
#212122
Deepest contrast surface. Tag chips, custom plan cards, and inset panels needing extra depth.
Ink
Parchment Cream
#f6f3ec
Primary text on dark & light canvas. Headlines, primary button fills, and the warm light-mode base.
Softened Parchment
#f6f3ece0
Secondary heading & strong body text. 88% cream for slightly recessed copy.
Accent
Ember Signal
#e45a47
Sole brand accent. Label dots, arrow icons, accent text spans, and active-state indicators.
State — utility only
Warning Rust
#c56a21
Warning state utility. Reserved for system messages and form caution.
Alert Crimson
#c94040
Error state utility. Form validation and destructive feedback only.
Verdant Pulse
#2ad87f
Success state & live indicator. Used sparingly on availability dots inside the Book a call button.
Typography
The quick brown fox jumps
Micro-label family. Reserved for uppercase eyebrow labels, footer legal links, and form input labels.
The quick brown fox jumps
Primary family. Powers all headings, body copy, and button labels — a single voice across the system.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1800pxSection gap
120pxCard padding
32pxElement gap
24pxSpacing scale
Purpose
Value
Preview
--spacing-0
0px--spacing-4
4px--spacing-8
8px--spacing-12
12px--spacing-16
16px--spacing-20
20px--spacing-24
24px--spacing-32
32px--spacing-48
48px--spacing-64
64px--spacing-80
80px--spacing-120
120pxBorder radius
pill9999pxcards8pxinput8pxlarge16pxbuttons8pxdefault8pxSurfaces
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 1Graphite Void
Level 2Lifted Onyx
Level 3Depth Charcoal
Level 4Parchment Cream
Do's and don'ts
- Anchor every page on Graphite Void (#0a0a0b) and let Lifted Onyx panels float a single step above with hairline 1px borders in 16% cream.
- Use Ember Signal (#e45a47) only as a single highlight per section — a label dot, an arrow icon, or one accent word inside a heading.
- Pair every heading with a Geist Mono micro-label in 12px uppercase, prefixed by an 8×8 ember square — this is the system's signature eyebrow.
- Track headlines tightly: -2.5px on 64–96px display, -2px on 48px H2, scaling back to 0 by H6. Never letterspace headlines positively.
- Apply 32px padding inside cards and 80–120px vertical padding between sections to preserve the spacious, instrument-panel rhythm.
- Use the secondary button rim shadow (inset top + bottom 1px cream lines) on translucent lifted CTAs to suggest machined bevels.
- Render primary CTAs as cream-fill pills with dark ink text; secondary CTAs as 8% cream tint over the lifted surface.
- Don't introduce additional saturated colors — Ember Signal is the only chromatic accent; everything else is grayscale or warm cream.
- Don't round buttons or cards beyond 8px (or full pill via 9999px). The system's tension lives in small, deliberate radii against soft surfaces.
- Don't mix Geist Sans and Geist Mono within the same line — Mono is reserved for uppercase micro-labels, never for body or buttons.
- Don't use drop shadows for elevation — depth comes from surface tone shifts (void → onyx → charcoal) and 1px hairline borders, not blur.
- Don't apply Ember Signal to large area fills, headlines, or button backgrounds — keep it confined to icons, dots, and single accent words.
- Don't break the 4-px spacing rhythm — every gap, padding, and inset snaps to 4/8/12/16/20/24/32/48/64/80/120.
- Don't bold body text into weight 700 — Modulabs maxes 'bold' at weight 500 (medium) to maintain its restrained, technical voice.
Example prompts
New hero section
Feature card grid
Section eyebrow
Pricing card
# 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