flowmanceNext Design System
Next is a clean, bright, multi-concept agency kit. Its home page is a showcase: a solid slate-blue header band with a centred Poppins headline and an italic serif subtitle, then a white grid of homepage previews that glow faintly blue. The mood is friendly and tidy, with lots of white space, centred headings and square-cornered blocks.
Four signatures make it recognisable:
- The slate-blue band. The nav and hero share one flat #4253FF field: social icons on the left, the letter-spaced NEXT wordmark in the centre, and a thin 2-line hamburger on the right. The same blue returns as the closing CTA band.
- Sans heading, serif italic under it. Hero and section titles are Poppins 500 and are followed by a Playfair Display italic line (grey under section titles): Homepage Layouts / The perfect Webflow template to get you started!. Body text is Playfair too, so the serif carries all reading text.
- Square buttons with an orange fill. Buttons have no radius. On hover an orange (#FE7B01) layer rises from the bottom and fills the button.
- Blue glow instead of grey shadow. White cards are lifted by 0 0 30px 5px in the primary blue at 10%, not by a grey drop shadow.
Next is a light template.
Colors
Surfaces
#FFFFFFPage background
#FFFFFFCards
#4253FFThe nav and hero band and the closing CTA band, with white text
#FFFFFFForm inputs
#ECECECWith field: Form inputs
#333333Ink
#FFFFFFText on primary
#FFFFFF#FFFFFFText on inverse-canvas
#212127Headings and body default
#414147Drawer menu links
#515157Paragraphs (p) and the footer address
#616167Dropdown links
#717177Italic subtitles under titles
#818187Footer links
Action
#4253FFFilled buttons, h4 card titles, link hover, the blockquote rule, the search focus border
#FE7B01The button's hover fill and the home-tag labels
#FE7B01The button's hover fill and the home-tag labels
#35B880Defined in the Webflow variables for inner-page bands and icons
#24BCA4Defined in the Webflow variables for inner-page bands and icons
Lines & effects
#EDEDEDSection bottom rules and drawer link rules
#E1E1E1Footer divider and search input border
#999999Placeholder text on field
Typography
Poppins · display-hero
The quick brown fox jumpsHero headline in white, two centred lines. 60px · 500 · 1.0
Poppins · headline-md
The quick brown fox jumpsBase h1, section titles (Homepage Layouts). 42px · 500 · 1.19
Poppins · title-md
The quick brown fox jumpsBase h4 and card titles, in primary blue. 18px · 500 · 1.33
Playfair Display · body-lg
The quick brown fox jumpsHero subtitle. 23px · 400 · 1.48
Poppins · label
The quick brown fox jumpsButtons. 14px · 600 · 1.43
Spacing & shape
| Purpose | Value |
|---|---|
| Container | .container-fluid, max 1170px, centred |
| Section rhythm | .section is 100px top and bottom with 10px side padding and a 1px #EDEDED bottom rule |
| Breakpoints | 991px, 767px and 479px, plus a min-width: 768px rule set |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 12px | |
md | 20px | |
lg | 30px | |
xl | 40px | |
2xl | 50px | |
3xl | 80px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-cta | 80px | |
section | 100px | |
nav-height | 100px |
Border radius
Motion
| Page-load reveal | opacity 0 → 1 and move → 0, 1000ms outQuart |
| Scroll-into-view fade-up | opacity 0 → 1, y 20px → 0, 400ms ease |
| Button fill | Orange overlay height 0% → 100%, 300ms inOutBack; out 400ms ease |
| Hamburger | Lines rotate and move, 300ms inOutBack |
| Drawer link hover | Colour to #4253FF and padding-left 70 → 80px, 400ms |
| Dropdown link, close icon | 200ms |
| Tag reveal | opacity 0 → 1, 300–500ms |
Do’s and don’ts
- Use #4253FF as a full band for the nav and hero together, and again for the closing CTA.
- Pair every Poppins 500 title with a Playfair Display italic subtitle in #717177.
- Set paragraphs in Playfair Display 15px / 26px, #515157.
- Keep buttons square, 52px tall, padding 17px 25px 15px, with the orange fill rising on hover.
- Lift white cards with 0 0 30px 5px #4253FF at 10%, not grey shadows.
- Separate sections with 100px padding and a 1px #EDEDED rule.
- Round buttons, cards or images; only inputs get 8px.
- Use orange #FE7B01 for backgrounds or long text. White on it is 2.6:1, so keep it to short 14px weight-500+ labels and the hover fill.
- Set paragraphs in Poppins or headings in Playfair (the blockquote is the one serif display line).
- Add uppercase labels or letter spacing.
- Use the green and teal variables on the home showcase; they belong to inner-page accents.
- Use bold (700+) Poppins for headings; titles are 500.
- Use ink-faint #818187 (3.9:1 on white) for anything but 14px+ footer links and meta.
- Animate content in for longer than 1000ms, or loop motion.
Example prompt
Any page in the Next style
More design systems like this
Agency design systems, the same colors first.
Bring any of them to your AI tool
All Access unlocks all 398 design systems, ready for Claude, ChatGPT, Gemini, Cursor, v0 and Lovable, plus 400+ templates on all 5 platforms.
Get All AccessUpgrade to All AccessHow to use the Next design system
Pick a file to see what it’s for and where it goes.
What it is
The whole design system in one markdown file, written for AI: every color, type style, spacing value, component and motion rule, plus do's, don'ts and a ready prompt.
Best for
Claude, ChatGPT, Gemini, Cursor and v0, or any other AI tool that builds pages or code.
How to use it
- Put
DESIGN.mdin your project and mention it in your request, or save it as.cursor/rules/next.mdc - For the rule file, start it with a front-matter block that sets
alwaysApply: true, so every chat uses it - Ask: “Build a pricing page using DESIGN.md.” Cursor follows the colors, fonts, spacing and rules
- Put
DESIGN.mdin the project root - Add one line to
CLAUDE.md: “Follow DESIGN.md for all UI.” - Ask for any page or component; Claude reads the file first
- Attach
DESIGN.mdto the chat (or paste it in) - Ask: “Build a landing page in this design system.”
- Keep the file in the chat or project knowledge, so follow-up pages stay on style
What it is
Every token as data, in the W3C Design Tokens format: colors with their roles, type styles, radius, spacing, and component tokens that point at them.
Best for
Figma (Tokens Studio), Style Dictionary and other design-token tools, and build scripts.
How to use it
- In Figma, open Tokens Studio, choose Import, and pick
tokens.json - Or point Style Dictionary’s
sourceat it to generate tokens for any platform - In code, import it like any JSON file
What it is
A Tailwind CSS v4 theme: every color, font, type style, radius and spacing value becomes a Tailwind utility, like bg-canvas, text-headline-lg or rounded-md.
Best for
Tailwind v4 projects, and AI builders that write Tailwind (v0, Lovable, Bolt).
How to use it
- Save
theme.cssnext to your main CSS file - Import it after Tailwind:
@import "tailwindcss"; @import "./theme.css"; - Use the classes:
bg-canvas text-ink rounded-md p-lg
What it is
The same tokens as plain CSS variables on :root. Component values point at the color variables, so changing one color updates everything that uses it.
Best for
Any website: plain CSS, Webflow custom code, Framer, WordPress.
How to use it
- Add it to your stylesheet, or in Webflow paste it into Site settings → Custom code inside a
<style>tag - Use the variables anywhere:
color: var(--color-ink) - Change a token once and every place that uses it follows