flowmanceFolie Design System
Folie is a bright, cheerful startup and business template built on one electric slate blue (#4253FF) and white. The nav is a white bar with a soft shadow; the hero is a full-bleed blue field with large, pale low-poly facets catching light; content below is white with light grey Roboto text. It reads as an upbeat SaaS or agency kit rather than an editorial site.
Four signatures make it recognisable:
- Uppercase outlined buttons with a sliding arrow. Poppins 13px, weight 500, 1px tracking, in a 2px border with a 10px radius. On hover the button fills blue and a long right arrow slides in beside the label.
- Blue and green together. Blue carries the brand and links; one green (#03BF6D) button marks the purchase or main conversion action, right next to a white-outlined button on the hero.
- Blue corner triangles. Preview cards carry a 70px blue right triangle in the bottom-right corner with a white number (1, 2, 3…).
- Poppins over light Roboto. Headlines are Poppins 400 (never bold); paragraphs are Roboto 300 at 17px in light grey #919197, which makes the page feel airy.
The live preview is the template's index page (a gallery of its 15 homepage layouts); every layout uses the same blue, white, buttons and type.
Colors
Surfaces
#FFFFFFPage background, nav, cards
#FAFAFAInput hover and focus background, the first step off white
#F1F1F7Footer background
#A6ABBDThe grey-blue gallery band, with an inner top shadow
Ink
#FFFFFFText and icons on blue
#FFFFFF#4F5362Section title on the grey band
#121217Headings and default text
#121217 · 50%Nav links at rest
#515157Plain links, the small uppercase legal line
#919197Paragraphs, footer links, eyebrows, quotes
#121217 · 40%Dropdown links
#FFFFFFHero title / hero subtitle / underlined credit links on blue
#FFFFFF · 80%Muted text on media
#FFFFFF · 50%Muted text on media
Action
#4253FFBrand blue (--slate-blue): hero field, outlined and filled buttons, feature titles, active nav, corner triangles, back-to-top
#4253FF#03BF6DThe green purchase button (--medium-sea-green), and small green accents in the layouts
Lines & effects
#E1E1E1Light grey fills and rules in the layouts
#000000 · 10%Every shadow (nav, cards, inputs)
Typography
Poppins · display-hero
The quick brown fox jumpsHero title Have your dream site in minutes. 52px · 400 · 1.0
Poppins · headline-lg
The quick brown fox jumpsh1 default, section titles (Homepage Layouts.). 38px · 400 · 1.16
Poppins · title-lg
The quick brown fox jumpsCTA band line Meet Folie, your design toolkit. 26px · 300 · 1.15
Poppins · subtitle
The quick brown fox jumpsHero and section subtitles. 18px · 300 · 1.67
Poppins · quote
The quick brown fox jumpsblockquote with a 2px blue left border. 20px · 300 · 1.5
Roboto · body-lg
The quick brown fox jumpsParagraphs, footer links. 17px · 300 · 1.59
Spacing & shape
| Purpose | Value |
|---|---|
| Container | .container-fluid, max 1170px, centred, with 10px side padding on sections |
| Breakpoints | 991px, 767px and 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 10px | |
md | 20px | |
lg | 30px | |
xl | 45px | |
2xl | 80px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-side | 10px | |
corner | 70px | |
footer-top | 70px | |
section | 100px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Hero entrance | Title, subtitle and buttons fade and slide into place: opacity 0 → 1, move to 0,0, 1000ms outQuart |
| Button hover | all 300ms: fill change and arrow slide (padding 30/30 → 20/45px, background-position 128% → 90%) |
| Nav link hover | all 400ms: colour to blue, bottom border to blue |
| Credit links | all 300ms: 50% white to full white |
| Dropdown chevron | Rotates as the dropdown opens, 400ms ease |
Do’s and don’ts
- Use #4253FF for the hero field, links, feature titles and buttons, with white text on it.
- Use one green #03BF6D button per screen for the main conversion, beside a blue or white-outlined one.
- Set buttons in uppercase Poppins 13px weight 500 with 1px tracking, a 2px border and a 10px radius, and slide the arrow in on hover.
- Pair Poppins 400 headlines with Roboto 300 paragraphs.
- Use the one shadow recipe 0 12px 10px -7px #0000001A for cards and inputs.
- Keep cards and images square-cornered.
- Use green for text or small elements; white on #03BF6D is about 2.4:1, so keep the green button label at 13px weight 500 uppercase with 1px tracking and never smaller.
- Set ink-muted #919197 below 17px on white; it is about 3.1:1. Use #121217 for anything small that must be read.
- Bold the headlines or use weights above 500 for headings.
- Tint the shadows blue or make them larger than the recipe.
- Round cards or images.
- Use the low-poly facets anywhere but the full blue hero.
- Put nav links in full black; they rest at 50% and turn blue.
- Keep the #919197 footer links on #F1F1F7 at 17px or larger; they are about 2.8:1 there. Darken them to #515157 if the footer must carry small text.
Example prompt
Any page in the Folie style
More design systems like this
Business 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 Folie 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/folie.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