flowmanceFunto Design System
Funto is a calm, gallery-like template for architects and furniture designers. It alternates between black, image-filled moments (the hero, the menu, the footer) and long white sections where uppercase Quilon headlines sit over generous space, grey Inter paragraphs and big square-cornered photos of buildings and furniture. It is monochrome in the interface and lets the photography bring the colour.
Four signatures make it recognisable:
- Uppercase Quilon headlines. Headings are uppercase Quilon, mostly weight 500 (the footer line is 400): 94px in the hero, 60px for section titles (WE HELP AT ALL STAGES), 28px with 1px tracking for item titles (INTERIOR DESIGN, ARCHITECTURE).
- Outlined white pill on dark. The main button is a transparent pill with a 1px white border and small wide-tracked uppercase text (LET'S CONNECT). On hover it fills white and the text turns black.
- Circular text badges. A VIEW SHOWREEL ring of text around PLAY sits on the hero, and a 120px white circle with an uppercase word follows the cursor over projects.
- Black frame, white middle. The nav floats over a full-screen dark photo with a hairline under it, and the page ends in a full-height black footer that is revealed from behind the last section.
Colors
Surfaces
#FFFFFFContent sections
#F4F5F8Light grey declared in the variables, for a quiet panel when one is needed
#FFFFFFForm inputs (1px black border, black placeholder)
#000000Hero base, overlay menu, footer, cart panel
Ink
#000000Text on primary
#000000Headlines, item titles, LEARN MORE links, input borders
#6E6E6EParagraphs and list items (Inter)
#3A3A3ATestimonial quotes
#8A8A8APlan prices on the pricing page only (about 3.4:1, large text only)
#FFFFFFText and outlines over photos
#FFFFFFText on black; menu links use #F6F7F9
#FFFFFF · 80%Hero lead and footer links on black
#D6D1CA · 70%Footer column titles (a warm stone tint)
Action
#FFFFFFThe button's hover fill
#FFFFFFLines & effects
#0000001px input borders and blockquote rule
#FFFFFF · 20%The hairline under the nav
#FFFFFF · 30%The short divider between the cart and MENU
#FFFFFF · 11%Cart panel border and rules
Typography
Quilon · display-hero
The quick brown fox jumpsHero headline; the footer LET'S WORK TOGETHER uses weight 400. 94px · 500 · 0.9
Quilon · headline-lg
The quick brown fox jumpsSection titles: ABOUT FUNTO, WE HELP AT ALL STAGES, OUR PROJECT. 60px · 500 · 1.0
Quilon · title-lg
The quick brown fox jumpsService titles: INTERIOR DESIGN, PLANING. 28px · 500 · 1.07 · 1px
Inter · quote
The quick brown fox jumpsTestimonial text, max 87% wide. 22px · 400 · 1.2
Inter · body-lg
The quick brown fox jumpsHero lead on the photo, white at 80%. 22px · 400 · 1.36
Quilon · label-name
The quick brown fox jumpsTestimonial names, cart totals. 19px · 600 · 1.26 · 1px
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred; narrower containers at 1040px, 940px and 640px for text-heavy blocks |
| Section rhythm | 100px top and bottom (.section), 60px at ≤479; some sections close with 50px |
| Breakpoints | 991px (tablet), 767px (landscape phone) and 479px (phone), plus a min-width: 768px group |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 5px | |
sm | 16px | |
md | 25px | |
lg | 40px | |
xl | 60px | |
2xl | 100px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-short | 50px | |
column-gap | 60px | |
nav-height | 90px | |
section | 100px | |
footer-x | 170px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Fade-up on scroll | y 30px → 0px and opacity 0 → 1 over 500ms outExpo; some blocks opacity over 1000ms outQuart |
| Large rise | y 100px → 0 over 500ms for images entering |
| Button hover | transition: all .2s: background to white, text to black |
| Text and link colour | 200–300ms ease |
| Image hover | Filter change over 200–300ms ease; size change over 500ms outExpo |
| Cursor circle | Follows the pointer; scales 0.7 → 1 over 400ms swingTo |
| Showreel badge | Rotates; hover rotation over 400ms swingTo |
| Nav on scroll | Hides on scroll down, shows on scroll up (scroll up / down) |
| Menu link hover | Letter spacing opens to 5px over 200ms |
Do’s and don’ts
- Set every heading and label in uppercase Quilon; set every paragraph in Inter, sentence case.
- Use #6E6E6E for paragraphs on white and white at 80% for supporting text on black.
- Use the outlined pill (1px #FFFFFF border, 30px radius, padding 18px 31px) on dark areas and fill it white with black text on hover.
- Track small Quilon labels at 1–3px and leave big headlines at 0.
- Give photos square corners and let them run large or full-bleed.
- End pages with the full-height black footer revealed from behind the content.
- Add an accent colour; #F64D52 is declared but unused.
- Put a filled black or coloured button on the page at rest.
- Set Inter in uppercase or Quilon in sentence case.
- Round photos or cards; only buttons (pills) and badges (circles) are round.
- Add drop shadows or blur.
- Use ink-faint (#8A8A8A, about 3.4:1 on white) for anything but the 24px plan prices.
Example prompt
Any page in the Funto style
More design systems like this
Construction 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 Funto 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/funto.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