mdlondon Design System

Visual reference for theme developers

Color Palette

Brand Colors

Primary --mdl-color-primary #151C1E
Secondary --mdl-color-secondary #415257

Accent Colors

Warm (Casablanca) --mdl-color-accent-warm #EFA64F
Cool (Olive) --mdl-color-accent-cool #B0B66E
Sage --mdl-color-accent-sage #C8CFB8

Semantic Colors

Success --mdl-color-success #16A34A
Error --mdl-color-error #DC2626
Warning --mdl-color-warning #F59E0B
Info --mdl-color-info #3B82F6

Gray Scale

White --mdl-color-white #FFFFFF
Gray 100 --mdl-color-gray-100 #F5F5F5
Gray 200 --mdl-color-gray-200 #E5E5E5
Gray 300 --mdl-color-gray-300 #D4D4D4
Gray 700 --mdl-color-gray-700 #404040
Gray 800 --mdl-color-gray-800 #262626
Black --mdl-color-black #000000

Typography

Font Families

Heading (Dallas) --mdl-font-heading

The quick brown fox jumps over the lazy dog

Subheading (Co Headline) --mdl-font-subheading

The quick brown fox jumps over the lazy dog

Body (Niveau Grotesk) --mdl-font-body

The quick brown fox jumps over the lazy dog

Headings

Heading 1
--mdl-font-size-6xl (64px)

Heading 2

--mdl-font-size-5xl (48px)

Heading 3

--mdl-font-size-4xl (40px)

Heading 4

--mdl-font-size-3xl (32px)
Heading 5
--mdl-font-size-2xl (24px)
Heading 6
--mdl-font-size-xl (20px)

Font Sizes

Extra Small (12px) --mdl-font-size-xs
Small (14px) --mdl-font-size-sm
Base (16px) --mdl-font-size-base
Large (18px) --mdl-font-size-lg
Extra Large (20px) --mdl-font-size-xl
2XL (24px) --mdl-font-size-2xl

Font Weights

Light (300) --mdl-font-weight-light
Regular (400) --mdl-font-weight-regular
Bold (700) --mdl-font-weight-bold

Spacing Scale

Based on 8px grid system

--mdl-space-1 8px
--mdl-space-2 16px
--mdl-space-3 24px
--mdl-space-4 32px
--mdl-space-5 40px
--mdl-space-6 48px
--mdl-space-8 64px
--mdl-space-10 80px
--mdl-space-12 96px
--mdl-space-16 128px
--mdl-space-20 160px

Buttons

Button Variants

.mdl-button--primary
.mdl-button--secondary
.mdl-button--outline

Button Sizes

.mdl-button--small
.mdl-button (default)
.mdl-button--large

Disabled State

disabled attribute
disabled attribute

Form Elements

Checkboxes
Radio Buttons
This field contains an error

Badges

Success .style-guide__badge--success
Error .style-guide__badge--error
Warning .style-guide__badge--warning
Info .style-guide__badge--info
Neutral .style-guide__badge--neutral

Icons

Available icons from the icon snippet

arrow
caret
check_box
error
eye
heart
lock
map_pin
price_tag
question_mark
recycle
return
ruler
star
stopwatch
truck
tiktok
youtube
instagram
x
twitter
facebook
pinterest
linkedin
discord
bluesky
vimeo
snapchat
tumblr

Shadows & Borders

Box Shadows

--mdl-shadow-sm
--mdl-shadow-md
--mdl-shadow-lg
--mdl-shadow-xl

Border Radius

--mdl-border-radius-none 0
--mdl-border-radius-sm 2px
--mdl-border-radius-md 4px
--mdl-border-radius-lg 8px
--mdl-border-radius-full 9999px

Border Widths

--mdl-border-width-thin 1px
--mdl-border-width-medium 2px
--mdl-border-width-thick 4px