flowmanceFolio Design System
Folio is a light, tidy agency and studio template in a single royal blue. The whole page sits inside a fixed white frame: a 60px white bar at the top (logo and hamburger), white strips at the sides and a 60px white bar at the bottom (social icons and a credit line). Inside the frame the canvas is a pale lavender-grey, and the opening block is a saturated blue gradient. Type is calm and light: Open Sans at weight 400 for headings, Lora italic for subtitles and small credits.
Four signatures make it recognisable:
- The white frame. body has 60px padding; the nav, the footer bar and the side strips are fixed white surfaces, so content scrolls inside a picture frame.
- The blue gradient block. The hero is linear-gradient(45deg, #2333DD, #4772D9) with a few very thin, low-contrast arc and diagonal lines over it, and centred white text.
- Sans heading, serif italic subtitle. Titles in Open Sans 400 are followed by one or two lines of Lora italic, in primary blue on the canvas (white in the hero): Homepage Layouts / *Folio comes with 6 different homepages…*
- Outlined blue labels and blue shadows. Page links are small outlined boxes (1px #4772D9, 10px radius), and every screenshot card floats on a soft blue shadow 0 12px 10px -7px at 20%.
The live preview is the template's index page (a gallery of all its layouts); the layouts it shows share the same frame, blue and type pairing.
Colors
Surfaces
#F1F1F7Page background inside the frame
#FFFFFFThe frame (nav, side strips, footer bar), page-preview cards, form fields
#FFFFFFInputs
#333333Text on field
#313137The dark contact band near the bottom
Ink
#FFFFFFText on blue and on the gradient hero
#212127Headings and default text
#515157Nav links and dotted inline links
#717177Paragraphs (p, Lora 15px)
#919197Roles, meta lines, dotted-link hover
#FFFFFFHero title and subtitle / the Powered by line
#FFFFFF · 90%Muted text on media
#FFFFFFText and light links on the dark band
#FFFFFF · 80%Text and light links on the dark band
Action
#4772D9The brand blue (--royal-blue): filled labels, outlined labels, subtitles, links, nav hover, blockquotes
#4772D9Lines & effects
#2333DDStart of the 45° hero gradient, which ends in primary
#4772D9 · 15%The 1px rule under each .section
#0000001px dotted underline on inline links (Webflow in the credit)
#4772D9 · 20%Card shadow colour
#999999Placeholder text on field
#FFFFFF · 11%Borders inside the dark band
Typography
Open Sans · display-hero
The quick brown fox jumpsHero title Introduction Folio. 60px · 400 · 1.17
Open Sans · headline-lg
The quick brown fox jumpsh1 default, section titles (Homepage Layouts). 38px · 400 · 1.16
Open Sans · title-lg
The quick brown fox jumpsh3 default, card titles. 24px · 400 · 1.25
Lora · subtitle
The quick brown fox jumpsBlue subtitles under titles (.sub-text), white in the hero. 23px · 400 · 1.13
Lora · quote
The quick brown fox jumpsblockquote, blue, with a 1px #E1E1E1 left rule. 26px · 400 · 1.31
Lora · body-serif
The quick brown fox jumpsParagraphs in ink-muted, the footer credit (italic). 15px · 400 · 1.73
Spacing & shape
| Purpose | Value |
|---|---|
| Container | .container-fluid, max 1170px, centred |
| Breakpoints | 991px, 767px and 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 8px | |
sm | 15px | |
md | 20px | |
lg | 30px | |
xl | 40px | |
2xl | 80px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-side | 10px | |
frame | 60px | |
section | 100px | |
section-band | 150px |
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 credit fade and slide into place: opacity 0 → 1, move to 0,0, 1000ms outQuart |
| Nav link hover | Colour to blue, opacity transition 400ms |
| Link hover | all 300ms (dotted links, dropdown links, pop-up close) |
| Arrow link | Padding and background-position shift on hover (see Components) |
| Preview images | all 500ms transition on the 27 screenshot images |
| Mobile menu | Hamburger opens the nav overlay, icon lines rotate and fade, 400ms ease |
Do’s and don’ts
- Keep the 60px white frame (surface-1 #FFFFFF) around a #F1F1F7 canvas on every page.
- Pair each Open Sans 400 title with a Lora italic subtitle in #4772D9.
- Use outlined labels (1px #4772D9, 10px radius, 8px 15px padding) for secondary links and the filled blue label for group headings.
- Put the 45° gradient #2333DD → #4772D9 on the hero and other full-width statement blocks.
- Use the blue shadow 0 12px 10px -7px #4772D933 only under white cards.
- Keep corners square except the 10px labels.
- Add a second accent colour or neutral greys.
- Set headings bolder than 400 or use uppercase.
- Round cards or images.
- Use ink-muted #717177 below 15px on the canvas; it is about 4.3:1 there. On white it passes.
- Use ink-subtle #919197 for anything but short meta lines of 15px and up.
- Set white text on #4772D9 below 14px; the filled label is 14px weight 400 at about 4.5:1.
- Set blue #4772D9 text on the #F1F1F7 canvas below 14px; it is about 4:1, so keep blue for the 14px labels, links and the 23px subtitles.
Example prompt
Any page in the Folio 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 Folio 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/folio.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