01. Colors

    • CfA Black
    • #192127
    • $black
    • CfA Blue
    • #2c9cf2
    • $primary-color
    • CfA Red
    • #e25c43
    • $secondary-color
    • CfA Dark Gray
    • #72797e
    • $gray-1
    • CfA Gray 2
    • #afbac4
    • $gray-2
    • CfA Gray 3
    • #bbc1c6
    • $gray-3
    • CfA Light Gray
    • #e3e5e9
    • $gray-4
    • CfA Light Gray
    • #f7f9fc
    • $gray-5

02. Typography

Glyph

Aa

Weights

  • Regular
  • Regular Italic
  • Bold
  • Bold Italic
Style Desktop Tablet Mobile Line-height

H1

48px 40px 36px 1.2

H2

36px 32px 28px 1.2

H3

28px 28px 24px 1.2

H4

14px 14px 14px 1.5
H5
13px 13px 13px 1.4
H5
12px 12px 12px 1.4
Action/Button 13px 13px 13px 1
Paragraph text 15px 15px 15px 1.6
Small text 14px 14px 14px 1.4

03. Buttons

Default button

Link Button

Primary button


Negative button


04. Form Elements

Input field

Text area


Validation message on 1 column form

Icorrect email address/password combination.

Please enter a valid email.

  • Email extention missing.
  • Password at least 6 characteres.

Validation message on 2 column form

Icorrect email address/password combination.

Please enter valid email.

  • Email extention missing.
  • Password at least 6 characteres.

05. Icons

  • Liked
  • Unlike
  • Done
  • Edit
  • Trash
  • Add
  • Search

Links of navigation


07. Inputs

Checkbox

Email

Password


08. Avatars

User profile photo

avatar

Blue Smilyface

avatar

09. Tags

Swimming tag

Nature tag

Vacation tag

Travel tag

Another tag