Colors

    An overview of this site's brand colors.

    Action

    Action

    Ultra Light

    Light

    Medium

    Dark

    Ultra Dark

    Comp

    Primary

    Primary

    Ultra Light

    Light

    Medium

    Dark

    Ultra Dark

    Comp

    Secondary

    Secondary

    Ultra Light

    Light

    Medium

    Dark

    Ultra Dark

    Comp

    Accent

    Accent

    Ultra Light

    Light

    Medium

    Dark

    Ultra Dark

    Comp

    Base

    Base

    Ultra Light

    Light

    Medium

    Dark

    Ultra Dark

    Comp

    Shade

    Shade

    Ultra Light

    Light

    Medium

    Dark

    Ultra Dark

    Action

    Trans 10

    Trans 20

    Trans 40

    Trans 60

    Trans 80

    Trans 90

    Primary

    Trans 10

    Trans 20

    Trans 40

    Trans 60

    Trans 80

    Trans 90

    Secondary

    Trans 10

    Trans 20

    Trans 40

    Trans 60

    Trans 80

    Trans 90

    Accent

    Trans 10

    Trans 20

    Trans 40

    Trans 60

    Trans 80

    Trans 90

    Base

    Trans 10

    Trans 20

    Trans 40

    Trans 60

    Trans 80

    Trans 90

    Shade

    Trans 10

    Trans 20

    Trans 40

    Trans 60

    Trans 80

    Trans 90

    Success

    Success

    Success Light

    Success Dark

    Success Hover

    Danger

    Danger

    Danger Light

    Danger Dark

    Danger Hover

    Warning

    Warning

    Warning Light

    Warning Dark

    Warning Hover

    info

    Info

    Info Light

    Info Dark

    Info Hover

    BUTTONS ON LIGHT BACKGROUND

    ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineBaseBase Outline

    BUTTONS ON DARK BACKGROUND

    ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineWhiteWhite Outline
    Button scale
    Button XS
    btn--primary / btn--xs
    Button S
    btn--primary / btn--s
    Button M
    btn--primary / btn--m
    Button L
    btn--primary / btn--l
    Button XL
    btn--primary / btn--xl
    Button XXL
    btn--primary / btn--xxl
    H1 (--xxl)

    Heading 1 Regular

    Heading 1 Medium

    Heading 1 Bold

    H2 (--xl)

    Heading 2 Regular

    Heading 2 Medium

    Heading 2 Bold

    H3 (--l)

    Heading 3 Regular

    Heading 3 Medium

    Heading 3 Bold

    H4 (--m)

    Heading 4 Regular

    Heading 4 Medium

    Heading 4 Bold

    H5 (--s)
    Heading 5 Regular
    Heading 5 Medium
    Heading 5 Bold
    H6 (--xs)
    Heading 6 Regular
    Heading 6 Medium
    Heading 6 Bold
    Body Text
    BODY TEXT (--m)
    Text m Regular
    Text m Medium
    Text m Bold
    SMALL TEXT (--s)
    Text s Regular
    Text s Medium
    Text s Bold
    XTRA SMALL TEXT (--xs)
    Text xs Regular
    Text xs Medium
    Text xs Bold
    Examples

    Heading 1 (H1)

    Heading 2 (H2)

    Heading 3 (H3)

    Heading 4 (H4)

    Heading 5 (H5)
    Heading 6 (H6)
    --width-xs
    --width-s
    --width-m
    --width-l
    --width-xl
    --width-xxl
    None
    XS
    S
    M
    L
    XL
    XXL
    --space-xs
    --space-s
    --space-m
    --space-l
    --space-xl
    --space-xxl

    Card

    This is a card with XS padding. Its content is pretty close to the edges.

    Card

    This is a card with S padding. It has a little bit tighter padding.

    Card

    This is a card with M padding. It has standard breathing room.

    Card

    This is a card with L padding. It has extra breathing room.

    Card

    This is a card with XL padding. It has significant breathing room.

    Card

    This is a card with XXL padding. Avoid using this in a confined space.
    Box shadow M
    Box shadow L
    Box shadow XL
    Rounded XS
    Rounded S
    Rounded M
    Rounded L
    Rounded XL
    Rounded XXL