Base theme

Colors

Primary brand color
Secondary brand colors
Transparent darken-50 to dark color
Light color to transparent lighten-50
Grayscale gray-25 to gray-900
Semantic attention-50 to attention-900
Semantic warning-50 to warning-900
Semantic success-50 to success-900

Typefaces

Normal font (monospace 400)

HOxpla fi fl
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
abcdefghijklmnopqrstuvwxyzåäö0123456789

Bold font (monospace 700)

HOxpla fi fl
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
abcdefghijklmnopqrstuvwxyzåäö0123456789

Display font (sans-serif 700)

HOxpla fi fl
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
abcdefghijklmnopqrstuvwxyzåäö0123456789

Serif font (serif 400)

HOxpla fi fl
ABCDEFGHIJKLMNOPQRSTUVWXYZÅÄÖ
abcdefghijklmnopqrstuvwxyzåäö0123456789

Tabular numbers
0123456789
Lining numbers
0123456789
Line height & paragraph spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In in nunc rutrum, consectetur nisi non, pellentesque erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aliquam erat volutpat.

Nullam leo est, aliquam et turpis vel, tincidunt iaculis elit. Sed in hendrerit leo, quis aliquet ex. Sed mattis vestibulum nunc, vitae euismod urna ultricies blandit. Praesent lobortis mollis sapien, vel egestas orci. Nulla pretium sagittis urna.

Type scale

ABCDE --font-size-100

ABCDE --font-size-200

ABCDE --font-size-300

ABCDE --font-size-400

ABCDE --font-size-500

ABCDE --font-size-600

ABCDE --font-size-700

ABCDE --font-size-800

ABCDE --font-size-900

ABCDE --font-size-1000

Sizes

size-50 to size-800

Shapes

Border width
small medium large
Border radius
small medium large
Drop shadows
small medium large