flowmanceCreativo Design System
Creativo is a strict black-and-white studio site. It opens on a near-black, full-height quote set in huge all-caps Fleuron, with a small round portrait dropped into the middle of the sentence; the hero is sticky, so the white sections below slide up over it like pages. After that the page is white with near-black type, greyscale photography and no colour at all except inside the one portrait.
Four signatures make it recognisable:
- The quote hero with an inline portrait. "CREATIVITY IS THE LIFEBLOOD [portrait] OF ANY SUCCESSFUL DESIGN STUDIO." at 93px, Fleuron 400, line height 1.0, 2px tracking, white on #111314, with a 115px circular photo set between two words and a thin hooked arrow (↳) after the closing quote.
- A split header around a giant logo. HOME ABOUT WORK on the left, the CREATIVO wordmark (450px wide) in the centre, BLOG CONTACT LEGAL on the right. The logo shrinks as the page scrolls, and the links flip from white to black when white sections pass under them.
- Everything uppercase. The body tag is uppercase; Fleuron headings and Inter nav and labels all set in capitals. Paragraphs (p), project meta, award rows and form text switch back to normal case.
- Greyscale everything. Project photos are black and white, client logos are inverted to black, and the filled buttons are pills: white on dark bands, #111314 on white.
Colors
Surfaces
#FFFFFFBackground of every content section
#FFFFFFSame as canvas: there are no tinted panels or cards
#E1E1E11px input border
#111314Sticky hero, the READY TO TALK band and the footer
Ink
#111314Text on primary
#FFFFFFText on primary-hover
#111314All text on white (CSS --black)
#111314Body text is the same full ink; there is no grey text on white
#333333Input text and placeholder
#FFFFFFHero quote, CTA heading, logo and nav over the hero
#FFFFFF · 80%Footer paragraph
#FFFFFF · 50%Footer column titles
#FFFFFFAction
#FFFFFFWhite pill button on dark bands (BUY CREATIVO)
#333333Button on hover
Lines & effects
#888888Input text and placeholder
#000000 · 13%1px row dividers in the awards and milestones list
#1113142px underline that grows under nav links
#E7FBFCFooter links and their hover
#E7FBFC · 60%With inverse-link: Footer links and their hover
#DCF2F4Inline grey links in the footer
#FFFFFF1px footer top rule and vertical divider
Typography
Fleuron · display-hero · shown in Syncopate (fallback)
The quick brown fox jumpsHero quote. 93px · 400 · 1.0 · 2px
Fleuron · headline-lg · shown in Syncopate (fallback)
The quick brown fox jumpsStatements (CREATIVO PROVIDES THE PERFECT CANVAS…), section titles (PORTFOLIO at 700). 46px · 600 · 1.2
Fleuron · title-md · shown in Syncopate (fallback)
The quick brown fox jumpsService titles. 20px · 600 · 1.3
Fleuron · label-footer · shown in Syncopate (fallback)
The quick brown fox jumpsFooter links. 16px · 400 · 1.25
Inter · body
The quick brown fox jumpsParagraphs (16px at ≤479px). 18px · 500 · 1.2
Inter · caption
The quick brown fox jumpsProject meta: UI, UX, Development, 2024. 15px · 600 · 1.2
Spacing & shape
| Purpose | Value |
|---|---|
| Container | .container max 1200px, centred |
| Section padding | 100px top and bottom and 5% at the sides (72px at 1440px); sections that follow the hero use 150px on top |
| Breakpoints | 991px, 767px and 479px, plus min-width: 768px and min-width: 1440px sets |
Spacing scale
| Token | Value | Preview |
|---|---|---|
hair | 5px | |
sm | 16px | |
md | 30px | |
lg | 50px | |
xl | 70px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
nav-top | 60px | |
section | 100px | |
section-top | 150px | |
hero-top | 160px |
Border radius
Motion
| Nav text roll | Word moves y 0% → −105% while its copy moves up to 0%, 200ms ease |
| Nav underline | Width grows, 300ms ease to 500ms ease; 400ms outCubic on some |
| Logo shrink | Size change on scroll, 800ms outExpo |
| Header invert | Filter switches between normal and invert(), 300–500ms (400ms outCubic most often) as sections pass |
| Fade-in | opacity 0 → 1, 1000ms outQuart; one at 800ms ease |
| Fade-up | y 20px → 0, 300ms ease, with opacity 500ms |
| Parallax | y 100px ↔ −100px, 500ms, while scrolling in view |
| Hover preview | Scale 0.4 → 1, 400ms outCubic, following the mouse on blog links |
| CSS | Buttons 0.2s, footer links 0.3s |
Do’s and don’ts
- Use white canvas #FFFFFF with ink #111314 for content, and #111314 bands with white text for the hero, CTA and footer.
- Set headings in Fleuron uppercase at line height 1.0–1.2, and small text in Inter 600–700.
- Make the hero sticky so white sections slide over it, and drop one circular photo into the hero sentence.
- Use pill shapes only for buttons (30px) and inputs (100px); keep images square.
- Convert project photos and logos to greyscale.
- Use text links (MORE WORK) with a 2px #111314 underline that grows on hover for secondary actions.
- Add any accent colour, gradient or shadow.
- Use grey for body text on white; paragraphs are full #111314.
- Put the white pill (#FFFFFF) on a white section; on white use the dark pill.
- Set paragraphs in uppercase; p, project meta and award rows return to normal case.
- Use Fleuron for small UI text; below 20px use Inter.
- Use placeholder #888888 for anything but input placeholders, and keep inverse-ink-subtle (white at 50%) for 14px+ footer titles only.
Example prompt
Any page in the Creativo 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 Creativo 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/creativo.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