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.
next:well
next:well is a Webflow template built for AI-operations brands that want to feel calm, engineered, and quietly confident. The system pairs an oat-toned canvas with stark black ink, letting a single dusty plum accent and a clear morning blue carry all the emotional weight — nothing is shouted, everything is placed. Typography leans on an unbolded, almost architectural Geist for headlines at enormous sizes, contrasted against IBM Plex Mono micro-labels in uppercase tracking, giving the whole template a lab-report precision beneath its soft, warm palette. Structurally the template is built from shared Webflow variables — pill-shaped buttons, a tight 4px spacing unit scaled up to vast 200px section gaps, and a small family of lifted, stone-toned surfaces that sit just a few percent darker than the base canvas. The result reads as premium SaaS: monochrome photography, generous whitespace, rounded corners everywhere, and a restrained use of color that signals control rather than decoration.
Sections from Nextwell
A handful of real sections that ship with this template. Click any card to preview, or explore them all under the Sections tab.
Tabbed Features with UI Previews
View section
Full-Screen Video Hero with Case Card
View section
Case Study Testimonial Slider Cards
View section
Animated Stats Section with CTA
View section
Three-Tier Pricing Plans with Comparison Table
View section
Feature Cards Slider with Image Background
View section
Dual CTA Cards with Scroll Animation
View section
Newsletter CTA with Email Form
View section
Feature Accordion with Visual Widget
View section
Two-Plan Pricing Cards with Features
View section
Tabbed FAQ with Testimonial Below
View section
Case Study Stats with CTA Section
View section
Colors
Canvas
Sand Dune
#e6e0d6
Alternate section wash. Breaks up long pages with a warmer, sandier background band.
Oat Canvas
#f5f4f1
Primary page background. Base canvas behind all sections and the default light surface.
Quiet Stone
#e1e0de
Secondary lifted surface. A touch deeper than Lifted Linen for nested or secondary cards.
Lifted Linen
#ebeae7
Card & tile surface. Used for sales cards, dropdown panels, and any element lifted off the base canvas.
Ink
Midnight Ink
#000000
Primary text & ink. Headlines, body copy, primary button fills, and the sticky dark navbar.
Accent
Dusk Plum
#4c3e5e
Signature brand accent. Used sparingly for highlighted words, icons, and feature callouts.
Morning Blue
#4f8bd3
Secondary accent & link ink. Reserved for interactive highlights and gradient ink purposes.
State — utility only
Amber Gold
#c28a00
Warning state. Caution banners and pending-task indicators.
Ember Rust
#a63f3a
Error state. Form validation failures and destructive action warnings.
Moss Green
#4eab52
Success state. Completed task indicators and positive confirmations.
Typography
The quick brown fox jumps
Headings, body copy, and buttons across the entire template.
The quick brown fox jumps
Uppercase eyebrow labels, badges, and micro-tags like ratings and status pills.
Spacing & shape
Purpose
Value
Preview
Density
spaciousMax width
1440pxSection gap
160pxCard padding
24pxElement gap
16pxSpacing scale
Purpose
Value
Preview
--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
tag16pxfull9999pxcards16pxsmall4pxbuttons32pxdefault8pxbutton-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 1Oat Canvas
Level 2Lifted Linen
Level 3Quiet Stone
Level 4Sand Dune
Level 5Midnight Ink
Do's and don'ts
- Use IBM Plex Mono, uppercase and letter-spaced, for eyebrow labels, badges, and stat strips.
- Apply full pill radius (32px on buttons, 9999px on tags) consistently across all interactive elements.
- Keep headline type at normal (400) weight even at 64–88px display sizes for an editorial, unbolded feel.
- Use generous section padding (120px–200px) to preserve the template's spacious, unhurried rhythm.
- Reserve Dusk Plum and Morning Blue for single accent moments — never apply them as large fills.
- Pair black-and-white photography with one warm-toned image per section for visual contrast.
- Lift cards off the canvas with Lifted Linen or Quiet Stone rather than heavy drop shadows.
- Don't bold headline text — the system relies on weight restraint, not boldness, for hierarchy.
- Don't introduce new saturated accent colors beyond Dusk Plum and Morning Blue.
- Don't use sharp corners; every button, tag, and card should carry a visible radius.
- Don't cram sections tightly together — always preserve the large vertical rhythm.
- Don't mix serif fonts into the type system; Geist and IBM Plex Mono are the only two families.
- Don't apply color-heavy backgrounds behind body copy; keep canvases neutral and warm.
- Don't stack more than one eyebrow label per hero section.
Example prompts
Hero section
Feature card
Stat strip
CTA band
# 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