This repository was archived by the owner on Feb 17, 2025. It is now read-only.
Design System
Note: Colors are ordered from darkest to lightest from 1 - 10 (1 being most dark, 10 being most light).
Note: The numbers in brackets just map to the Material Design codes in the color swatch below. For our purposes, we'll just use the simple 1-10 numbering system.
- primary-1 (900): #0D47A1
- primary-2 (800): #1565C0
- primary-3 (700): #1976D2
- primary-4 (600): #1E88E5
- primary-5 (500): #2196F3
- primary-6 (400): #42A5F5
- primary-7 (300): #64B5F6
- primary-8 (200): #90CAF9
- primary-9 (100): #BBDEFB
- primary-10 (50): #E3F2FD
- secondary-1 (900): #004D40
- secondary-2 (800): #00695C
- secondary-3 (700): #00796B
- secondary-4 (600): #00897B
- secondary-5 (500): #009688
- secondary-6 (400): #26A69A
- secondary-7 (300): #4DB6AC
- secondary-8 (200): #80CBC4
- secondary-9 (100): #B2DFDB
- secondary-10 (50): #E0F2F1
- neutral-1: #102A43
- neutral-2: #243B53
- neutral-3: #334E68
- neutral-4: #416588
- neutral-5: #627D98
- neutral-6: #829AB1
- neutral-7: #9FB3C8
- neutral-8: #BCCCDC
- neutral-9: #D9E2EC
- neutral-10: #F0F4F8
- attention-1: #610316
- attention-2: #8A041A
- attention-3: #AB091E
- attention-4: #CF1124
- attention-5: #E12D39
- attention-6: #EF4E4E
- attention-7: #F86A6A
- attention-8: #FF9B9B
- attention-9: #FFBDBD
- attention-10: #FFE3E3
- notice-1: #8D2B0B
- notice-2: #B44D12
- notice-3: #CB6E17
- notice-4: #DE911D
- notice-5: #F0B429
- notice-6: #F7C948
- notice-7: #FADB5F
- notice-8: #FCE588
- notice-9: #FFF3C4
- notice-10: #FFFBEA
From the above set of numbered colors, the following are a 'semantic' mapping so that we can refer to colors used for specific things instead of directly referring to a numbered color.
- primary: primary-5
- primary-dark: primary-2
- primary-light: primary-9
- secondary: secondary-5
- secondary-dark: secondary-2
- secondary-light: secondary-9
- light: rgba(255, 255, 255, 90%)
- text-primary: neutral-2
- text-secondary: neutral-6
- background-neutral: neutral-4
- background-dark: neutral-2
- background-light: #F0F4F8
- background-white: #FFFFFF
- card-background: #FAFAFA
- attention: attention-5
- attention-dark: attention-1
- attention-light: attention-9
- notice: notice-4
- notice-dark: notice-1
- notice-light: notice-9
We're using Material design, so...
Heading: Roboto
Body: Roboto
