Muma Design System

Get DESIGN.md Download View template Works with

Muma is a bright, friendly UI-kit style agency template. It feels like a product launch page: a pale grey hero with big soft white blob shapes, a clean navy Roboto headline, and one tomato-red pill button with a white arrow circle. Colour comes in warm pops, tomato red and goldenrod yellow, as buttons, blurred blobs, zigzag strokes and thin diagonal lines.

The published preview opens on an intro page that presents each home version inside a MacBook and iPhone mockup, one after another down a long white page.

Four signatures make it recognisable:

The red pill with an arrow circle. Buttons are tomato #FC493E pills with a white circle holding a red → at the right end (Purchase Muma Now, Live Preview). Yellow #FFBF25 versions appear in the layouts.
Soft blob backgrounds. The hero band (#F5F5F7) is cut by large white organic shapes, and photos inside the layouts sit in blob masks.
Playful blurred decor. A goldenrod zigzag stroke, four thin parallel tomato diagonals, a blurred red triangle and a blurred yellow ring float around the hero and mockups.
Rotated version labels. Each showcase has a vertical label (Home Version 2) in pale grey #AEB6B8, rotated −90° on the left, between two 1px lines, and a 1px vertical line links one showcase to the next.

Muma is a light-only design.

Colors

Surfaces

canvas#FFFFFF

Page background

surface-1#F5F5F7

Hero band, page-link tiles, the footer

field#FFFFFF

field-line#DCE7E9

1px bottom border on inputs

Ink

on-primary#FFFFFF

Text on primary

on-secondary#FFFFFF

Text on secondary

ink#272B3A

The --black-2 variable: body colour, headlines, nav links

ink-title#212127

Tile titles (Portfolio v1)

ink-muted#818187

Dropdown links

ink-subtle#919197

Paragraphs (p is #919197 at 15px weight 500), the hero lead, the logo tagline, footer links, blockquotes

ink-faint#AEB6B8

Rotated Home Version N labels, only at 16px+

on-media#FFFFFF

Action

primary#FC493E

The --tomato variable: buttons, nav hover, nav underline, decor lines

primary-hover#FD6960

Button hover

secondary#FFBF25

The --goldenrod variable: secondary buttons in the layouts, zigzag and blurred ring decor

link-faint#B5B5BE

Small footer links

Lines & effects

line#D6DFE1

The --gainsboro variable: 1px vertical lines beside version labels

placeholder#999999

Input placeholder text

Typography

Roboto · display-hero

The quick brown fox jumps

Muma, your design toolkit. 58px · 400 · 1.03

Roboto · headline-lg

The quick brown fox jumps

Section titles (Very easy to edit and customize), the h2 default. 32px · 500 · 1.13

Roboto · title-md

The quick brown fox jumps

Card titles, the h4 default. 18px · 500 · 1.33

Roboto · eyebrow

The quick brown fox jumps

Rotated Home Version N labels. 16px · 500 · 1.88

Roboto · body-lg

The quick brown fox jumps

Hero lead in #919197. 18px · 400 · 1.56

Roboto · quote

The quick brown fox jumps

Blockquote with a 2px tomato left rule, padding 0 20px. 17px · 400 · 1.53

Spacing & shape

Purpose	Value
Container	max 1200px, centred, inside sections with 20px side padding
Section rhythm	150px top and bottom (.section; 100px at ≤479px); the long showcase section ends with 300px
Breakpoints	991px, 767px and 479px, plus a few min-width: 768px rules

Spacing scale

Token	Value	Preview
`hair`	1px
`xs`	5px
`sm`	10px
`md`	15px
`lg`	20px
`xl`	30px
`2xl`	80px

Layout spacing

Token	Value	Preview
`gutter`	20px
`footer`	80px
`nav`	100px
`section`	150px

Border radius

field15px

pill30px

tile50px

full9999px

Surfaces

How the surfaces stack, from the page background up. Hex codes and roles are in Colors above.

Level 1canvas

Level 2surface-1

Motion

Decor parallax	Shapes and mockups move y −300px to +400px while scrolling in view and on page scroll
Nav underline	1px tomato line grows from width 0%, 500ms
Nav link colour	transition: color .2s to #FC493E
Button hover	transition: all .3s, #FC493E → #FD6960
Hover pairs	Mouse-over / mouse-out pairs changing background and text colour over 500ms, some rotating 500ms
Reveal	y 100% → 0% at 500ms on a few elements; fades 0 → 1 at 500ms on page start

Do’s and don’ts

Use the tomato #FC493E pill with a white arrow circle for the main action, #FD6960 on hover.
Set headlines in Roboto, navy #272B3A, sentence case with a full stop.
Put the hero on #F5F5F7 with large white blob shapes.
Add warm decor: a #FFBF25 zigzag, thin tomato diagonals, blurred red and yellow shapes.
Show products inside device mockups, with a rotated grey version label at the left.
Keep sections at 150px vertical padding inside a 1200px container.
Use dark backgrounds or dark buttons; Muma is light-only.
Set #919197 (ink-subtle) text below 15px, or #AEB6B8 below 16px; they are the template's real greys but under 4.5:1.
Put button labels under 14px weight 500; white on #FC493E is 3.4:1.
Square off buttons or tiles; actions are pills (30px, 50px).
Use uppercase or letter spacing.
Lay colour over photos; keep colour beside them.
Use the goldenrod button (white on #FFBF25 is 1.65:1) for anything but short secondary labels at 14px weight 500, or set tomato and #818187 text below 14px.

Example prompt

Any page in the Muma style

Prompt

Build your page in the Muma style. White #FFFFFF page, hero band on #F5F5F7 with large soft white blob shapes. Use Roboto only: hero title 58px weight 400 in #272B3A, line height 1.03; section titles 32px weight 500; paragraphs 15px weight 500 in #919197 with a 26px line. The main button is a #FC493E pill (30px radius, 50px tall, padding 15px 56px 15px 25px) with white 14px weight 500 text and a white circle holding a red arrow at the right; hover #FD6960 over 0.3s. Secondary button the same in #FFBF25. Add a goldenrod zigzag stroke, four thin tomato diagonals and blurred red and yellow shapes as decor. Inputs are white, 15px radius, bottom border #DCE7E9 and a soft 14px 14px 50px -20px shadow. 1200px container, 150px section padding.

# Muma Design System

> Measured from the Muma template. Drop it into Claude,
> ChatGPT, Gemini, Cursor or v0.

## Overview

Muma is a bright, friendly UI-kit style agency template.
It feels like a product launch page: a pale grey hero
with big soft white blob shapes, a clean navy Roboto
headline, and one tomato-red pill button with a white
arrow circle. Colour comes in warm pops, tomato red and

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background          |
| surface-1    | #F5F5F7     | Hero band, page-link ti… |
| field        | #FFFFFF     |                          |
| field-line   | #DCE7E9     | 1px bottom border on in… |
| on-primary   | #FFFFFF     | Text on primary          |
| on-secondary | #FFFFFF     | Text on secondary        |
| ink          | #272B3A     | The --black-2 variable:… |
| ink-title    | #212127     | Tile titles (Portfolio … |
| ink-muted    | #818187     | Dropdown links           |
| ink-subtle   | #919197     | Paragraphs (p is #91919… |
| ink-faint    | #AEB6B8     | Rotated Home Version N … |
| on-media     | #FFFFFF     |                          |
| primary      | #FC493E     | The --tomato variable: … |
| primary-hov… | #FD6960     | Button hover             |

## Typography

- display-hero: Roboto 58px / 400
- headline-lg: Roboto 32px / 500
- headline-md: Roboto 24px / 500
- title-md: Roboto 18px / 500

{
  "$description": "Muma design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#FC493E",
      "$description": "The --tomato variable: buttons, nav hover, nav underline, decor lines"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#FD6960",
      "$description": "Button hover"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary"
    },
    "secondary": {
      "$type": "color",
      "$value": "#FFBF25",
      "$description": "The --goldenrod variable: secondary buttons in the layouts, zigzag and blurred ring decor"
    },
    "on-secondary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on secondary"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F5F5F7",
      "$description": "Hero band, page-link tiles, the footer"
    },
    "ink": {
      "$type": "color",
      "$value": "#272B3A",
      "$description": "The --black-2 variable: body colour, headlines, nav links"
    },
    "ink-title": {
      "$type": "color",
      "$value": "#212127",

/* Muma theme for Tailwind CSS v4, from its DESIGN.md (Flowmance).
 * Use it after Tailwind:  @import "tailwindcss";  @import "./theme.css";
 * Then use the utilities: bg-canvas, text-ink, text-headline-lg, rounded-field, p-lg */

@theme {
  /* Colors */
  --color-primary: #FC493E;
  --color-primary-hover: #FD6960;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FFBF25;
  --color-on-secondary: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F5F5F7;
  --color-ink: #272B3A;
  --color-ink-title: #212127;
  --color-ink-muted: #818187;
  --color-ink-subtle: #919197;
  --color-ink-faint: #AEB6B8;
  --color-link-faint: #B5B5BE;
  --color-line: #D6DFE1;
  --color-field: #FFFFFF;
  --color-field-line: #DCE7E9;
  --color-placeholder: #999999;
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-sans: "Roboto", sans-serif;
  --font-roboto: "Roboto", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 58px;
  --text-display-hero--line-height: 1.03;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 400;
  --text-headline-lg: 32px;
  --text-headline-lg--line-height: 1.13;
  --text-headline-lg--letter-spacing: 0px;
  --text-headline-lg--font-weight: 500;
  --text-headline-md: 24px;
  --text-headline-md--line-height: 1.25;
  --text-headline-md--letter-spacing: 0px;
  --text-headline-md--font-weight: 500;
  --text-title-md: 18px;
  --text-title-md--line-height: 1.33;
  --text-title-md--letter-spacing: 0px;
  --text-title-md--font-weight: 500;

/* Muma design tokens as plain CSS custom properties, from its DESIGN.md (Flowmance).
 * Paste into any stylesheet and use them anywhere: color: var(--color-ink); border-radius: var(--radius-md); */

:root {
  /* Colors */
  --color-primary: #FC493E; /* The --tomato variable: buttons, nav hover, nav underline, decor lines */
  --color-primary-hover: #FD6960; /* Button hover */
  --color-on-primary: #FFFFFF; /* Text on primary */
  --color-secondary: #FFBF25; /* The --goldenrod variable: secondary buttons in the layouts, zigzag and blurred ring decor */
  --color-on-secondary: #FFFFFF; /* Text on secondary */
  --color-canvas: #FFFFFF; /* Page background */
  --color-surface-1: #F5F5F7; /* Hero band, page-link tiles, the footer */
  --color-ink: #272B3A; /* The --black-2 variable: body colour, headlines, nav links */
  --color-ink-title: #212127; /* Tile titles (Portfolio v1) */
  --color-ink-muted: #818187; /* Dropdown links */
  --color-ink-subtle: #919197; /* Paragraphs (p is #919197 at 15px weight 500), the hero lead, the logo tagline, footer links, blockquotes */
  --color-ink-faint: #AEB6B8; /* Rotated Home Version N labels, only at 16px+ */
  --color-link-faint: #B5B5BE; /* Small footer links */
  --color-line: #D6DFE1; /* The --gainsboro variable: 1px vertical lines beside version labels */
  --color-field: #FFFFFF;
  --color-field-line: #DCE7E9; /* 1px bottom border on inputs */
  --color-placeholder: #999999; /* Input placeholder text */
  --color-on-media: #FFFFFF;

  /* Fonts */
  --font-roboto: "Roboto", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 58px;
  --text-display-hero-font: var(--font-roboto);
  --text-display-hero-weight: 400;
  --text-display-hero-line-height: 1.03;
  --text-display-hero-tracking: 0px;
  --text-headline-lg: 32px;
  --text-headline-lg-font: var(--font-roboto);
  --text-headline-lg-weight: 500;
  --text-headline-lg-line-height: 1.13;
  --text-headline-lg-tracking: 0px;
  --text-headline-md: 24px;
  --text-headline-md-font: var(--font-roboto);
  --text-headline-md-weight: 500;
  --text-headline-md-line-height: 1.25;
  --text-headline-md-tracking: 0px;
  --text-title-md: 18px;
  --text-title-md-font: var(--font-roboto);
  --text-title-md-weight: 500;

Unlock the full design systemSee plansIncluded with any plan that has this template’s platformUpgrade to All AccessAlready a member? Log inOr add this template’s platform to your plan

Download DESIGN.md

More design systems like this

Agency design systems, the same colors first.

Browse all 398

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 Access Upgrade to All Access

Colors

Surfaces

Ink

Action

Lines & effects

Typography

Roboto · display-hero

Roboto · headline-lg

Roboto · title-md

Roboto · eyebrow

Roboto · body-lg

Roboto · quote

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Muma style

More design systems like this

BigStudio

Bogota

Brün

Creativë

Bring any of them to your AI tool