Webflow Design System · v0.9.0

Moncees Framework

A Webflow-native framework, built variables-first. Takes the best of Tailwind (utilities, tokens, atomic thinking) and Webflow (visual control, Component Properties, CMS) — without fighting either.

Author

Sascha Thiel

Version

0.9.0

Build

2026.05.20

Production

Active development

Typography

Luderoad

Display

General Sans

Body

Interval Mono

Mono

Headings

heading-display

Heading 1

All H1

Heading 1

heading-1

Heading 1

All H2

Heading 2

heading-2

Heading 2

All H3

Heading 3

heading-3

Heading 3

All H4

Heading 4

heading-4

Heading 4

All H5

Heading 5

heading-5

Heading 5

All H6

Heading 6

heading-6

Heading 6

Body Text

Paragraph

text-xl

Large paragraph text for emphasis and introductions.

Paragraph

text-lg

Extra large body text for standout paragraphs.

Paragraph

text-md

Large body text for introductions and emphasized paragraphs.

Paragraph

text-base

Base body text for standard paragraphs and content blocks.

Paragraph

text-sm

Small text for captions, metadata, and supporting information.

Paragraph

text-xs

Extra small text for fine print, legal, and metadata.

Paragraph

eyebrow

Eyebrow / Overline Text

Paragraph

toc_link

Rich Text

Rich Text elements inherit base typography styles. Style via All H1-H6, All Paragraphs, etc.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

Lists

All Ordered Lists

First ordered item
Second ordered item
Third ordered item

All Unordered Lists

First unordered item
Second unordered item
Third unordered item

Theme

Mode

AaAa

Dark

u-mode-dark

AaAa

Light

u-mode-light

Colors

Theme Colors

u-bg-background

u-bg-surface

u-bg-surface-elevated

u-bg-foreground

u-bg-foreground-muted

u-bg-border

u-bg-accent

Accent Colors

Accent 1 (Blue)

accent/50 → accent/950

Accent 2 (Emerald)

accent-2/50 → accent-2/950

Accent 3 (Fuchsia)

accent-3/50 → accent-3/950

Text Colors

The quick brown fox jumps over the lazy dog.

u-text-foreground

The quick brown fox jumps over the lazy dog.

u-text-muted

The quick brown fox jumps over the lazy dog.

u-text-accent

The quick brown fox jumps over the lazy dog.

u-text-surface

Utility Colors

u-bg-error

error/500

u-bg-warning

warning/500

u-bg-success

success/500

u-bg-info

info/500

Form

Form Elements

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.