flowmanceMoka Design System
Moka is a warm, slightly playful agency site in deep midnight blue. Huge centred Satoshi headlines are softened by hand-drawn details: a light steel-blue pen scribble under one word in each headline, and loose doodles (a squiggle, a sparkle, a swoosh) floating in the margins. Everything else is calm: navy cards one step darker than the page, 3px-cornered buttons, white text at 70% for copy.
Four signatures make it recognisable:
- Scribble underlines. One word per headline (website, agency, metrics, with) gets a hand-drawn #9BBEE6 double-stroke underline.
- Blue on blue. The page is #15224B, cards are #121D41, the menu and cart are #0F1A3D and buttons are #202E5A. There is no white or light surface anywhere.
- Odometer metrics. 47, 9947+, 99%, 436+ in Satoshi 100px weight 400; each digit is a column that rolls into place over 2.5s, with a thin 55px + or % beside it.
- The circle menu button. The nav has only the Moka logo and an #202E5A circle (about 76px) holding a 2-line hamburger. The menu slides in from the right as a 600px panel.
Moka is dark-only.
Colors
Surfaces
#15224BPage, nav bar and footer (--midnight-blue)
#121D41Service cards, one step darker than the page
#0F1A3DMenu panel and cart (--midnight-blue-2)
#202E5AButtons, the menu circle, the close button (--midnight-blue-3)
Ink
#FFFFFFText on primary
#FFFFFFHeadlines, titles, buttons, metric numbers
#FFFFFF · 70%Paragraphs, card text, categories, field labels, placeholders
#FFFFFF · 60%Small paragraph links; menu links on hover
#FFFFFF · 57%Footer links
#FFFFFFAction
#202E5AThe filled button; on hover the fill becomes accent #9BBEE6 with white text
#9BBEE6#9BBEE6Scribble underlines, doodles, line icons, skill bar fill, button hover (--light-steel-blue)
#9BBEE6 · 40%Skill bar track
Lines & effects
#FFFFFF · 36%Menu section labels above the divider
#FFFFFF · 20%Footer divider, cart borders
#FFFFFF · 22%Menu divider
#FFFFFF · 30%Bottom rule of inputs and the subscribe field
Typography
Satoshi · display-hero
The quick brown fox jumpsBuild your website with Moka today. 130px · 500 · 0.95
Satoshi · headline-lg
The quick brown fox jumpsWe offer a variety of high-end services, Studio metrics (.title-2). 70px · 500 · 1.0
Satoshi · metric-affix
The quick brown fox jumps+ and % after metrics. 55px · 300 · 1.0
Satoshi · title-lg
The quick brown fox jumpsProject titles. 28px · 500 · 1.4
Satoshi · body-lg
The quick brown fox jumpsMetric labels (Team Member). 21px · 400 · 1.24
Satoshi · label
The quick brown fox jumpsButtons, skill labels. 17px · 500 · 1.18
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred |
| Breakpoints | 991px, 767px and 479px (Webflow defaults) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 15px | |
md | 16px | |
lg | 20px | |
xl | 30px | |
2xl | 50px | |
3xl | 60px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
section-side | 72px | |
section | 120px | |
nav | 120px | |
hero-top | 150px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Odometer metrics | Digit columns move y 0 → −400% / −700% / −900%, 2500ms, cubic-bezier(0.784, 0.325, 0.222, 0.98) |
| Headline reveal | Lines move y → 0% from below, 500ms, as they scroll into view |
| Fade-in | opacity 0 → 1, 300ms ease |
| Button hover | transition: all .3s: #202E5A → #9BBEE6 |
| Link hover | Text colour, 200ms ease; footer links transition: all .2s |
| Menu open | Panel x 100% → 0%, 300ms ease; hamburger lines rotate 400ms swingTo |
| Nav on scroll | Hides on scroll down, shows on scroll up |
| Circle button | scale 0 → 1, 500ms, over project images |
| Doodle drift | Small mouse-linked moves of ±7px and ±10px, 500ms |
| Skill bars | Fill width grows, 500ms ease |
Do’s and don’ts
- Use #15224B for the page and step surfaces in navy: #121D41 cards, #0F1A3D panels, #202E5A buttons.
- Centre big Satoshi 500 headlines (70–130px, line height 0.95–1.0) and underline one word with a #9BBEE6 scribble.
- Set copy in white at 70% (#FFFFFFB3), Satoshi 500 at 19px/26px.
- Use the #202E5A button with a 3px radius, padding 22px 30px, 64px tall, turning #9BBEE6 on hover over 300ms.
- Keep cards and photos square-cornered.
- Show numbers as odometers with a light + or % affix.
- Add white, grey or light surfaces, or drop shadows.
- Use #9BBEE6 for paragraphs or as a large fill area; it is for marks, icons and hover.
- Use Playfair Display or any second typeface.
- Round cards or use pill buttons; only the menu, close and CTA circles are round.
- Rely on the hover state's white-on-#9BBEE6 text for anything smaller than the 17px button label; it is low contrast, so keep hover labels at 17px weight 500 or larger and short.
- Scribble under more than one word per headline.
- Use menu-label (white at 36%) outside the 20px menu group labels; it is only 3.3:1 on #0F1A3D.
Example prompt
Any page in the Moka 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 Moka 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/moka.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