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
| 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
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
06. Links
Links of navigation
07. Inputs
Checkbox
Password
08. Avatars
User profile photo
Blue Smilyface
