flowmanceMunio Design System
Munio is a dark, calm startup and template-showcase site. It feels like a product launch page for a design toolkit: a near-black green canvas, white bold Cabin headlines, quiet white-70% copy, and medium turquoise #6AC2B5 tiles that frame screenshots of the template's own pages. The home page is a demo index: a hero, three feature cards, then grids of page previews (Landing Pages, CMS Pages, Inner Pages).
Three signatures make it recognisable:
- Turquoise showcase tiles. Each page preview sits on a #6AC2B5 tile (5px radius, padding 45px 45px 15px) as a dark screenshot with a 3px radius and a soft 0 0 24px black-30% shadow, with its name in 23px white Cabin centred underneath.
- Stepped teal cards. The three feature cards under the hero darken left to right: #6AC2B5, #50A79A, #328B7E, each with a hairline rule and 20px white text.
- Dark-on-darker structure. The sticky nav and the hero band are #223133 over a #161D1E page, and every section ends with a 1px white-10% rule. A vertical Go Top label with a thin progress line sits in the bottom-right corner.
Munio is dark-only.
Colors
Surfaces
#161D1EPage background (--black-2), sections, footer
#223133Sticky nav bar, the hero band, dropdowns, cart panel (--dark-slate-grey)
#FFFFFFForm inputs
#333333Text on field
#999999Placeholder text on field
Ink
#FFFFFFText on primary
#FFFFFF#FFFFFFHeadlines, nav, links, button labels
#FFFFFF · 70%Paragraphs and the hero sub line
#919196List items (li) in long-form pages
#FFFFFFAction
#6AC2B5Buttons, showcase tiles, the first feature card, We're hiring! badge (--medium-turquoise)
#6AC2B5#161D1EThe dark .button used on turquoise backgrounds
#1F2829With secondary: The dark .button used on turquoise backgrounds
#9FE7DF2px nav underline and the Go Top progress line (--pale-turquoise)
Lines & effects
#50A79ASecond and third feature cards
#328B7ESecond and third feature cards
#FFFFFF · 10%Section bottom borders, nav border, cart borders
#FFFFFF · 30%Hairline rules inside feature cards
#FFFFFF · 18%2px left border of blockquotes
Typography
Cabin · display-hero
The quick brown fox jumpsMeet Munio, your design toolkit. 70px · 700 · 0.93
Cabin · headline-section
The quick brown fox jumpsLanding Pages, CMS Pages, Inner Pages (h3). 50px · 700 · 1.0
Cabin · logo
The quick brown fox jumpsMunio wordmark (.logo-text). 33px · 700 · 1.09
Cabin · quote
The quick brown fox jumpsBlockquotes on inner pages (30px at ≤479px). 32px · 500 · 1.0
Cabin · body-xl
The quick brown fox jumpsHero sub line (.sub-text) in ink-muted. 24px · 500 · 1.25
Cabin · title-card
The quick brown fox jumpsShowcase tile names: Landing I, Customers Page (22 uses). 23px · 600 · 1.17
Spacing & shape
| Purpose | Value |
|---|---|
| Container | max 1200px, centred (.container, z-index 2) |
| Section rhythm | .section is 100px top and bottom with 5% sides (72px at 1440), and a 1px white-10% bottom border; 80px top and bottom at ≤991, then 60px 3% at ≤479 |
| Breakpoints | 991px, 767px and 479px (479px has the most rules: 140) |
Spacing scale
| Token | Value | Preview |
|---|---|---|
xs | 6px | |
sm | 7px | |
md | 16px | |
lg | 20px | |
xl | 30px | |
2xl | 45px | |
3xl | 55px |
Layout spacing
| Token | Value | Preview |
|---|---|---|
grid-gap | 30px | |
section-sm | 60px | |
section-side | 72px | |
nav-height | 77px | |
section | 100px |
Border radius
Surfaces
How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.
Motion
| Nav underline | 2px #9FE7DF line grows in width, 300ms ease; text colour 300ms ease |
| Dropdown | Caret rotates 200–300ms ease; panel fades opacity 0 → 1, 300ms ease, and moves y 6px → 0 |
| Load fade | opacity 0 → 1, 1000ms outQuart |
| Scroll progress | The Go Top track fills with page scroll |
| Mobile menu | Opens on menu open; lines resize 400ms outCubic, border 200ms outSine |
| Links and buttons | Footer links opacity 1 → 0.6, 200ms; small links 0.7 → 1, 300ms; buttons transition: all 0.2s |
Do’s and don’ts
- Use #161D1E for the page, #223133 for the sticky nav, the hero band and dropdowns, and close sections with a 1px white-10% rule.
- Set headings in Cabin 700, white, sentence case, no tracking.
- Set paragraphs in Cabin 16px / 500, white at 70%.
- Use #6AC2B5 for buttons (2px radius, 19px 32px padding) and showcase tiles (5px radius).
- Grade a row of three cards #6AC2B5 → #50A79A → #328B7E.
- Give screenshots a 3px radius and the even 0 0 24px 30% black shadow.
- Put white text under 16px bold on #6AC2B5; it is about 2.1:1, so keep labels 16px / 700 or body at 20px+.
- Use turquoise for text or links on the dark canvas.
- Round anything beyond 5px or use pills.
- Add uppercase, letter-spacing or weights under 500.
- Add a second typeface; the declared Tuesday Night and Butler faces are unused.
- Use light sections; Munio stays dark.
- Put ink-subtle #919196 list text on the #223133 nav or dropdowns; it is about 4.3:1 there. Keep it on the canvas.
Example prompt
Any page in the Munio 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 Munio 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/munio.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