Fundamento · 01
Cores
As cores consistente reforça a experiência em todos os produtos e distiguem e representam a marca da empresa. Defina cores primárias, secundárias, de destaque e neutras, juntamente com as respectivas aplicações.
Primary
Primary Darker
HSL hsl(218, 76%, 30%) HEX #123D87
color-primary-darker Primary Dark
HSL hsl(218, 86%, 40%) HEX #0E4FBE
color-primary-dark Primary
HSL hsl(218, 87%, 49%) HEX #1060EA
color-primary Primary Light
HSL hsl(218, 87%, 64%) HEX #538EF3
color-primary-light Primary Lighter
HSL hsl(218, 88%, 82%) HEX #A9C6F9
color-primary-lighter Accent
Accent Darker
HSL hsl(174, 100%, 26%) HEX #008577
color-accent-darker Accent Dark
HSL hsl(174, 100%, 32%) HEX #00A393
color-accent-dark Accent
HSL hsl(174, 100%, 38%) HEX #00C2AE
color-accent Accent Light
HSL hsl(174, 96%, 44%) HEX #04DCC6
color-accent-light Accent Lighter
HSL hsl(174, 96%, 80%) HEX #9BFDF3
color-accent-lighter Warning
Warning Darker
HSL hsl(39, 92%, 38%) HEX #BA7C08
color-warning-darker Warning Dark
HSL hsl(39, 92%, 44%) HEX #D78F09
color-warning-dark Warning
HSL hsl(39, 92%, 50%) HEX #F5A30A
color-warning Warning Light
HSL hsl(39, 92%, 56%) HEX #F6AE28
color-warning-light Warning Lighter
HSL hsl(39, 92%, 62%) HEX #F7B945
color-warning-lighter Success
Success Darker
HSL hsl(142, 76%, 24%) HEX #0F6C31
color-success-darker Success Dark
HSL hsl(142, 76%, 30%) HEX #12873D
color-success-dark Success
HSL hsl(142, 76%, 36%) HEX #16A249
color-success Success Light
HSL hsl(142, 76%, 42%) HEX #1ABC55
color-success-light Success Lighter
HSL hsl(142, 76%, 48%) HEX #1DD762
color-success-lighter Error
Error Darker
HSL hsl(0, 72%, 39%) HEX #AB1C1C
color-error-darker Error Dark
HSL hsl(0, 72%, 45%) HEX #C52020
color-error-dark Error
HSL hsl(0, 72%, 51%) HEX #DC2828
color-error Error Light
HSL hsl(0, 72%, 57%) HEX #E04242
color-error-light Error Lighter
HSL hsl(0, 72%, 63%) HEX #E55D5D
color-error-lighter Black
Black
HSL hsl(230, 13%, 9%) HEX #14151A
color-black White
White
HSL hsl(0, 0%, 100%) HEX #FFFFFF
color-white Bg
Bg Darker
HSL hsl(240, 4%, 90%) HEX #E4E4E7
color-bg-darker Bg Dark
HSL hsl(240, 4%, 95%) HEX #F2F2F3
color-bg-dark Bg
HSL hsl(0, 0%, 100%) HEX #FFFFFF
color-bg Bg Light
HSL hsl(0, 0%, 100%) HEX #FFFFFF
color-bg-light Bg Lighter
HSL hsl(0, 0%, 100%) HEX #FFFFFF
color-bg-lighter Contrast
Contrast Lower
HSL hsl(240, 4%, 85%) HEX #D7D7DA
color-contrast-lower Contrast Low
HSL hsl(240, 4%, 65%) HEX #A2A2A9
color-contrast-low Contrast Medium
HSL hsl(225, 4%, 47%) HEX #73757D
color-contrast-medium Contrast High
HSL hsl(230, 7%, 23%) HEX #37383F
color-contrast-high Contrast Higher
HSL hsl(230, 13%, 9%) HEX #14151A
color-contrast-higher Tokens semânticos
| Token | Valor | Uso |
|---|---|---|
--color-bg | #FFFFFF | Fundo principal |
Acessibilidade
Todos os pares texto/superfície atingem WCAG AA (≥ 4.5:1).