email@cgdetroit.com
1-800-872-4614
Styleguide
Colors
Neutral
The primary color palette is used across all the interactive elements such as CTA’s, links, inputs, active states, etc
neutral-50
#F7F8F9
color-neutral-50
bg-neutral-50
neutral-100
#E7EAEE
color-neutral-100
bg-neutral-100
neutral-200
#D0D5DD
color-neutral-200
bg-neutral-200
neutral-300
#B8C0CC
color-neutral-300
bg-neutral-300
neutral-400
#A0ABBB
color-neutral-400
bg-neutral-400
neutral-500
#64748B
color-neutral-500
bg-neutral-500
neutral-600
#4B5768
color-neutral-600
bg-neutral-600
neutral-700
#323A46
color-neutral-700
bg-neutral-700
neutral-800
#191D23
color-neutral-800
bg-neutral-800
neutral-900
#0D0F11
color-neutral-900
bg-neutral-900
Dark Mode
Dark mode background
dark-mode-50
#3A3C43
color-dark-mode-50
bg-dark-mode-50
dark-mode-100
#373A41
color-dark-mode-100
bg-dark-mode-100
dark-mode-200
#35373E
color-dark-mode-200
bg-dark-mode-200
dark-mode-300
#30333A
color-dark-mode-300
bg-dark-mode-300
dark-mode-400
#2E3138
color-dark-mode-400
bg-dark-mode-400
dark-mode-500
#292C33
color-dark-mode-500
bg-dark-mode-500
dark-mode-600
#272A31
color-dark-mode-600
bg-dark-mode-600
dark-mode-700
#24272F
color-dark-mode-700
bg-dark-mode-700
dark-mode-800
#20232A
color-dark-mode-800
bg-dark-mode-800
dark-mode-900
#14171F
color-dark-mode-900
bg-dark-mode-900
Primary
The primary color palette is used across all the interactive elements such as CTA’s, links, inputs, active states, etc
primary-50
#FFC39E
color-primary-50
bg-primary-50
primary-100
#FAA470
color-primary-100
bg-primary-100
primary-200
#F08E53
color-primary-200
bg-primary-200
primary-300
#E98244
color-primary-300
bg-primary-300
primary-400
#E2712D
color-primary-400
bg-primary-400
primary-500
#DD5F13
color-primary-500
bg-primary-500
primary-600
#D0550A
color-primary-600
bg-primary-600
primary-700
#AC4709
color-primary-700
bg-primary-700
primary-800
#8C3A07
color-primary-800
bg-primary-800
primary-900
#572404
color-primary-900
bg-primary-900
Success
These colors depict an emotion of positivity. Generally used across success states.
success-50
#ECFDF5
color-success-50
bg-success-50
success-100
#D1FAE5
color-success-100
bg-success-100
success-200
#A7F3D0
color-success-200
bg-success-200
success-300
#6EE7B7
color-success-300
bg-success-300
success-400
#34D399
color-success-400
bg-success-400
success-500
#10B981
color-success-500
bg-success-500
success-600
#059669
color-success-600
bg-success-600
success-700
#047857
color-success-700
bg-success-700
success-800
#065F46
color-success-800
bg-success-800
success-900
#064E3B
color-success-900
bg-success-900
Warning
These colors are used to bring a user's attention to an element. Generally used across warning states.
warning-50
#FFFBEB
color-warning-50
bg-warning-50
warning-100
#FEF3C7
color-warning-100
bg-warning-100
warning-200
#FDE68A
color-warning-200
bg-warning-200
warning-300
#FCD34D
color-warning-300
bg-warning-300
warning-400
#FBBF24
color-warning-400
bg-warning-400
warning-500
#F59E0B
color-warning-500
bg-warning-500
warning-600
#D97706
color-warning-600
bg-warning-600
warning-700
#B45309
color-warning-700
bg-warning-700
warning-800
#92400E
color-warning-800
bg-warning-800
warning-900
#78350F
color-warning-900
bg-warning-900
Errors
These colors depict an emotion of negativity. Generally used across error states.
danger-50
#FEF2F2
color-danger-50
bg-danger-50
danger-100
#FEE2E2
color-danger-100
bg-danger-100
danger-200
#FECACA
color-danger-200
bg-danger-200
danger-300
#FCA5A5
color-danger-300
bg-danger-300
danger-400
#F87171
color-danger-400
bg-danger-400
danger-500
#EF4444
color-danger-500
bg-danger-500
danger-600
#DC2626
color-danger-600
bg-danger-600
danger-700
#B91C1C
color-danger-700
bg-danger-700
danger-800
#991B1B
color-danger-800
bg-danger-800
danger-900
#7F1D1D
color-danger-900
bg-danger-900
Shades
These colors are used as supporting secondary colors in backgrounds, text colors, seperators, models, etc
black
#000000
color-black
bg-black
white
#FFFFFF
color-white
bg-white