Styleguide

Buttons

Padding

XS

All breakpoints: 5px

.padding_XS
.padding-top_XS
.padding-bottom_XS
.padding-left_XS
.padding-right_XS

S

All breakpoints: 10px

.padding_S
.padding-top_S
.padding-bottom_S
.padding-left_S
.padding-right_S

M

Base breakpoint: 25px
Mobile portait: 10px

.padding_M
.padding-top_M
.padding-bottom_M
.padding-left_M
.padding-right_M

L

Base breakpoint: 50px
Mobile portait: 25px

.padding_L
.padding-top_L
.padding-bottom_L
.padding-left_L
.padding-right_L

Margin

XS

All breakpoints: 5px

.margin_XS
.margin-top_XS
.margin-bottom_XS
.margin-left_XS
.margin-right_XS

S

All breakpoints: 10px

.margin_S
.margin-top_S
.margin-bottom_S
.margin-left_S
.margin-right_S

M

Base breakpoint: 25px
Mobile portait: 10px

.margin_M
.margin-top_M
.margin-bottom_M
.margin-left_M
.margin-right_M

L

Base breakpoint: 50px
Mobile portait: 25px

.margin_L
.margin-top_L
.margin-bottom_L
.margin-left_L
.margin-right_L

HTML Heading Tags

H1 - 4 REM

Sample text is being used as a placeholder.

H2 - 3 REM

Sample text is being used as a placeholder as real text.

H3 - 2 REM

Sample text helps you understand how real text may look on your website.

H4 - 1.5 REM

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.

H5 - 1.125 REM
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.
H6 - 0.75 REM
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 that is normally present.

Heading Classes

4 rem

heading-xxlarge heading-xxlarge heading-xxlarge

3.3 rem

heading-xlarge heading-xlarge heading-xlarge

2.5 rem

heading-large heading-large heading-large

2 rem

heading-medium heading-medium heading-medium

1.7 rem

heading-regular heading-regular heading-regular heading-regular

1.5 rem

heading-regular heading-regular heading-regular heading-regular

1.25 rem

heading-small heading-small heading-small heading-small heading-small heading-small

0.875 rem

heading-xsmall heading-xsmall heading-xsmall heading-xsmall heading-xsmall heading-xsmall heading-xsmall

Other HTML Tags

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

All Links
All 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.

Text Classes

text-size-large
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.

text-size-medium
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.

text-size-regular
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.

text-size-small
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.

text-size-tiny
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.

text-style-italic

text-style-allcaps
text-style-nowrap
text-style-link
text-style-quote
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.

Powering social experiences for 10M+ end users

Powering social experiences for 10M+ end users

sprscript-green

Powering social experiences for 10M+ end users

List

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

List

  • Easy & quick integration
  • Activity & social feeds
  • Profiles that users can follow
  • Groups & forums
This is some text inside of a div block.

Heading Heading Heading

30M

font-kanit

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.

Text Weights

text-weight-bold
text-weight-semibold
text-weight-medium
text-weight-normal
text-weight-light

Text Alignments

text-align-left
text-align-center
text-align-right

Text Colors

text-color-grey
text-color-grey-4
text-color-grey-5
text-color-black
text-color-green
text-color-white

Backgrounds

Noise
Noise

Borders & Dividers

#d0d0d1

Shadows

Box shadows
Angle: 180 DEG
Distance: 16px
Blur: 2 REM
Size: 0px
Color: rgba(18, 20, 25, 0.16) or
Color: rgba(18, 20, 25, 0.08)

On hover

Box shadows
Angle: 180 DEG
Distance: 16px
Blur: 2 REM
Size: 0px
Color: rgba(18, 20, 25, 0.16)

Transition
Duration: 200 MS
Easing: Ease

Color Palette

Primary brand colors

Amity Dark
#121419
Amity Green
#1dc497

Secondary colors

Amity Yellow
#ffd500
Yellow Secondary
#ffcd1a
Amity Red
#ff305a
Red Secondary
#ff456b
Amity Blue
#2865e1

Grey scales

Grey 1
#f5f5f5
Grey 2
#f7f8f9
Grey 3
#e7e7e7
Grey 6
#f9f9f9

Containers

Diverse

max-ch-12
max-ch-17
max-ch-19
max-ch-20
max-ch-22
max-ch-25
max-ch-28
max-ch-32
max-ch-37
max-ch-48
max-ch-55
max-ch-64
hide-tablet
hide-mobile-portrait
hide-mobile-landscape
z-index_1
z-index_2
z-index_3
z-index_4
line-numbers
Button Text