Andrei Pfeiffer logo

Typography

h00 largest heading


h01 heading, usually h1


h02 heading, usually h2


h02.5 heading, h2 alternative


h03 heading, usually h3


h04 small heading


h05 small uppercase heading

h06 tiny uppercase heading


p02 default paragraph text: Phasellus tempor ornare mauris quis venenatis. Maecenas eu ultrices est, eu tristique dui. Integer eget lacus neque. Duis at fringilla arcu. Pellentesque maximus pharetra dignissim. Suspendisse nec quam vel sapien accumsan ullamcorper. Vivamus ac suscipit quam, vitae auctor ex.


p01 larger text: Phasellus tempor ornare mauris quis venenatis. Maecenas eu ultrices est, eu tristique dui. Integer eget lacus neque. Duis at fringilla arcu. Pellentesque maximus pharetra dignissim. Suspendisse nec quam vel sapien accumsan ullamcorper. Vivamus ac suscipit quam, vitae auctor ex.



m01 regular monospaced text
m02 smaller monospaced text

Colors

Primary
Blue
Blue light
Dark
Light

Muted text


Inversed theme

Muted inversed text


Primary color background

Muted primary background text


Secondary color background

Muted secondary background text

Spacing

x

⬅ horizontal 8

⬅ horizontal 16

⬅ horizontal 24

⬅ horizontal 32


⬇ vertical 8

⬇ vertical 16

⬇ vertical 24

⬇ vertical 32

⬇ vertical 40

⬇ vertical 60

⬇ vertical 80

⬇ vertical 100

⬇ vertical 120

⬇ vertical 140

placeholder

Layout

Inlinedelementswithconstantgap


Stacked

elements

with

constant

gap


align
align

start


align
align

center


align
align

end


justify

start


justify

center


justify

end


justify

space-between


Full

12

6

6

5

7

4

8

4

4

4

Interactive elements

Links are underlined, with inherited color

Link (pq) button