Colors

Primary

#5055a4

Secondary

#876cfb

Light

#eeeef6

Dark

#363a3c

Blue

#3496ff

Purple

#814dde

Pink

#fc57a3

Red

#db374d

Orange

#ff7d38

Yellow

#f4de3d

Green

#52af36

Teal

#1bbfa6

Cyan

#4eedf4

Gray

#a0a6b1

Gray Dark

#363a3c

<div class="lp-color-chips">
	<div class="lp-color-chip">
		<div class="lp-color-chip__name">Primary</div>
		<div class="lp-color-chip__color">#5055a4</div>
	</div>
	<div class="lp-color-chip">
		<div class="lp-color-chip__name">Secondary</div>
		<div class="lp-color-chip__color">#876cfb</div>
	</div>
	<div class="lp-color-chip">
		<div class="lp-color-chip__name">Light</div>
		<div class="lp-color-chip__color">#eeeef6</div>
	</div>
	<div class="lp-color-chip">
		<div class="lp-color-chip__name">Dark</div>
		<div class="lp-color-chip__color">#363a3c</div>
	</div>
</div>

<div class="lp-color-chips">
	<div class="lp-color-chip">
		<div class="lp-color-chip__name">Blue</div>
		<div class="lp-color-chip__color">#3496ff</div>
	</div>
	<div class="lp-color-chip">
		<div class="lp-color-chip__name">Purple</div>
		<div class="lp-color-chip__color">#814dde</div>
	</div>
	<div class="lp-color-chip">
		<div class="lp-color-chip__name">Pink</div>
		<div class="lp-color-chip__color">#fc57a3</div>
	</div>
	<div class="lp-color-chip">
		<div class="lp-color-chip__name">Red</div>
		<div class="lp-color-chip__color">#db374d</div>
	</div>
	<div class="lp-color-chip">
		<div class="lp-color-chip__name">Orange</div>
		<div class="lp-color-chip__color">#ff7d38</div>
	</div>
	<div class="lp-color-chip">
		<div class="lp-color-chip__name">Yellow</div>
		<div class="lp-color-chip__color">#f4de3d</div>
	</div>
	<div class="lp-color-chip">
		<div class="lp-color-chip__name">Green</div>
		<div class="lp-color-chip__color">#52af36</div>
	</div>
	<div class="lp-color-chip">
		<div class="lp-color-chip__name">Teal</div>
		<div class="lp-color-chip__color">#1bbfa6</div>
	</div>
	<div class="lp-color-chip">
		<div class="lp-color-chip__name">Cyan</div>
		<div class="lp-color-chip__color">#4eedf4</div>
	</div>
	<div class="lp-color-chip">
		<div class="lp-color-chip__name">Gray</div>
		<div class="lp-color-chip__color">#a0a6b1</div>
	</div>
	<div class="lp-color-chip">
		<div class="lp-color-chip__name">Gray Dark</div>
		<div class="lp-color-chip__color">#363a3c</div>
	</div>
</div>

Typography

Headings

Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

<h1>Heading Level 1</h1>
    <h2>Heading Level 2</h2>
    <h3>Heading Level 3</h3>
    <h4>Heading Level 4</h4>

Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas impedit officiis aut, eos repellendus blanditiis nobis qui quis numquam porro tenetur quia molestias inventore modi recusandae laborum consequuntur! Inventore, vitae?

Small Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas impedit officiis aut, eos repellendus blanditiis nobis qui quis numquam porro tenetur quia molestias inventore modi recusandae laborum consequuntur! Inventore, vitae?

Large Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas impedit officiis aut, eos repellendus blanditiis nobis qui quis numquam porro tenetur quia molestias inventore modi recusandae laborum consequuntur! Inventore, vitae?

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas impedit officiis aut, eos repellendus blanditiis nobis qui quis numquam porro tenetur quia molestias inventore modi recusandae laborum consequuntur! Inventore, vitae?</p>
    <p class="small"> Small Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas impedit officiis aut, eos repellendus blanditiis nobis qui quis numquam porro tenetur quia molestias inventore modi recusandae laborum consequuntur! Inventore, vitae?</p>
    <p class="large">Large Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas impedit officiis aut, eos repellendus blanditiis nobis qui quis numquam porro tenetur quia molestias inventore modi recusandae laborum consequuntur! Inventore, vitae?</p>

Styles