044 222 33 222

Advanced Themer Style Guide

Componentized ATF Styleguide

Body & Headings

  • Body
    Value

  • Heading 1

    Value

  • Heading 2

    Value

  • Heading 3

    Value

  • Heading 4

    Value
  • Heading 5
    Value
  • Heading 6
    Value

Text

  • --at-text--2xl
    Value
  • --at-text--xl
    Value
  • --at-text--l
    Value
  • --at-text--m
    Value
  • --at-text--s
    Value
  • --at-text--xs
    Value
  • --at-text--2xs
    Value

General Scale

  • --at-space--3xs
    .
  • --at-space--2xs
    .
  • --at-space--xs
    .
  • --at-space--s
    .
  • --at-space--m
    .
  • --at-space--l
    .
  • --at-space--xl
    .
  • --at-space--2xl
    .
  • --at-space--3xl
    .

Primary

Base

#

l-1

#

l-2

#

l-3

#

l-4

#

l-5

#

l-6

#

d-1

#

d-2

#

d-3

#

d-4

#

d-5

#

d-6

#

t-1

#

t-2

#

t-3

#

t-4

#

t-5

#

t-6

#

Secondary

Base

#

l-1

#

l-2

#

l-3

#

l-4

#

l-5

#

l-6

#

d-1

#

d-2

#

d-3

#

d-4

#

d-5

#

d-6

#

t-1

#

t-2

#

t-3

#

t-4

#

t-5

#

t-6

#

Neutral

Base

#

l-1

#

l-2

#

l-3

#

l-4

#

l-5

#

l-6

#

d-1

#

d-2

#

d-3

#

d-4

#

d-5

#

d-6

#

t-1

#

t-2

#

t-3

#

t-4

#

t-5

#

t-6

#

Button Primary

NormalOutlineJust the Link

Button Secondary

NormalOutline
44 44 44 44

44 444 44444

I am a buttonI am a button
044 222 33 222

Here goes your text … Select any part of your text to access the formatting toolbar.

Here goes your text … Select any part of your text to access the formatting toolbar.