flowmanceKliko Design System
Kliko is a bold, playful startup and SaaS template. It feels like a developer tool with a magazine's manners: headlines in a heavy monospaced face (League Mono 700), paragraphs in an old-style book serif (Fanwood Text), a saturated violet-purple hero and footer, and flat, square-cornered coral buttons. Everything else is white with thin grey borders.
The published preview opens on an intro page (Unleash the true power of Webflow with Kliko, thumbnails of every home and inner page). The template's own pages live under /homes/ and /pages/; their thumbnails show the same system.
Four signatures make it recognisable:
- Mono headlines, serif body. League Mono 700 for every title and label (nav links 600); Fanwood Text 400 for every paragraph and input. The contrast is the brand.
- Purple bands. #511DA5 fills the hero, the footer and some inner-page heroes, with white text and a 1px white-9% rule under the nav.
- Square coral buttons. #F64D52 rectangles with zero radius and small uppercase mono labels with 1px tracking (PURCHASE NOW, VIEW LAYOUTS).
- Spaced uppercase eyebrows. 13px mono with 2px tracking above every title: DON'T LIMIT YOURSELF, PERFECT TO GET STARTED, 100+ READY COMPONENTS, in purple, coral or white at 60% depending on the band.
Colors
Surfaces
#FFFFFFPage background, nav on inner pages, thumbnails
#F7EFEEPale pink feature band under the hero, sign-in pages, contact hero (--snow)
#FFFFFF#212127The dark Copy/Paste components band
Ink
#FFFFFFText on primary
#FFFFFFText on secondary
#000000Headlines, nav, labels
#000000Paragraphs: body copy is in full ink (p { color: #000 }), the serif face does the softening
#111111 · 61%Dropdown menu links (go to #111111 on hover)
#888888Nav-link hover colour
#FFFFFF · 60%Eyebrows on the purple band (.uppercase-title)
#FFFFFFText on inverse-canvas
#FFFFFFAction
#F64D52Main buttons (--indian-red); hover #FD6B70
#FD6B70#511DA5Hero and footer bands, purple buttons, purple eyebrows on white (--663399)
#461890Darker purple panels (three on the intro page)
#F64D52Line icons in the feature band, eyebrows on the dark band
Lines & effects
#EDEDED1px borders on thumbnails, inputs, the nav's bottom edge, feature-column dividers
#FFFFFF · 50%1px outlines of the component buttons on the dark band
#E4EDEF · 10%Footer top border and divider
Typography
League Mono · display-hero · shown in Space Mono (fallback)
The quick brown fox jumpsHero title, centred, three lines. 59px · 700 · 1.02
League Mono · headline-lg · shown in Space Mono (fallback)
The quick brown fox jumpsCTA title (.cta-title, 80% width). 44px · 700 · 1.25
League Mono · logo · shown in Space Mono (fallback)
The quick brown fox jumpsKLIKO wordmark. 29px · 700 · 1.52 · 2px
League Mono · title-lg · shown in Space Mono (fallback)
The quick brown fox jumpsFeature titles (6 Ready Homes, Dedicated Support). 19px · 700 · 1.37
League Mono · label-nav · shown in Space Mono (fallback)
The quick brown fox jumpsNav links with dropdown carets. 17px · 600 · 1.0
Fanwood Text · body-lg
The quick brown fox jumpsParagraphs (p), hero lead. 21px · 400 · 1.43
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 100px top and bottom, 60px at ≤767px; the feature band uses 60px; the CTA section 70px |
| Breakpoints | 991px, 767px and 479px (max-width), plus a min-width step at 768px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 20px | |
lg | 30px | |
xl | 40px | |
2xl | 50px | |
3xl | 60px | |
4xl | 80px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
column-gap | 30px | |
section-band | 60px | |
section-cta | 70px | |
section | 100px | |
column-gap-wide | 100px | |
hero-top | 153px | |
hero-bottom | 172px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Load and scroll fade | opacity 0 → 1, 1000ms outQuart |
| Hamburger to close | Lines rotate and move y 8px / y −6px, 400ms swingTo |
| Dropdown open | Caret rotates 200ms easeInOut; list fades opacity 0 → 1 200ms easeInOut and moves to y 0 |
| Scroll parallax | Elements move y ±100px while in view, 500ms |
| Scale | scale to 0.5 / 0.7, 300ms easeInOut to 500ms; back to 1 in 400ms swingTo |
| Width growth | 400ms outCubic / swingTo |
| Hovers | Nav opacity .2s; buttons and links all .2s–.3s |
Do’s and don’ts
- Set every title, label and button in League Mono 700 and every paragraph in Fanwood Text 400.
- Use #511DA5 for the hero and footer bands with white text, and white #FFFFFF for content sections.
- Keep all corners square: buttons, inputs, cards and images use 0 radius.
- Put a spaced uppercase eyebrow (13px, 2px tracking) above every section title.
- Use 1px #EDEDED borders to frame thumbnails and fields instead of shadows.
- Use coral line icons on the pale #F7EFEE band.
- Use the coral primary for small text: white on #F64D52 is about 3.4:1 (2.8:1 on the #FD6B70 hover). Keep button labels 12px+ bold uppercase mono, and keep coral text to 13px+ bold eyebrows.
- Round buttons or add shadows; the system is flat and rectangular.
- Set paragraphs in League Mono or headings in Fanwood Text.
- Use grey for paragraph text on white; body copy is #000000, and #888888 (about 3.5:1) is only the nav hover.
- Introduce the unused variables (#2E856E, #E14817, #083232) as UI colours.
- Use Linden Hill; it is declared but not loaded.
Example prompt
Any page in the Kliko style
More design systems like this
SaaS 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 Kliko 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/kliko.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