flowmanceForli Design System
Forli is a bright, glossy studio site. A clean white page and black Inter Tight 600 text are lit by one gradient, violet #602CD2 to red #EA1E49, which colours the button, the last words of key sentences and soft blurred glows behind the work. The imagery is high-gloss 3D: a crystal cube, chrome ribbons, liquid glass on electric blue.
Four signatures make it recognisable:
- Gradient words. Headlines are black and end in gradient text: Elevate your digital identity using Forlí, the Webflow template that seamlessly combines sleek design., Real encounters, / solid achievements.
- The spinning menu badge. Top-right, the word menu repeated four times around a circle with a thin + in the middle. It turns as the page scrolls.
- Gradient glow bands. Sections sit on blurred violet-to-pink glows: the hero cube has a lilac haze, and Featured works runs on a soft #602CD2 → #EA1E49 band behind a sideways row of images.
- Plain big numbers. Stats are centred, 120px black figures with small grey labels (110 Project Completed, 13 Years of Experience, 47+ Awards).
The page is light, with one black band for testimonials.
Colors
Surfaces
#FFFFFFPage background, nav, menu overlay
#FFFFFFSame as canvas: cards and lists sit flat on white, with no panel colour
#616161 · 20%1px input borders
#333333Typed text in inputs (Webflow's default input colour)
#000000The testimonials band
#110E1FDeep violet-black blocks and the button hover
Ink
#FFFFFF#FFFFFF#000000Headlines, nav, tags, numbers
#000000 · 70%Paragraphs (p has opacity 0.7)
#777777Stat labels, the grey half of intro lines, placeholders (--dark-grey)
#FFFFFFText on inverse-canvas
#FFFFFF · 65%Paragraphs on black
#FFFFFFAction
#602CD2The button gradient (310°) and gradient text (63°)
#110E1F:hover background of the gradient button (--black-second)
#EA1E49The button gradient (310°) and gradient text (63°)
Lines & effects
#8686861px dashed rules under expertise rows (17 uses)
#0000002px outlines of tags and the menu count circles
#B08DFFOne flat colour per testimonial slide
#A8AEDAOne flat colour per testimonial slide
#F09597One flat colour per testimonial slide
#FFFFFF · 40%Slider dots
Typography
Inter Tight · display-stat
The quick brown fox jumps110, 13, 47+. 120px · 600 · 1.0
Inter Tight · headline-marquee
The quick brown fox jumpsProject titles running across work cards (.text-rotator, 15 uses): Dreamy Visions. 80px · 500 · 1.2 · 1px
Inter Tight · title-lg
The quick brown fox jumpsTestimonial quotes. 30px · 600 · 1.3
Inter Tight · body-xl
The quick brown fox jumpsAbout statement: The team at Forlí, known for their inventive agency work…. 27px · 600 · 1.4
Inter Tight · label-button
The quick brown fox jumpsGradient button. 20px · 600 · 1.0
Inter Tight · eyebrow
The quick brown fox jumpsFooter tags, the menu badge text. 13px · 600 · 1.1 · 1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px (.container), 650px for narrow centred text |
| Section rhythm | 100px top and bottom (.section), 80px at ≤991px and 50px at ≤767px; the first section after the hero ends with 150px |
| Breakpoints | 991px, 767px and 479px, plus min-width steps at 768 and 1440px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 15px | |
md | 16px | |
lg | 25px | |
xl | 30px | |
2xl | 50px | |
3xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
gutter | 72px | |
section | 100px | |
nav-height | 120px | |
section-end | 150px | |
hero-bottom | 160px |
Border radius
Motion
| Headline reveal | Lines move y 200% → 0% with skewY 7° → 0°; the move is 1100ms outQuint, the skew 500ms |
| Fade-in | opacity 0 → 1 over 1000–1250ms outQuart |
| Mouse parallax | Renders shift ±6px in x and y over 500ms |
| Menu badge | Rotates with page scroll |
| Button label roll | y 0 → −100% over 400ms inOutCubic, copy back to 0% over 300ms inOutCubic |
| Hover colour | Background colour 300ms ease; filter 300ms ease |
| Pop | scale 0.8 → 1, 300ms outQuad |
| Menu open | Overlay shown, links roll up in their 74px masks, 500ms |
Do’s and don’ts
- Keep the page #FFFFFF with black (#000000) Inter Tight 600 headlines and 17px paragraphs at 70% black.
- Use the #602CD2 → #EA1E49 gradient for the main button (8px radius, 17px 25px padding) and the last words of key sentences.
- Put grey (#777777) on the second half of intro lines and on stat labels.
- Show work as large renders with no radius in a sideways row on a blurred gradient band.
- Use 2px black outlines for tags and 1px dashed #868686 rules for lists.
- Add a third accent colour or use the unused #F0F5FF and #ECFCF4.
- Set whole headlines or body text in gradient.
- Round images or add drop shadows.
- Put small text over the blurred glows.
- Use uppercase outside tags.
- Swap the gradient button for a flat colour; the flat #110E1F is only its hover.
- Set ink-subtle #777777 below 17px: it is only about 4.5:1 on white, so keep it for 17px+ labels and meta.
Example prompt
Any page in the Forli 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 Forli 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/forli.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