Mudlej

Design System

Styleguide

Tokens, semantic colors, and atom states for light and dark theme checks.

Primitive Color Ramps

neutral

50
100
200
300
400
500
600
700
800
900
950

accent

50
100
200
300
400
500
600
700
800
900
950

success

50
100
200
300
400
500
600
700
800
900
950

warning

50
100
200
300
400
500
600
700
800
900
950

danger

50
100
200
300
400
500
600
700
800
900
950

info

50
100
200
300
400
500
600
700
800
900
950

Semantic Tokens

Page --sys-color-page
Surface --sys-color-surface
Raised --sys-color-surface-raised
Hover --sys-color-surface-hover
Text --sys-color-text
Muted --sys-color-text-muted
Heading --sys-color-heading
Border --sys-color-border
Focus --sys-color-focus
Accent --sys-color-accent
On Accent --sys-color-on-accent
Success --sys-color-success
On Success --sys-color-on-success
Warning --sys-color-warning
On Warning --sys-color-on-warning
Danger --sys-color-danger
On Danger --sys-color-on-danger
Info --sys-color-info
On Info --sys-color-on-info

Spacing And Shape

Spacing scale

2xs
--spacing-2xs
xs
--spacing-xs
sm
--spacing-sm
md
--spacing-md
lg
--spacing-lg
xl
--spacing-xl
2xl
--spacing-2xl
3xl
--spacing-3xl
4xl
--spacing-4xl
5xl
--spacing-5xl

Fluid spacing

Section
--spacing-section
Block
--spacing-block
Stack
--spacing-stack

Radius

Small --radius-sm
Medium --radius-md
Card --radius-card
Full --radius-full

Typography

Type scale

Label --text-label 12 -> 12px

Thoughtful software, plainly built

Meta --text-meta 14 -> 15px

Thoughtful software, plainly built

Code --text-code 16 -> 17px

Thoughtful software, plainly built

Body --text-body 17 -> 19px

Thoughtful software, plainly built

Lede --text-lede 20 -> 24px

Thoughtful software, plainly built

Heading 3 --text-h3 25 -> 30px

Thoughtful software, plainly built

Heading 2 --text-h2 29 -> 38px

Thoughtful software, plainly built

Heading 1 --text-h1 35 -> 47px

Thoughtful software, plainly built

Typefaces

Sans - Inter

Aa Gg Qq - 0123456789

--font-sans Body & lede

Serif - Newsreader

Aa Gg Qq - 0123456789

--font-serif Headings

Mono - JetBrains Mono

Aa Gg Qq - 0123456789

--font-mono Labels, meta & code

Atoms

Buttons

Badges

Neutral Accent Success Warning Danger Info
Link card

Landing

Checks hover, border, and text behavior on an interactive surface.
Static card

Surface

Checks non-interactive surface, border, and radius behavior.

Index

Articles

Checks repeated content surfaces and muted body text.

Links

Inline links use semantic accent color and consistent focus treatment.