Muty Design System

Get DESIGN.md Download View template Works with

Muty is a cheerful, early-SaaS-style UI kit for agencies and startups. The intro page opens on a full-width violet-to-blue gradient with a big white Source Sans Pro headline, then drops onto a pale lavender-grey band where the five home layouts are shown as framed screenshots, and ends on a dark graphite call-to-action band. Every section starts with a small letter-spaced uppercase eyebrow with a thin underline, then a 39px headline and a centred grey Roboto paragraph.

Four signatures make it recognisable:

The violet gradient. linear-gradient(225deg, #BF40FB, #3452FF) fills the hero, and the same two colours (at 45° or 49°) fill buttons on hover. Violet #6540FB is the solid brand colour between them.
Underlined eyebrows. POWERFUL UI KIT TEMPLATE, PURCHASE MUTY NOW!, HOME VERSION 1: 15px weight 600 uppercase with 2px tracking, sitting on a 1px rule of the same colour (violet on light, grey for the layout labels, white 40% on the gradient) with 5px between text and rule.
Outlined buttons. Buttons have no fill at rest: a 2px inset outline in violet (or white on dark) with a 5px radius. On hover the outline disappears and the gradient fills in, with white text.
Two typefaces with clear jobs. Source Sans Pro (600) for headings, nav and labels; Roboto 400 for paragraphs, grey #919197 on light bands (white on the dark CTA band).

Muty is a light design with a gradient hero and a dark CTA band.

Colors

Surfaces

canvas#FFFFFF

Body and default .section background, footer, dropdowns

surface-1#FFFFFF

Framed layout previews and cards, which sit on the lavender band

surface-band#F1F1F7

The pale lavender-grey band (section dark-gray) behind the layout previews

inverse-canvas#414147

CTA band, with a 45° gradient from #313137 to #616167 and a photo

Ink

on-primary#6540FB

Text on primary

on-primary-hover#FFFFFF

Text on primary-hover

ink#121217

Headlines and footer titles

ink-body#333333

Base body colour for unstyled text

ink-muted#919197

Paragraphs (p: Roboto 16px), input text and placeholders

ink-subtle#999999

HOME VERSION 1–5 labels

ink-dropdown#818187

Dropdown links

ink-label#AAAAAA

Uppercase form field labels

on-accent#FFFFFF

inverse-ink#FFFFFF

Text on the gradient and the dark band

on-media#FFFFFF

Text on media

on-media-muted#FFFFFF · 72%

Ready templates for: note in the hero

on-media-faint#FFFFFF · 60%

Secondary text on dark

Action

primary#FFFFFF

Muty has no filled buttons: the main button is transparent on white with violet text and a 2px violet inset outline

primary-hover#3452FF

Hover fill is the gradient 49deg, #BF40FB → #3452FF with white text; #3452FF is its end colour

accent#6540FB

Eyebrows and their rule, outline buttons, blockquotes, submit text (--blue-violet)

Lines & effects

line#E1E1E1

1px bottom border of form fields

gradient-start#BF40FB

Hero gradient (225°) and the hover fill (--medium-orchid, --royal-blue)

gradient-end#3452FF

Hero gradient (225°) and the hover fill (--medium-orchid, --royal-blue)

inverse-gradient-start#313137

inverse-gradient-end#616167

line-on-media#FFFFFF · 40%

The rule under the hero eyebrow

nav-line#FFFFFF · 15%

1px bottom border of the transparent header

shadow#000000 · 15%

Preview card shadow

Typography

Source Sans Pro · display-hero

The quick brown fox jumps

Meet Muty, your design toolkit. 60px · 600 · 1.0

Source Sans Pro · headline-lg

The quick brown fox jumps

5 Home Page Layouts, Build your website with style! (h2). 39px · 600 · 1.03

Source Sans Pro · title-md

The quick brown fox jumps

Footer titles; search overlay input (20px). 20px · 600 · 1.5

Source Sans Pro · eyebrow-hero

The quick brown fox jumps

REFINED AND PROFESSIONAL UI KIT TEMPLATE on the gradient. 18px · 400 · 1.44 · 1px

Source Sans Pro · label-nav

The quick brown fox jumps

Intro, Home, Pages, Portfolio, Services, About, Blog. 17px · 600 · 1.18

Roboto · body

The quick brown fox jumps

Paragraphs. 16px · 400 · 1.63

Spacing & shape

Purpose	Value
Container	.container-fluid is max 1200px, centred
Section rhythm	.section is 120px top and bottom with 15px sides
Breakpoints	991px, 767px and 479px (Webflow defaults), plus some min-width: 768px rules

Spacing scale

Token	Value	Preview
`xs`	5px
`sm`	10px
`md`	20px
`lg`	30px
`xl`	70px

Layout spacing

Token	Value	Preview
`section-x`	15px
`nav-y`	15px
`nav-x`	20px
`footer-bottom`	25px
`footer-top`	70px
`section`	120px

Border radius

xs3px

sm5px

Motion

Button hover	Gradient fill, white text, outline off; 300ms (transition: all .3s)
Dropdown open	Size 400ms outCubic, border 200ms outSine
Overlays (search, menu)	Opacity 0 ↔ 1, 400ms ease; panel y −100% ↔ 0%, 400–500ms
Image hover	scale 1 → 1.1, 400–500ms ease

Do’s and don’ts

Open every section with the underlined 15px uppercase eyebrow (2px tracking), a 39px weight 600 headline and a grey #919197 Roboto paragraph, all centred.
Use the #BF40FB → #3452FF gradient for the hero and for button hovers, always on a diagonal.
Keep buttons as 2px inset outlines with a 5px radius at rest, filled with the gradient only on hover.
Use Source Sans Pro 600 for headings, nav and labels and Roboto 400 for paragraphs.
Put layout previews and cards on the #F1F1F7 band as white frames with the 0 10px 12px -7px 15% shadow.
Keep inputs borderless except for a 1px #E1E1E1 bottom line, with italic text.
Set #919197 paragraphs below 16px, or long copy on the #F1F1F7 band: it is about 3.1:1 on white and 2.8:1 on the band. The template uses it at 16px / 26px only.
Use #999999 labels or #AAAAAA field labels below 14px; they are under 3:1 on white. Keep them uppercase with 2px tracking and weight 600, and keep #818187 dropdown links (about 3.9:1) at 15px weight 600.
Put white button text on the #BF40FB end of the gradient alone (about 3.9:1); keep the full gradient so the #3452FF end carries contrast, at 16px weight 600.
Fill buttons at rest or use a radius above 5px.
Use the extra Webflow colours (pink, yellow, crimson, green) for text, headings or wide bands.
Use Roboto Slab, or set headlines in Roboto.

Example prompt

Any page in the Muty style

Prompt

Build your page in the Muty style. White #FFFFFF page with a pale #F1F1F7 band for card sections. Hero: full-width linear-gradient(225deg, #BF40FB, #3452FF), a transparent header with a 1px white-15% bottom border and white 17px weight 600 Source Sans Pro links, a centred uppercase 18px eyebrow with 1px tracking on a white-40% underline, and a 60px weight 600 white headline with line height 1.0. Every section: 120px vertical padding, 1200px container, centred 15px weight 600 uppercase eyebrow with 2px tracking in #6540FB on a 1px #6540FB underline, a 39px weight 600 headline in #121217, then a Roboto 16px / 26px paragraph in #919197, with 70px below the group. Buttons: transparent, #6540FB 16px weight 600 text, inset 0 0 0 2px #6540FB outline, 5px radius, 14px × 30px padding; on hover fill with linear-gradient(49deg, #BF40FB, #3452FF), white text, no outline, 300ms. Cards: white, 3px radius, shadow 0 10px 12px -7px rgba(0,0,0,0.15). Closing CTA band: linear-gradient(45deg, #313137, #616167) with white text and a white outline button.

# Muty Design System

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

## Overview

Muty is a cheerful, early-SaaS-style UI kit for agencies
and startups. The intro page opens on a full-width
violet-to-blue gradient with a big white Source Sans Pro
headline, then drops onto a pale lavender-grey band
where the five home layouts are shown as framed

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Body and default .secti… |
| surface-1    | #FFFFFF     | Framed layout previews … |
| surface-band | #F1F1F7     | The pale lavender-grey … |
| inverse-can… | #414147     | CTA band, with a 45° gr… |
| on-primary   | #6540FB     | Text on primary          |
| on-primary-… | #FFFFFF     | Text on primary-hover    |
| ink          | #121217     | Headlines and footer ti… |
| ink-body     | #333333     | Base body colour for un… |
| ink-muted    | #919197     | Paragraphs (p: Roboto 1… |
| ink-subtle   | #999999     | HOME VERSION 1–5 labels  |
| ink-dropdown | #818187     | Dropdown links           |
| ink-label    | #AAAAAA     | Uppercase form field la… |
| on-accent    | #FFFFFF     |                          |
| inverse-ink  | #FFFFFF     | Text on the gradient an… |

## Typography

- display-hero: Source Sans Pro 60px / 600
- headline-lg: Source Sans Pro 39px / 600
- title-md: Source Sans Pro 20px / 600
- eyebrow-hero: Source Sans Pro 18px / 400

{
  "$description": "Muty design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Muty has no filled buttons: the main button is transparent on white with violet text and a 2px violet inset outline"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#6540FB",
      "$description": "Text on primary"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#3452FF",
      "$description": "Hover fill is the gradient 49deg, #BF40FB → #3452FF with white text; #3452FF is its end colour"
    },
    "on-primary-hover": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on primary-hover"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Body and default .section background, footer, dropdowns"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Framed layout previews and cards, which sit on the lavender band"
    },
    "surface-band": {
      "$type": "color",
      "$value": "#F1F1F7",
      "$description": "The pale lavender-grey band (section dark-gray) behind the layout previews"
    },
    "ink": {
      "$type": "color",
      "$value": "#121217",
      "$description": "Headlines and footer titles"
    },
    "ink-body": {
      "$type": "color",
      "$value": "#333333",

/* Muty 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-sm, p-lg */

@theme {
  /* Colors */
  --color-primary: #FFFFFF;
  --color-on-primary: #6540FB;
  --color-primary-hover: #3452FF;
  --color-on-primary-hover: #FFFFFF;
  --color-canvas: #FFFFFF;
  --color-surface-1: #FFFFFF;
  --color-surface-band: #F1F1F7;
  --color-ink: #121217;
  --color-ink-body: #333333;
  --color-ink-muted: #919197;
  --color-ink-subtle: #999999;
  --color-ink-dropdown: #818187;
  --color-ink-label: #AAAAAA;
  --color-line: #E1E1E1;
  --color-accent: #6540FB;
  --color-on-accent: #FFFFFF;
  --color-gradient-start: #BF40FB;
  --color-gradient-end: #3452FF;
  --color-inverse-canvas: #414147;
  --color-inverse-gradient-start: #313137;
  --color-inverse-gradient-end: #616167;
  --color-inverse-ink: #FFFFFF;
  --color-on-media: #FFFFFF;
  --color-on-media-muted: #FFFFFFB8;
  --color-on-media-faint: #FFFFFF99;
  --color-line-on-media: #FFFFFF66;
  --color-nav-line: #FFFFFF26;
  --color-shadow: #00000026;

  /* Fonts */
  --font-sans: "Source Sans Pro", sans-serif;
  --font-source-sans-pro: "Source Sans Pro", sans-serif;
  --font-roboto: "Roboto", sans-serif;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 60px;
  --text-display-hero--line-height: 1.0;
  --text-display-hero--letter-spacing: 0px;
  --text-display-hero--font-weight: 600;
  --text-headline-lg: 39px;

/* Muty 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: #FFFFFF; /* Muty has no filled buttons: the main button is transparent on white with violet text and a 2px violet inset outline */
  --color-on-primary: #6540FB; /* Text on primary */
  --color-primary-hover: #3452FF; /* Hover fill is the gradient 49deg, #BF40FB → #3452FF with white text; #3452FF is its end colour */
  --color-on-primary-hover: #FFFFFF; /* Text on primary-hover */
  --color-canvas: #FFFFFF; /* Body and default .section background, footer, dropdowns */
  --color-surface-1: #FFFFFF; /* Framed layout previews and cards, which sit on the lavender band */
  --color-surface-band: #F1F1F7; /* The pale lavender-grey band (section dark-gray) behind the layout previews */
  --color-ink: #121217; /* Headlines and footer titles */
  --color-ink-body: #333333; /* Base body colour for unstyled text */
  --color-ink-muted: #919197; /* Paragraphs (p: Roboto 16px), input text and placeholders */
  --color-ink-subtle: #999999; /* HOME VERSION 1–5 labels */
  --color-ink-dropdown: #818187; /* Dropdown links */
  --color-ink-label: #AAAAAA; /* Uppercase form field labels */
  --color-line: #E1E1E1; /* 1px bottom border of form fields */
  --color-accent: #6540FB; /* Eyebrows and their rule, outline buttons, blockquotes, submit text (--blue-violet) */
  --color-on-accent: #FFFFFF;
  --color-gradient-start: #BF40FB; /* Hero gradient (225°) and the hover fill (--medium-orchid, --royal-blue) */
  --color-gradient-end: #3452FF; /* Hero gradient (225°) and the hover fill (--medium-orchid, --royal-blue) */
  --color-inverse-canvas: #414147; /* CTA band, with a 45° gradient from #313137 to #616167 and a photo */
  --color-inverse-gradient-start: #313137;
  --color-inverse-gradient-end: #616167;
  --color-inverse-ink: #FFFFFF; /* Text on the gradient and the dark band */
  --color-on-media: #FFFFFF; /* Text on media */
  --color-on-media-muted: #FFFFFFB8; /* Ready templates for: note in the hero */
  --color-on-media-faint: #FFFFFF99; /* Secondary text on dark */
  --color-line-on-media: #FFFFFF66; /* The rule under the hero eyebrow */
  --color-nav-line: #FFFFFF26; /* 1px bottom border of the transparent header */
  --color-shadow: #00000026; /* Preview card shadow */

  /* Fonts */
  --font-source-sans-pro: "Source Sans Pro", sans-serif;
  --font-roboto: "Roboto", sans-serif;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 60px;
  --text-display-hero-font: var(--font-source-sans-pro);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 1.0;
  --text-display-hero-tracking: 0px;
  --text-headline-lg: 39px;
  --text-headline-lg-font: var(--font-source-sans-pro);

Free with a Flowmance accountSign up freeAlready have an account? Log in

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

Source Sans Pro · display-hero

Source Sans Pro · headline-lg

Source Sans Pro · title-md

Source Sans Pro · eyebrow-hero

Source Sans Pro · label-nav

Roboto · body

Spacing & shape

Spacing scale

Layout spacing

Border radius

Motion

Do’s and don’ts

Example prompt

Any page in the Muty style

More design systems like this

Found

Agencē X

Agencix

Agencō

Bring any of them to your AI tool