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.
Nothing™
Nothing™ is a modular Webflow template engineered as a full design system in disguise — a warm, off-white canvas threaded with near-black ink and a single muted lavender accent that never shouts. The aesthetic is deliberately restrained: large, tight-tracked Switzer headings carry all the visual weight while Space Mono labels inject a quiet monospace contrast for metadata and tags. Sections alternate between a bleached linen base, a cool chalk depth surface, and crisp white lift cards, creating a calm layering rhythm punctuated by cinematic full-bleed imagery and subtle scroll-triggered blur entrances. The template operates in two modes with complete fluency — a bright parchment light mode and a pitch-black dark mode — with every token wired for both contexts. Components are pill-butted and softly radiused, icon strokes are deliberately thin at 1.5px, and the only color drama is borrowed entirely from the photography. Nothing™ is infrastructure for storytellers who understand that the most powerful design statement is knowing when to get out of the way.
Sections from Nothing
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Logos Grid with Marquee
View section
Features Grid with CTA Block
View section
Multi Level Navigation Bar
View section
Tabbed FAQ with Expandable Sections
View section
Newsletter Signup with Background Video
View section
Hero with Animated Marquee Cards
View section
Background Image Testimonial Slider
View section
Interactive Features Showcase Tabs
View section
Rated & Reviewed Testimonials Marquee
View section
Video Hero with Overlay Content
View section
Single Testimonial with Quote
View section
Video Background Call To Action
View section
Colors
Canvas
Linen Dust
#f6f3f0
Page canvas & base background. Fills every default section, the footer, and form inputs.
Chalk Hollow
#ebe8e3
Depth surface & patterned sections. Used on features, testimonials, stats, and project-list sections to create a recessed layer.
Lifted White
#ffffff
Lifted card & navbar surface. Navbar pill, form blocks, and cards that sit above the page canvas.
Ink
Ash Medium
#222222
Dark depth surface. The deepest background within dark sections, contrasting against carbon-veil cards.
Carbon Veil
#1a1a1a
Dark surface lift. Elevated cards and panels within dark-mode sections.
Midnight Pitch
#000000
Primary ink & dark section fill. All heading text, primary button backgrounds, and full dark section backgrounds.
Accent
Plum Shadow
#4c3e5e
Primary brand accent. Gradient blobs, decorative hero atmosphere — never applied to large solid fills.
Dusty Violet
#71649b
Secondary accent tone. Mid-weight gradient complement to Plum Shadow in atmospheric hero overlays.
Pale Periwinkle
#bec7de
Tertiary accent highlight. Lightest accent, used for soft gradient fade edges and decorative circles.
State — utility only
Success Mint
#2ad87f
Success confirmation state. Positive feedback indicators in forms and toasts.
Warning Amber
#c56a21
Warning state. Caution notices and advisory messaging only.
Error Cinnabar
#c94040
Form error state. Input borders and error messaging only.
Typography
The quick brown fox jumps
Universal display, heading, body, and button typeface. A geometric grotesque that reads as contemporary and calm at every scale.
The quick brown fox jumps
Label and tag typeface only. Monospace rhythm adds technical contrast against Switzer's clean geometry in category tags, nav labels, and form field labels.
Spacing & shape
Purpose
Value
Preview
Density
comfortableMax width
1800pxSection gap
80pxCard padding
32pxElement gap
16pxSpacing 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
120px--spacing-160
160px--spacing-200
200pxBorder radius
pill9999pxtags0pxcards24pxinputs16pxbuttons32pxdefault12pxbutton-circle24pxSurfaces
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 1Linen Dust
Level 2Lifted White
Level 3Chalk Hollow
Level 4Midnight Pitch
Level 5Carbon Veil
Level 6Ash Medium
Do's and don'ts
- Apply a 32px border-radius to all primary and ghost buttons consistently — the pill shape is a deliberate, signature element that should appear on every CTA regardless of size.
- Use Switzer at weight 600 with tight negative letter-spacing (−2px to −4.5px) for all display and heading roles; the compressed tracking at large sizes is what gives the template its editorial authority.
- Alternate sections between Linen Dust (#f6f3f0), Chalk Hollow (#ebe8e3), and Midnight Pitch (#000000) to maintain the stacked-layer rhythm — never use two consecutive identical background colors.
- Stack sections with a −24px negative margin overlap and a 24px border-radius on the overlapping section to create the signature 'card-sliding-over-card' compositional effect.
- Reserve Space Mono exclusively for labels, tags, and category identifiers — keep it at 10–12px, uppercase, with 0.75px letter-spacing to maintain its quiet machine-tag authority.
- Use the soft-blur entry animation (filter: blur(12px); opacity: 0 → clear) on all hero headlines and card grids; this is the primary motion signature of Nothing™.
- Let photography carry all color drama — the template palette is intentionally neutral so that any vivid image (a copper popsicle, an orange-suited runner) reads as a deliberate editorial statement.
- Don't introduce new saturated or bright brand colors as UI fills — the accent purples (#4c3e5e, #71649b, #bec7de) are atmospheric-only and should never appear as button backgrounds, borders, or text colors in the main UI.
- Don't use rounded corners on tags — the 0px radius on .label-master tags is intentional and creates a visual counterpoint to the pill buttons; rounding them destroys the contrast.
- Don't apply Switzer at weights below 400 for body or above 600 for headings in default contexts — the system is tuned for normal (400) body and semi-bold (600) headings; heavier weights feel out of character.
- Don't add drop shadows to cards or navigation — the elevation system relies entirely on background color differentiation and negative-margin overlap, not box-shadows.
- Don't place decorative text or illustrative icons in the hero — the visual hierarchy depends on one large typographic statement paired with a single full-bleed photograph; competing elements break the silence.
- Don't mix the light and dark backgrounds within a single section — each section is either fully light (Linen Dust / Chalk Hollow / Lifted White) or fully dark (Midnight Pitch / Carbon Veil); hybrid splits violate the layering logic.
- Don't use letter-spacing above 0.075em for labels or below −0.056em for display text — the spacing scale is deliberately bounded to maintain legibility at both extremes.
Example prompts
Hero section headline
Dark CTA section
Stats section
Feature card trio
# 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