Atomic Design


Atoms will be the smallest element that could be used to build parts of a product. On its own it holds little value, but when combined into Molecules it becomes more functional. (Colors, Fonts, Typography Scale, Spacing, Text Elements, Form Elements. etc.)

Logo Variations




rgb(106, 142, 145)

t: has-teal-color

b: has-teal-background-color

Olive Green

rgb(135, 155, 78)

t: has-olive-green-color

b: has-olive-green-background-color


rgb(181, 80, 60)

t: has-rust-color

b: has-rust-background-color

Slate Blue

rgb(105, 99, 153)

t: has-slate-blue-color

b: has-slate-blue-background-color


rgb(0, 0, 0)

t: has-black-color

b: has-black-background-color


rgb(255, 255, 255)

t: has-white-color

b: has-white-background-color


rgb(246, 243, 238)

t: has-sand-color

b: has-sand-background-color

Wet Sand

rgb(227, 223, 216)

t: has-wet-sand-color

b: has-wet-sand-background-color


rgb(248, 183, 154)

t: has-salmon-color

b: has-salmon-background-color


rgb(202, 161, 203)

t: has-lilac-color

b: has-lilac-background-color


rgb(169, 179, 219)

t: has-periwinkle-color

b: has-periwinkle-background-color

Powder Blue

rgb(185, 214, 240)

t: has-powder-blue-color

b: has-powder-blue-background-color


rgb(152, 213, 210)

t: has-turquoise-color

b: has-turquoise-background-color

Mint Green

rgb(166, 215, 186)

t: has-mint-green-color

b: has-mint-green-background-color


rgb(226, 230, 111)

t: has-chartreuse-color

b: has-chartreuse-background-color


rgb(243, 217, 101)

t: has-goldenrod-color

b: has-goldenrod-background-color


rgb(253, 190, 80)

t: has-marigold-color

b: has-marigold-background-color

Light Grey

rgb(238, 238, 238)

t: has-light-grey-color

b: has-light-grey-background-color


rgb(192, 192, 192)

t: has-silver-color

b: has-silver-background-color


rgb(140, 140, 140)

t: has-grey-color

b: has-grey-background-color

Dark Grey

rgb(64, 64, 65)

t: has-dark-grey-color

b: has-dark-grey-background-color


rgb(176, 0, 32)

t: has-error-color

b: has-error-background-color


rgb(255, 187, 51)

t: has-warning-color

b: has-warning-background-color


rgb(141, 168, 62)

t: has-success-color

b: has-success-background-color


rgb(34, 172, 233)

t: has-info-color

b: has-info-background-color

Fade Out Black Gradient

c: has-fade-out-black-gradient-gradient-background

s: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%)

Olive Green Gradient

c: has-olive-green-gradient-gradient-background

s: linear-gradient(90deg, rgba(135,155,78,1) 0%, rgba(101,129,21,1) 100%)

Teal Gradient

c: has-teal-gradient-gradient-background

s: linear-gradient(90deg, rgba(152,213,210,1) 0%, rgba(106,142,145,1) 100%)

Sand Gradient

c: has-sand-gradient-gradient-background

s: linear-gradient(90deg, rgba(227,223,216,1) 0%, rgba(191,180,160,1) 100%)

Lilac Gradient

c: has-lilac-gradient-gradient-background

s: linear-gradient(90deg, rgba(202,161,203,1) 0%, rgba(105,99,153,1) 100%)

Mari Gold Gradient

c: has-mari-gold-gradient-gradient-background

s: linear-gradient(90deg, rgba(253,190,80,1) 0%, rgba(243,217,101,1) 100%)



Primary Typeface


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula tristique est. Cras tincidunt orci eget justo laoreet facilisis. In vulputate velit ut bibendum ornare.


Secondary Typeface

Open Sans

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vehicula tristique est. Cras tincidunt orci eget justo laoreet facilisis. In vulputate velit ut bibendum ornare.


Heading Level 1

Heading Level 2

Heading Level 3

Heading Level 4

Heading Level 5
Heading Level 6



In viverra luctus vulputate. Aliquam pretium enim vel dapibus placerat. Cras pharetra velit ut condimentum mattis. Aenean lorem nibh, porttitor non euismod id, sagittis eu tortor. Aliquam erat volutpat. Nunc blandit ligula in magna egestas, sit amet maximus nunc posuere. Pellentesque consequat non turpis interdum dignissim. Nunc elementum dui elit, vitae vulputate tortor pretium id. Cras vitae ornare lacus, vitae faucibus enim. Curabitur et feugiat urna. Etiam consectetur ex aliquam ligula facilisis, nec facilisis ligula ullamcorper. Ut et ante condimentum, consectetur ipsum eu, lacinia erat. Nunc mattis placerat ante sed rutrum. Suspendisse molestie nibh quis metus vehicula facilisis non at tortor. Curabitur ultrices, risus non semper pulvinar, ligula diam sagittis tellus, eget mattis ex dolor eu orci.

Proin sit amet porta eros, eu malesuada justo. Nulla sed eleifend nibh, at posuere sapien. Maecenas id nisl et turpis tincidunt aliquet. Ut elit turpis, vestibulum sit amet tempor ut, congue in libero. Praesent vestibulum semper ullamcorper. Suspendisse sollicitudin nisl vel pharetra bibendum. Pellentesque at massa quis quam congue accumsan. Suspendisse potenti. Nunc accumsan rutrum leo.

Inline Elements

This is a text link

Strong is used to indicate strong importance

This text has added emphasis

The b element is stylistically different text from normal text, without any special importance

The i element is text that is set off from the normal text

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation

This text is deleted and This text is inserted

This text has a strikethrough


Subscript for things like H2O

This small text is small for for fine print, etc.

Abbreviation: HTML

Keybord input: Cmd

This text is a short inline quotation

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight

This is what inline code looks like.

This is sample output from a computer program

The variable element, such as x = y

Horizontal Rule


Landscape Banner

Form Fields

Text Input
Radio Button