SP28K - 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

h xx large

The quick brown fox

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

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.

quotes
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.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  3. 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.

This is the image capture text
  • 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
  1. The quick brown fox jumps over the lazy dog
  2. The quick brown fox jumps over the lazy dog
  3. 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 Text
secondary button
Button Text
txt button
Button Text
framing

For visual balance, all icons (.svg files) should be pre-saved with an invisible frame.

icon large
icon medium
icon small
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 max 80
is max 80 rem
is max 64
is max 64 rem
is center
is center (vertically align)
d auto
auto div - spreading horizontally
d100
div 100%
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
max width 30
is max 40
max width 40
is max 50
max width 50
is max 60
max width 60
pad top
Content
pad bottom
Content
pad both
Content
pad left
Content
pad right
Content
is quarter rem
Content
is half 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

overflow main