Overview

Design System

The Master CSS design system provides a set of guidelines and examples

Benchmark charts

These examples use fake design-system sample data. They are not benchmark results.

Ranking bars

Sample data for comparing one metric across adapters.

Master CSS static

18.4 kBbaseline

Master CSS progressive

21.8 kB+18%

Tailwind CSS Vite

34.2 kB1.9x

Tailwind CSS CLI

38.6 kB2.1x

Fake design-system sample data. Not a benchmark result.

Stacked payload bars

Sample data for CSS, runtime, and manifest payload breakdowns.

Runtime

28.2 kBfirst visit

CSS8.6 kB

Runtime JS14.2 kB

Manifest5.4 kB

Static

18.4 kBcached CSS

CSS18.4 kB

Runtime JS0 kB

Manifest0 kB

Progressive

22.2 kBHTML response

CSS6.1 kB

Runtime JS14.2 kB

Hydration1.9 kB

Fake design-system sample data. Totals are intentionally illustrative.

Metric table

Sample data for dense benchmark summaries.

Metric	Value	Detail
Fixture	dashboard
Median build	148 ms	10 measured rounds
Warm rebuild	28 ms	single class edit
Generated rules	1,284	after pruning
Long tasks	0	Chromium trace sample

Delta labels

Sample data for compact comparison badges.

-38%CSS bytes+12%build time+42 msstyle calcbaselinecurrent

Sample summary

Sample data for raw benchmark rounds.

Median: 16.8 ms
Mean: 17.1 ms
Min: 14.2 ms
Max: 22.4 ms
Samples: 25

Code

Block code

<h1 className="block text-center font:48px tracking:.2em">    Hello, world!</h1>

Inline code

js -> const foo = 'bar'
ts -> const options: Options = {}
css -> body { background: red; }
mcss -> text-center

Code lines added and removed

console.log('hewwo') console.log('hello') console.log('goodbye')

Code line highlight

console.log('hewwo')console.log('hello') console.log('goodbye')

Code line focus

console.log('hewwo')console.log('hello') console.log('goodbye')

Code mark words

const foo = 'bar'

SSSSS