Styleguide
XD-font__display-1
Display 1
XD-font__display-2
Display 2
XD-font__display-3
Display 3
h1
Heading 1
h2
Heading 2
h3
Heading 3
h4
Heading 4
h5
Heading 5
h6
Heading 6
XD-font__title-lg
XD-font__title-sm
body-1
Body 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt risus eget nisl dictum, nec suscipit dui aliquet. Morbi rutrum augue metus, eget dapibus nisl malesuada quis. Pellentesque tempor elit lacus, vitae sodales tortor vestibulum et. Maecenas ut maximus augue. Proin vel lorem vitae risus tempus molestie in ut nisl. Mauris euismod a lorem sed feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum, dolor mattis aliquam posuere, lacus neque gravida odio, sed volutpat dui dolor at libero. Nam ac nisi eu metus consequat pharetra et vel enim. Cras in urna vitae nisi dapibus egestas.
body-2
Body 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt risus eget nisl dictum, nec suscipit dui aliquet. Morbi rutrum augue metus, eget dapibus nisl malesuada quis. Pellentesque tempor elit lacus, vitae sodales tortor vestibulum et. Maecenas ut maximus augue. Proin vel lorem vitae risus tempus molestie in ut nisl. Mauris euismod a lorem sed feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum, dolor mattis aliquam posuere, lacus neque gravida odio, sed volutpat dui dolor at libero. Nam ac nisi eu metus consequat pharetra et vel enim. Cras in urna vitae nisi dapibus egestas.
body-3
Body 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean tincidunt risus eget nisl dictum, nec suscipit dui aliquet. Morbi rutrum augue metus, eget dapibus nisl malesuada quis. Pellentesque tempor elit lacus, vitae sodales tortor vestibulum et. Maecenas ut maximus augue. Proin vel lorem vitae risus tempus molestie in ut nisl. Mauris euismod a lorem sed feugiat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean rutrum, dolor mattis aliquam posuere, lacus neque gravida odio, sed volutpat dui dolor at libero. Nam ac nisi eu metus consequat pharetra et vel enim. Cras in urna vitae nisi dapibus egestas.
<a href="#" class="XD-btn">primary</a>
Primary<a href="#" class="XD-btn--dark">secondary</a>
Secondary<a href="#" class="XD-btn--outline">ghost</a>
Ghost<a href="#" class="XD-btn--outline-dark">ghost dark</a>
Ghost Dark<a href="#" class="XD-btn--text">text</a>
Textred-dark
#992824
red
#BD2C26
orange-dark
#935516
orange-light
#D68027
orange
#AD651B
yellow
#DB9806
cream
#D4CBB3
cream-grey
#B1A58C
gold
#A49463
gold-olive
#8D7F53
brown-olive
#7E6F53
olive
#706543
olive-dark
#564C37
brown
#523F2C
grey-dark
#545454
grey
#999999
black
#231F20