flowmanceMoyo Design System
Moyo is a friendly, tidy agency and studio template. The page is white, but almost nothing sits on the white directly: nearly every section is a large rounded panel (20px radius) in a pale tint (ghost white, warm snow, violet, near-black; one .white-section panel is plain white), separated by 50px white gaps, so the page reads like a stack of soft cards. Type is bold Inter in black, colour comes from a violet main button with green and orange siblings, and photography is warm and human.
Four signatures make it recognisable:
- Inset rounded section panels. Each section is a 20px-radius block inset about 30px from the viewport edges and stacked with 50px gaps. The hero uses a 15px radius in warm snow #F8F4F2; content sections alternate #FAFAFF and #F8F4F2, with a violet #5340FF band and a near-black #12141D band.
- The orange hand-drawn underline. One word in a headline gets a loose orange (#FF4F11) brush stroke under it: sparkling, projects, newsletter.
- Three coloured buttons, one shape. Square-ish 4px buttons, 50px tall, in violet (main), green #60CC96 (Enquire Us) and orange #FF4F11 (Follow Us), all with white 16px semibold labels.
- Staggered project cards. Work cards sit in two columns offset vertically (the right column starts about 260px lower), each a photo on top of a white caption strip with a faint shadow.
Colors
Surfaces
#FFFFFFPage background, visible as the 30px frame and 50px gaps around panels
#FAFAFFDefault section panel (.section, ghost white): services, projects
#F8F4F2Warm "snow" panel: hero, testimonials, newsletter, blog, the scrolled nav bar
#F0EAE8Cards on a snow panel: testimonial and team cards, blockquotes
#FFFFFF#D3D3D3Bottom rule of the inline underline input
#12141DDark statistics band and the footer
Ink
#FFFFFF#FFFFFF#FFFFFF#000000Headlines and nav links
#12141DCard and blog titles, small display-3 headings
#444444Lead lines under titles (24px), field text
#666666Body paragraphs, categories, testimonial names and quotes
#FFFFFFText on inverse-canvas
#FFFFFF · 70%Copyright line and "trusted by" text on dark and violet bands
#FFFFFFAction
#5340FFMain buttons, go-top button, Instagram icon tiles, the brand band
#1800F3With primary: Main buttons, go-top button, Instagram icon tiles, the brand band
#60CC96The green Enquire Us button and the checked checkbox
#7DDBACWith secondary: The green Enquire Us button and the checked checkbox
#FF4F11Headline underline stroke, rating stars, stat blocks, the Follow Us button, blockquote text
#FC6834With accent: Headline underline stroke, rating stars, stat blocks, the Follow Us button, blockquote text
Lines & effects
#29335C · 12%Checkbox and card borders / subscribe input border
#29335C · 15%With line: Checkbox and card borders / subscribe input border
#B5B5B5The 1px vertical rule between the logo and the nav links
Typography
Inter · display-hero
The quick brown fox jumpsHero H1 Create great, sparkling Webflow sites. 70px · 600 · 0.93
Inter · headline-lg
The quick brown fox jumpsSection titles (.display-2): Amazing projects, Testimonials. 50px · 700 · 1.0
Inter · title-md
The quick brown fox jumpsService, project and blog card titles. 22px · 600 · 1.14
Inter · body-lg
The quick brown fox jumpsLead line under a title, in ink-lead: The best design team in NYC. 24px · 400 · 1.33
Inter · label
The quick brown fox jumpsButtons and dropdown links. 16px · 600 · 1.25
Inter · caption
The quick brown fox jumpsCopyright and footer meta. 14px · 500 · 1.43
Spacing & shape
| Purpose | Value |
|---|---|
| Container | 1130px max, centred |
| Breakpoints | 991px, 767px and 479px |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 10px | |
sm | 15px | |
md | 20px | |
lg | 30px | |
xl | 40px | |
2xl | 60px | |
3xl | 80px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
page-inset | 30px | |
grid-gap | 30px | |
section-gap | 50px | |
section | 60px | |
section-inline | 69px | |
hero-top | 105px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Button and link hover | CSS transition: all .3s; background colour swap only |
| Nav link hover | Opacity 1 → 0.6, 200ms |
| Image hover (blog) | Opacity 1 → 0.7, 300ms |
| Scroll-into-view reveal | Opacity 0 → 1 and move to y 0, x 0, 1000ms outQuart |
| Small hover nudges | Move y ±6px or y 20px → 0, 300ms ease |
| Dropdown caret | Rotate, 200–300ms ease |
| Nav on scroll | Page-scroll up and down triggers; background colour change over 500ms |
| Width reveal | Size 300–500ms (ease), used for growing lines and panels |
Do’s and don’ts
- Put sections on rounded panels: 20px radius, 60px 5% padding, #FAFAFF or #F8F4F2, with 50px of white between panels.
- Use #5340FF for the main action and darken it to #1800F3 on hover.
- Underline one key word per major headline with the orange #FF4F11 brush stroke.
- Set titles in Inter 700 at 50px with a #444 24px lead below, centred.
- Put cards one step darker than their panel: #F0EAE8 on #F8F4F2, white on #FAFAFF.
- Keep button text white at 16px weight 600 on the green #60CC96 and orange #FF4F11 buttons; at that size and weight they read, but they are below 4.5:1, so never shrink the label.
- Place content straight on the white canvas or run panels edge to edge on desktop.
- Use more than one green and one orange button per page, or make either the only action.
- Add heavy shadows; the only shadow is 0 15px 25px at 3% black.
- Round buttons into pills. Buttons are 4px; only panels get 15–20px.
- Use orange for body text or links (it is reserved for marks and stats).
- Introduce a second typeface or negative tracking.
Example prompt
Any page in the Moyo 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 Moyo 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/moyo.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