UI Style Guide
Client Name
Typography
This is a H1 Headline
This is a H2 Headline
This is a H3 Headline
This is a H4 Headline
This is a H5 Headline
This is a H6 Headline
This is paragraph text
Colors
- primary-l-1
- primary-l-2
- primary-l-3
- primary-l-4
- primary-l-5
- primary-l-6
- primary-l-7
- primary-l-8
- primary-d-1
- primary-d-2
- primary-d-3
- primary-d-4
- primary-d-5
- primary-d-5
- primary-d-6
- primary-d-7
primary
- primary-90
- primary-80
- primary-70
- primary-60
- primary-50
- primary-40
- primary-30
- primary-20
- primary-10
- secondary-l-1
- secondary-l-2
- secondary-l-3
- secondary-l-4
- secondary-l-5
- secondary-l-6
- secondary-l-7
- secondary-l-8
- secondary-d-1
- secondary-d-2
- secondary-d-3
- secondary-d-4
- secondary-d-5
- secondary-d-6
- secondary-d-7
- secondary-d-8
secondary
- secondary-90
- secondary-80
- secondary-70
- secondary-60
- secondary-50
- secondary-40
- secondary-30
- secondary-20
- secondary-10
- tertiary-l-1
- tertiary-l-2
- tertiary-l-3
- tertiary-l-4
- tertiary-l-5
- tertiary-l-6
- tertiary-l-7
- tertiary-l-8
- tertiary-d-1
- tertiary-d-2
- tertiary-d-3
- tertiary-d-4
- tertiary-d-5
- tertiary-d-6
- tertiary-d-7
- tertiary-d-8
tertiary
- tertiary-90
- tertiary-80
- tertiary-70
- tertiary-60
- tertiary-50
- tertiary-40
- tertiary-30
- tertiary-20
- tertiary-10
- base-d-1
- base-d-2
- base-d-3
- base-d-4
- base-d-5
- base-d-6
- base-d-7
- base-d-8
base
- base-90
- base-80
- base-70
- base-60
- base-50
- base-40
- base-30
- base-20
- base-10
- shade-d-1
- shade-d-2
- shade-d-3
- shade-d-4
- shade-d-5
- shade-d-6
- shade-d-7
- shade-d-8
shade
- shade-90
- shade-80
- shade-70
- shade-60
- shade-50
- shade-40
- shade-30
- shade-20
- shade-10
- dark
- black
- light
- white
Buttons
- Primary - LargePrimary - RegularPrimary - SmallPrimary - X Small
- Secondary - LargeSecondary - RegularSecondary - SmallSecondary - X Small
- Tertiary - LargeTertiary - RegularTertiary - SmallTertiary - X Small
- Light - LargeLight - RegularLight - SmallLight - X Small
- Slight - LargeSlight - RegularSlight - SmallSlight - X Small
- Ghost - LargeGhost - RegularGhost - SmallGhost - X Small
Cards
Primary Card
Here's something amazing about this card. It may not sound that amazing, but it definitely is!
Secondary Card
Here's something amazing about this card. It may not sound that amazing, but it definitely is!
Tertiary Card
Here's something amazing about this card. It may not sound that amazing, but it definitely is!
Base Card
Here's something amazing about this card. It may not sound that amazing, but it definitely is!
Shade Card
Here's something amazing about this card. It may not sound that amazing, but it definitely is!
Light Card
Here's something amazing about this card. It may not sound that amazing, but it definitely is!
Dark Card
Here's something amazing about this card. It may not sound that amazing, but it definitely is!