flowmanceKaka Design System
Kaka is a dark, product-launch style site for a startup or small agency. The page is pure black with white Inter 600 headlines, and every headline swaps one word for a big handwritten Caveat word (websites, amazing, website). Controls are soft: translucent grey pills and circles, one white pill, and thin grey hairlines. The home page is a presentation grid of page previews, so the template reads like a showcase.
Four signatures make it recognisable:
- One handwritten word per headline. Inter 600 runs the line and a single Caveat 400 word, larger than the Inter around it, breaks in: Create stunning *websites* now with Kaka., Let's build something *amazing* together.
- Two pills side by side. A translucent grey pill (#81818B at 20%) next to a solid white pill, both 50px tall with a 23px radius: Purchase Kaka and View on Webflow.
- The light switch. Turn on the lights! with a 35px half-moon circle in the nav flips the whole page to white with black text (logo, icons and buttons are inverted with filter: invert(1)), and back with Turn off the lights!.
- A blue custom cursor. Links hide the system cursor; a ring of about 24px with a 2px #4253FF border and a blue dot of about 4px follows the mouse.
Colors
Surfaces
#000000Page background (--black-3)
#161616The expanding menu circle, social overlay
#FFFFFFThe page after Turn on the lights!
Ink
#061012Text on primary
#FFFFFF#FFFFFFHeadlines, nav text, tile captions
#FFFFFF · 70%Paragraphs, the hero sub-line, footer address
#6E6E6EFooter links and form text
#FFFFFF · 51%Caveat menu numbers 01.–05
#000000Text on inverse-canvas
#FFFFFFAction
#FFFFFFThe white pill (View on Webflow)
#FFFFFF#81818B · 20%Grey glass pills and 35px icon circles
#81818B · 30%Hover fill of those pills and circles
#4253FFThe custom cursor ring and dot only
#FF0E0ECart remove dot
Lines & effects
#81818B · 20%1px borders between presentation tiles
#81818B · 30%A single stronger hairline
#2C2C2CCart panel border and footer rule
Typography
Inter · display-hero
The quick brown fox jumpsHero headline: Create stunning websites now with Kaka. 70px · 600 · 0.9
Inter · headline-lg
The quick brown fox jumpsFooter statement: Let's build something amazing together. 56px · 600 · 1
Inter · title-lg
The quick brown fox jumpsQuote headline: "Build a full website in 1 hour or less with zero coding needed". 28px · 600 · 1.21
Inter · body-lead
The quick brown fox jumpsHero sub-line in white 70%. 24px · 300 · 1.17
Inter · label-lg
The quick brown fox jumpsTile captions: Home #1, Work Page. 17px · 500 · 1.18
Inter · micro
The quick brown fox jumpsBody default. 14px · 400 · 1.43
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Section rhythm | 120px top and bottom (.section; 80px at ≤991, 60px at ≤479), 100px for the presentation band |
| Breakpoints | 991px, 767px and 479px (Webflow defaults), plus a min-width: 768px step |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 16px | |
md | 20px | |
lg | 40px | |
xl | 60px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
nav-y | 15px | |
nav-x | 20px | |
tile | 26px | |
nav-height | 80px | |
section-tiles | 100px | |
section | 120px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Skewed rise | Text and tiles start at y 20%, skew x 30°, opacity 0, and settle to y 0%, skew 0°, opacity 1, 400ms outCubic |
| Fade | opacity 0 → 1, 300ms easeIn or 500ms ease; images 1000ms outQuart |
| Scale settle | scale 1.3 → 1, 500ms |
| Light switch | Body background and text colour change, 300–500ms ease; logo, icons and pills switch filter: invert, 500ms ease |
| Menu open | The #161616 circle grows, 400ms outCubic; links fade in |
| Cursor | The ring follows the mouse |
| Hover | Pills 300ms fill change; tiles opacity 0.8 over 300ms; links 200ms colour |
Do’s and don’ts
- Keep the page pure black #000000 with white Inter 600 headlines at line height 0.9–1.0.
- Swap exactly one word per headline for Caveat 400 at about 1.3× the Inter size.
- Pair a grey glass pill (#81818B at 20%, 30% on hover) with a white pill (#FFFFFF, #061012 text), both 50px tall with a 23px radius.
- Set paragraphs in white 70% (#FFFFFFB3), 18px / 400 / 1.33.
- Frame previews and grid cells with 1px #81818B-at-20% hairlines, square corners, no gap.
- Offer the light switch: white page, black text, inverted icons.
- Add brand colours to the UI. Blue #4253FF is for the cursor only.
- Use Caveat for whole sentences or for body text.
- Add shadows, gradients or rounded images.
- Use #6E6E6E (ink-subtle) for body copy. It is about 4:1 on black; keep it for 17px+ footer links and form text.
- Make the white pill the only button; it always sits beside a grey pill.
- Use uppercase or letter spacing.
Example prompt
Any page in the Kaka 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 Kaka 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/kaka.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