Design System
All styles throughout the site start here. To respect cohesiveness, all changes need to be done here; on this page.
H1
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
H2
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
H3
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
H4
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
H5
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
H6
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
display h
The quick brown fox jumps
display h + is xl
The quick brown fox
display h + is xxl
The quick brown fox jumps
display h + is mwaa
The quick brown fox
h xxx large
The quick brown fox
h xx large
The quick brown fox jumps over the lazy dog
h x large
The quick brown fox jumps over the lazy dog
h large
The quick brown fox
jumps over the lazy dog
h medium
The quick brown fox
jumps over the lazy dog
h small
The quick brown fox
jumps over the lazy dog
h x small
The quick brown fox
jumps over the lazy dog
h xx small
The quick brown fox
jumps over the lazy dog
is bold
is 101
The quick brown fox jumps over the lazy dog
is 101
is 101
The quick brown fox jumps over the lazy dog
is 101 bold
is 101 bold
The quick brown fox jumps over the lazy dog
is dot
is dot
The quick brown fox jumps over the lazy dog
is dot bold
is dot bold
The quick brown fox jumps over the lazy dog
paragraphs
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
links
Text Linkquotes
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
lists
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
txt xx large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
txt x large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
txt large
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
txt medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
txt small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
txt x small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
txt xx small
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
is txt center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
is txt right align
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
is txt color 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
is txt color 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
is txt light
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
is txt medium
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
is txt semi bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
is txt bold
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
is txt ital
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
rich text
The quick brown fox jumps over the lazy dog
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The quick brown fox jumps over the lazy dog
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The quick brown fox jumps over the lazy dog
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The quick brown fox jumps over the lazy dog
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The quick brown fox jumps over the lazy dog
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The quick brown fox jumps over the lazy dog
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
- The quick brown fox jumps over the lazy dog
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.
colors
button (primary)
Button Textsecondary button
Button Texttxt button
Button Textframing
For visual balance, all icons (.svg files) should be pre-saved with an invisible frame.
icon large
icon medium
icon small
full img
The parent element will define the size and ratio. This image will simply cover it.
forms
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
section
default section - flex & padded
container
default container - 90 rem
is center
is center (vertically align)
work item (hidden)
work item
work item + hidden (non-selected)
filter link
work item + current (selected)
work item + hidden
d auto
auto div - spreading horizontally
d100
d80
div 80%
d70
div 70%
d60
div 60%
d50
div 50%
d45
div 45%
d40
div 40%
d30
div 30%
d20
div 20%
c2
c2
c2
c3
c3
c3
c3
c4
c4
c4
c4
c4
is max 30
is max 30
is max 40
is max 40
is max 50
is max 50
is max 60
is max 60
is max 80
is max 80
pad top
Content
pad bottom
Content
pad both
Content
pad left
Content
pad right
Content
is 0.125 rem
Content
is 0.25 rem
Content
is 0.5 rem
Content
is 1 rem
Content
is 2 rem
Content
is 3 rem
Content
is 4 rem
Content
is 5 rem
Content
is 6 rem
Content
glossary
design system
ds
navigation
nav
text
txt
paragraph
p
div
d
column
c
wrapper
wrap
image
img
background
bg
dropdown
dd
call-to-action
cta
testimonial
test
number
nb
signature
sig
secondary
sec
horizontal
hor
vertical
vert
combo class (only)
is
full width on tablet
is t full
full width on mobile
is m full
position : relative
rel
position : absolute
abs
overflow : hidden
noverflow
show starting from tablet resolution
is tablet only
show starting from mobile resolution
is mobile only
showing only on desktop
is desktop only
main page wrapper
main
page wrapper which has sticky sections