Moos Design System

Get DESIGN.md Download View template Works with

Moos is a cheerful, candy-coloured construction site. It feels more like a friendly app landing page than a contractor brochure: white and pale-lavender bands, bright gold uppercase Poppins titles, a warm Lora serif for body text, and a pink-to-gold gradient that washes over buttons, photos, the logo and a giant tilted form blob. Rounded diamonds float around the hero, and the about photos are cut with one big rounded corner (grid photos stay square).

Four signatures make it recognisable:

The pink-to-gold gradient. linear-gradient(45deg, #FF7092, #FFDD00) fills the solid pill buttons (the CTA-band and form buttons are outline pills instead), the round M logo, the play button, the Since 1940 ribbon and the testimonial block. Over photos it becomes a translucent wash (#FF7092 at 95% → #FFB733 at 85% → #FFDD00 at 50%).
Gold uppercase titles. Section titles on white and gray bands are #FFDD00 (white on the gradient CTA band), Poppins 600, uppercase, 1px tracking, with a 15px gold highlighter bar (#FFDD00 at 30%) that draws in under them.
Soft geometry. Rounded diamonds (solid gold, pink with a shadow, a blurred gold-pink one, a 20px gold-tint outline) float in the hero; images have one 100px corner; the logo strip is a white pill that bleeds off the left edge; the footer has a 100px / 500px top curve.
Serif body under sans titles. Paragraphs are Lora 15px in #717177; quotes and the ribbon are Lora italic; the Peter Johns signature is a script face.

Moos is light-only, with a dark footer.

Colors

Surfaces

canvas#FFFFFF

Page background, cards, the logo strip

surface-1#F1F1F7

.section.gray bands: projects header, team, blog

inverse-canvas#313137

Footer, over a photo with a 90% → 100% #313137 gradient

field-placeholder#FFFFFF · 70%

Placeholder text in the form

Ink

on-primary#FFFFFF

Text on the gradient

ink#212127

Default heading colour (h1–h3 base), hamburger lines

ink-body#333333

Body tag text (14px Poppins)

ink-muted#717177

Paragraphs (p, Lora), hero lead

ink-subtle#919197

Underlined uppercase links (GET IN TOUCH →), h5/h6

ink-quote#9C9CA5

Testimonial quotes

ink-faint#C5C5CA

The vertical rotated label

inverse-ink#FFFFFF

Text on inverse-canvas

on-media#FFFFFF

Action

primary#FF7092

The 45° gradient on buttons, logo, play button, ribbon, form blob (--pale-violet-red → --gold)

primary-end#FFDD00

With primary: The 45° gradient on buttons, logo, play button, ribbon, form blob (--pale-violet-red → --gold)

primary-hover#FF7092

accent#FFDD00

Section and hero titles, overlay menu links, quote-icon rings (1px border), the outline diamond

accent-tint#FFDD00 · 30%

Highlighter bar under titles (.heading-line), the 20px outline diamond

Lines & effects

line#FFFFFF · 20%

Footer title underline

line-strong#FFFFFF · 60%

1px bottom border of form fields

outline-ring#FFFFFF · 50%

1px inset ring of the outline pill on gradient bands

Typography

Poppins · display-hero

The quick brown fox jumps

YOU DREAM. 60px · 600 · 0.83 · 1px

Peter Jhons · script · shown in Great Vibes (fallback)

The quick brown fox jumps

Gold signature in the about block. 60px · 400 · 1.17

Poppins · headline-menu

The quick brown fox jumps

Overlay menu links (.nav-title, line height 35px). 42px · 600 · 0.83 · 1px

Poppins · title-md

The quick brown fox jumps

Titles on project tiles (6 uses). 20px · 600 · 0.75 · 1px

Lora · body-lg

The quick brown fox jumps

Hero lead, white CTA lead (.paragraph-biger). 18px · 400 · 1.44

Lora · ribbon

The quick brown fox jumps

Since 1940 on the gradient ribbon. 18px · 400 · 1.11

Spacing & shape

Purpose	Value
Container	max 1200px (.container, flex 1); 15px side padding on sections
Section rhythm	120px top and bottom (.section; 80px at ≤991px), 100px on the projects header band (50px at ≤479px), 150px on the photo CTA band (100px at ≤991px), 220px on the video section (100px at ≤991px)
Breakpoints	991px, 767px and 479px

Spacing scale

Token	Value	Preview
`xs`	5px
`sm`	10px
`md`	15px
`lg`	25px
`xl`	40px
`2xl`	50px

Layout spacing

Token	Value	Preview
`gutter`	15px
`section-band`	100px
`section`	120px
`section-cta`	150px
`section-video`	220px

Border radius

xs2px

md20px

pill30px

card40px

lg50px

corner100px

footer500px

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

Floating shapes	Diamonds move on page scroll: y from −200px to +300px and rotate, 500ms steps tied to scroll position
Title highlighter	.heading-line width grows (size, 500ms) as the title scrolls into view
Button hover	translateY(−5px), shadow 20% → 60%, transition: all 0.3s
Menu open	Menu fades in (opacity, 400ms ease); links flip up from rotateX(−100°) to 0, 300ms ease, on 1000px perspective
Hamburger	Line widths change, 300–400ms ease / outCubic
Nav on scroll	Background colour and height change, 500ms easeIn
Logo and image hovers	opacity 0.7 → 1, 300ms; tab and accordion items flex 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)
Play button hover	Gradient → solid #FFDD00, 300ms

Do’s and don’ts

Fill buttons, the logo and play button with linear-gradient(45deg, #FF7092, #FFDD00) and white uppercase Poppins 14px / 600.
Set section titles in gold #FFDD00, Poppins 34px / 600, uppercase, 1px tracking, with the 15px #FFDD00 30% highlighter bar.
Set paragraphs in Lora 15px, line height 1.6, #717177.
Round one corner of feature images at 100px, and use 30px pills and 40px cards.
Alternate white and #F1F1F7 bands at 120px top and bottom.
Add floating rounded diamonds in gold, pink or gold outline around hero-type sections.
Use gold #FFDD00 for text under 34px or for paragraphs; on white it is about 1.4:1 and only works as large bold display.
Put small white text on the gold end of the gradient; keep button labels 14px / 600 uppercase and start the gradient pink behind the text.
Use ink-subtle #919197 or ink-faint #C5C5CA for paragraphs; they are for short uppercase links and labels only.
Add hard shadows or dark sections beyond the #313137 footer.
Mix the script face into anything but a signature.
Square off buttons or make cards sharp; the system is soft everywhere except grid photos.

Example prompt

Any page in the Moos style

Prompt

Build your page in the Moos style. White #FFFFFF page with #F1F1F7 bands, 120px top and bottom, content in a 1200px container. Titles are Poppins 600 uppercase with 1px tracking in gold #FFDD00 (34px, line height 0.82) with a 15px #FFDD00 30%-opacity highlighter bar along the bottom. Paragraphs are Lora 15px, line height 1.6, #717177. Buttons are pills (30px radius, 15px 40px padding) filled with linear-gradient(45deg, #FF7092, #FFDD00), white uppercase Poppins 14px / 600, shadow 0 10px 20px -10px rgba(0,0,0,0.2); on hover lift 5px. Cards are white with a 40px radius and a 4px 4px 50px -10px rgba(0,0,0,0.15) shadow. Round one corner of feature photos at 100px and wash big photos with the pink-to-gold gradient. Footer is #313137 with 100px / 500px top corners.

# Moos Design System

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

## Overview

Moos is a cheerful, candy-coloured construction site. It
feels more like a friendly app landing page than a
contractor brochure: white and pale-lavender bands,
bright gold uppercase Poppins titles, a warm Lora serif
for body text, and a pink-to-gold gradient that washes

## Colors

| Token        | Hex         | Role                     |
| ------------ | ----------- | ------------------------ |
| canvas       | #FFFFFF     | Page background, cards,… |
| surface-1    | #F1F1F7     | .section.gray bands: pr… |
| inverse-can… | #313137     | Footer, over a photo wi… |
| field        | #FFFFFF 0%  |                          |
| field-place… | #FFFFFF 70% | Placeholder text in the… |
| on-primary   | #FFFFFF     | Text on the gradient     |
| ink          | #212127     | Default heading colour … |
| ink-body     | #333333     | Body tag text (14px Pop… |
| ink-muted    | #717177     | Paragraphs (p, Lora), h… |
| ink-subtle   | #919197     | Underlined uppercase li… |
| ink-quote    | #9C9CA5     | Testimonial quotes       |
| ink-faint    | #C5C5CA     | The vertical rotated la… |
| inverse-ink  | #FFFFFF     | Text on inverse-canvas   |
| on-media     | #FFFFFF     |                          |

## Typography

- display-hero: Poppins 60px / 600
- script: Peter Jhons 60px / 400
- headline-menu: Poppins 42px / 600
- headline-section: Poppins 34px / 600

{
  "$description": "Moos design tokens from its DESIGN.md (Flowmance), in the W3C Design Tokens format. Values measured from the template.",
  "color": {
    "primary": {
      "$type": "color",
      "$value": "#FF7092",
      "$description": "The 45° gradient on buttons, logo, play button, ribbon, form blob (--pale-violet-red → --gold)"
    },
    "primary-end": {
      "$type": "color",
      "$value": "#FFDD00",
      "$description": "With primary: The 45° gradient on buttons, logo, play button, ribbon, form blob (--pale-violet-red → --gold)"
    },
    "primary-hover": {
      "$type": "color",
      "$value": "#FF7092"
    },
    "on-primary": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Text on the gradient"
    },
    "accent": {
      "$type": "color",
      "$value": "#FFDD00",
      "$description": "Section and hero titles, overlay menu links, quote-icon rings (1px border), the outline diamond"
    },
    "accent-tint": {
      "$type": "color",
      "$value": "#FFDD004D",
      "$description": "Highlighter bar under titles (.heading-line), the 20px outline diamond"
    },
    "canvas": {
      "$type": "color",
      "$value": "#FFFFFF",
      "$description": "Page background, cards, the logo strip"
    },
    "surface-1": {
      "$type": "color",
      "$value": "#F1F1F7",
      "$description": ".section.gray bands: projects header, team, blog"
    },
    "ink": {
      "$type": "color",
      "$value": "#212127",
      "$description": "Default heading colour (h1–h3 base), hamburger lines"

/* Moos 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-body, rounded-md, p-lg */

@theme {
  /* Colors */
  --color-primary: #FF7092;
  --color-primary-end: #FFDD00;
  --color-primary-hover: #FF7092;
  --color-on-primary: #FFFFFF;
  --color-accent: #FFDD00;
  --color-accent-tint: #FFDD004D;
  --color-canvas: #FFFFFF;
  --color-surface-1: #F1F1F7;
  --color-ink: #212127;
  --color-ink-body: #333333;
  --color-ink-muted: #717177;
  --color-ink-subtle: #919197;
  --color-ink-quote: #9C9CA5;
  --color-ink-faint: #C5C5CA;
  --color-line: #FFFFFF33;
  --color-line-strong: #FFFFFF99;
  --color-outline-ring: #FFFFFF80;
  --color-inverse-canvas: #313137;
  --color-inverse-ink: #FFFFFF;
  --color-on-media: #FFFFFF;
  --color-field: #FFFFFF00;
  --color-field-placeholder: #FFFFFFB3;

  /* Fonts */
  --font-sans: "Poppins", sans-serif;
  --font-poppins: "Poppins", sans-serif;
  --font-lora: "Lora", serif;
  --font-peter-jhons: "Peter Jhons", "Great Vibes", cursive;

  /* Type styles (text-<name> sets size, line height, letter spacing and weight together) */
  --text-display-hero: 60px;
  --text-display-hero--line-height: 0.83;
  --text-display-hero--letter-spacing: 1px;
  --text-display-hero--font-weight: 600;
  --text-script: 60px;
  --text-script--line-height: 1.17;
  --text-script--letter-spacing: 0px;
  --text-script--font-weight: 400;
  --text-headline-menu: 42px;
  --text-headline-menu--line-height: 0.83;

/* Moos 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: #FF7092; /* The 45° gradient on buttons, logo, play button, ribbon, form blob (--pale-violet-red → --gold) */
  --color-primary-end: #FFDD00; /* With primary: The 45° gradient on buttons, logo, play button, ribbon, form blob (--pale-violet-red → --gold) */
  --color-primary-hover: #FF7092;
  --color-on-primary: #FFFFFF; /* Text on the gradient */
  --color-accent: #FFDD00; /* Section and hero titles, overlay menu links, quote-icon rings (1px border), the outline diamond */
  --color-accent-tint: #FFDD004D; /* Highlighter bar under titles (.heading-line), the 20px outline diamond */
  --color-canvas: #FFFFFF; /* Page background, cards, the logo strip */
  --color-surface-1: #F1F1F7; /* .section.gray bands: projects header, team, blog */
  --color-ink: #212127; /* Default heading colour (h1–h3 base), hamburger lines */
  --color-ink-body: #333333; /* Body tag text (14px Poppins) */
  --color-ink-muted: #717177; /* Paragraphs (p, Lora), hero lead */
  --color-ink-subtle: #919197; /* Underlined uppercase links (GET IN TOUCH →), h5/h6 */
  --color-ink-quote: #9C9CA5; /* Testimonial quotes */
  --color-ink-faint: #C5C5CA; /* The vertical rotated label */
  --color-line: #FFFFFF33; /* Footer title underline */
  --color-line-strong: #FFFFFF99; /* 1px bottom border of form fields */
  --color-outline-ring: #FFFFFF80; /* 1px inset ring of the outline pill on gradient bands */
  --color-inverse-canvas: #313137; /* Footer, over a photo with a 90% → 100% #313137 gradient */
  --color-inverse-ink: #FFFFFF; /* Text on inverse-canvas */
  --color-on-media: #FFFFFF;
  --color-field: #FFFFFF00;
  --color-field-placeholder: #FFFFFFB3; /* Placeholder text in the form */

  /* Fonts */
  --font-poppins: "Poppins", sans-serif;
  --font-lora: "Lora", serif;
  --font-peter-jhons: "Peter Jhons", "Great Vibes", cursive;

  /* Type styles: size, weight, line height, letter spacing */
  --text-display-hero: 60px;
  --text-display-hero-font: var(--font-poppins);
  --text-display-hero-weight: 600;
  --text-display-hero-line-height: 0.83;
  --text-display-hero-tracking: 1px;
  --text-script: 60px;
  --text-script-font: var(--font-peter-jhons);
  --text-script-weight: 400;
  --text-script-line-height: 1.17;
  --text-script-tracking: 0px;
  --text-headline-menu: 42px;
  --text-headline-menu-font: var(--font-poppins);

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

Construction 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

Poppins · display-hero

Peter Jhons · script · shown in Great Vibes (fallback)

Poppins · headline-menu

Poppins · title-md

Lora · body-lg

Lora · ribbon

Spacing & shape

Spacing scale

Layout spacing

Border radius

Surfaces

Motion

Do’s and don’ts

Example prompt

Any page in the Moos style

More design systems like this

Bixol

Nane

Nifty

Nuuk

Bring any of them to your AI tool