flowmanceUnlimited Design System
Unlimited is a light, upbeat agency template. It reads as clean and slightly playful: lots of white, a very pale blue-grey band, medium-weight Poppins headlines in near-black, and one fresh lime green that does the brand work (logo, underlines, tags, buttons, blurred blobs). Paragraphs are light grey and airy, cards float on long soft shadows, and nothing is dark except the text.
The published preview opens on an intro page that shows the template's own layouts as framed screenshots. The same system runs through every layout in those thumbnails.
Four signatures make it recognisable:
- Lime-underlined headlines. Hero lines are near-black #212127 text with a lime #2ADC65 underline under each line (Meet Unlimited / your design toolkit., Digital Agency, / Creative People, / Crazy Template.). The heading itself is coloured lime with text-decoration: underline, and the words sit in dark spans, so only the underline shows the green.
- The lowercase un mark. A chunky lowercase lime un logo (60px wide) followed by digital agency in grey #717177.
- Long diagonal shadows. Cards and screenshots cast a soft blue-grey shadow down and to the right (16px 16px 22px -15px and 31px 31px 44px -22px, both in #677582 at 20–30%), never a shadow all round.
- Blurred green blobs and a pale collage. The hero sits on a washed-out collage of layout screenshots behind a white gradient, with out-of-focus lime shapes and hatched circles floating on it.
Unlimited is a light-only design. The footer is fixed to the bottom of the viewport and revealed as the page scrolls away (the body has 500px of bottom padding).
Colors
Surfaces
#FFFFFFPage background, cards, inputs
#F8FBFDThe grey layouts band (section gray) and the fixed footer
#EEF4F8One pale panel; use for a second step on the band
#FFFFFF#2ADC65Ink
#FFFFFFText on primary
#FFFFFF#212127Headlines, nav links, card titles, body text set by body
#717177Logo tagline digital agency, the hero eyebrow, footer link hover
#AAAAAAParagraphs (p is #AAA, 16px weight 300), section leads, blockquotes
#B0B0B4Footer link columns
#FFFFFFBanner title on the photo band
Action
#58E787Filled buttons: a lighter mint green with white text
#2ADC65Buttons darken to the lime variable on hover
#2ADC65The --lime-green variable: logo, headline underlines, the 2px nav line, layout tags, footer titles, input focus border, blockquote rule
Lines & effects
#919197Dropdown menu links and their hover (plus an underline)
#616167With nav-dropdown: Dropdown menu links and their hover (plus an underline)
#E2EFF81px input border, the only grey rule
#B4B4B4Input placeholder text
#FFFFFF · 70%The nav backing once the page scrolls
Typography
Poppins · display-hero
The quick brown fox jumpsHero headline Meet Unlimited your design toolkit. 60px · 500 · 1.17
Poppins · headline-banner
The quick brown fox jumpsWhite banner line on the photo band, 60% wide, centred. 38px · 400 · 1.32
Poppins · title-md
The quick brown fox jumpsh4 default, feature titles. 18px · 500 · 1.33
Poppins · eyebrow
The quick brown fox jumpsThe line above the hero title, #717177. 16px · 300 · 1.25
Poppins · body-lg
The quick brown fox jumpsParagraphs and section leads, #AAAAAA. 16px · 300 · 1.88
Poppins · label
The quick brown fox jumpsNav links. 14px · 500 · 1.43
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred, inside sections that pad 30px left and right |
| Section rhythm | 120px top and bottom (.section), at every breakpoint; side padding drops from 30px to 20px at ≤479px |
| Section header | centred headline-lg title, then a body-lg lead in #AAAAAA, max about 600px wide (.title-wrapper is 75%) |
| Breakpoints | 991px, 767px and 479px, with a few min-width: 768px rules |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 2px | |
xs | 5px | |
sm | 10px | |
md | 15px | |
lg | 20px | |
xl | 30px | |
2xl | 60px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
gutter | 30px | |
section-short | 50px | |
nav | 90px | |
section | 120px | |
section-banner | 180px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Button hover | transition: all 0.3s (default ease), #58E787 → #2ADC65 |
| Hero collage parallax | Pieces move on page scroll by y from −300px to +200px |
| Screenshot drift | Tall screenshots in the layout frames move y −50 to −200px while scrolling in view |
| Page-load fade | Elements fade from opacity 0 to 1 on page finish, 200–500ms, ease |
| Nav on scroll | Size and background change over 500ms; nav shrinks and gains the white backing |
| Hover pairs | Four mouse-over / mouse-out pairs change text and background colour over 500ms |
| Size changes | 400ms outCubic and 800ms ease (dropdown and line growth) |
Do’s and don’ts
- Underline hero headline lines in lime #2ADC65 under #212127 text.
- Use Poppins 500 for headings and 300 for paragraphs, with no letter spacing.
- Put grouped content on the #F8FBFD band with 120px top and bottom padding.
- Use the mint #58E787 button with a 10px radius, 50px tall, turning #2ADC65 on hover in 300ms.
- Give cards square corners and the down-right shadow 16px 16px 22px -15px #67758233.
- Cut feature photos into organic blob shapes and add a blurred lime blob.
- Add a second brand colour, dark sections or dark buttons.
- Set small text in #AAAAAA (ink-subtle); keep it for paragraphs at 14px and above.
- Put button labels under 14px; white on #58E787 is low contrast, so keep labels 14px+ on a 50px button.
- Use bold weights (600+) or uppercase in headings.
- Round the cards or screenshots; only buttons (10px), inputs (5px) and tags (4px) are rounded.
- Use all-round or dark shadows; shadows are blue-grey and offset down-right.
- Use the pale greys (#919197 dropdown links, #B0B0B4 footer links) or lime #2ADC65 text below 14px, or put #717177 on #EEF4F8; these are the template's real colours but sit under 4.5:1.
Example prompt
Any page in the Unlimited 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 Unlimited 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/unlimited.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