Colors
Brand Colors (Animalia)#
| Token | Amostra | HEX |
|---|---|---|
| --color-brand-01-lightest | #EBEBF5 | |
| --color-brand-01-lighter | #C2C2E5 | |
| --color-brand-01-light | #9898CD | |
| --color-brand-01-base | #4545A1 | |
| --color-brand-01-dark | #1F1F7A | |
| --color-brand-01-darker | #0D0D59 | |
| --color-brand-01-darkest | #030330 |
Action Color#
| Token | Amostra | Valor padrão |
|---|---|---|
| --color-action-default | color-brand-01-base | |
| --color-action-hover | color-brand-01-dark | |
| --color-action-pressed | color-brand-01-darker | |
| --color-action-disabled | color-neutral-light-30 | |
| --color-action-focus | color-brand-01-darkest |
Neutral Colors#
Light#
| Token | Amostra | HEX |
|---|---|---|
| --color-neutral-light-00 | #FFF | |
| --color-neutral-light-05 | #F9F9FA | |
| --color-neutral-light-10 | #ECECEE | |
| --color-neutral-light-20 | #D0D0D7 | |
| --color-neutral-light-30 | #B4B4C0 |
Mid#
| Token | Amostra | HEX |
|---|---|---|
| --color-neutral-mid-40 | #9191A1 | |
| --color-neutral-mid-60 | #69697C |
Dark#
| Token | Amostra | HEX |
|---|---|---|
| --color-neutral-dark-70 | #515162 | |
| --color-neutral-dark-80 | #36364A | |
| --color-neutral-dark-90 | #1D1D30 | |
| --color-neutral-dark-95 | #060613 |
Feedback Colors#
Positive#
| Token | Amostra | HEX |
|---|---|---|
| --color-feedback-positive-lightest | #DEF7ED | |
| --color-feedback-positive-lighter | #7ECEAD | |
| --color-feedback-positive-light | #41B483 | |
| --color-feedback-positive-base | #107048 | |
| --color-feedback-positive-dark | #0F5236 | |
| --color-feedback-positive-darker | #083A25 | |
| --color-feedback-positive-darkest | #002415 |
Negative#
| Token | Amostra | HEX |
|---|---|---|
| --color-feedback-negative-lightest | #F6E6E5 | |
| --color-feedback-negative-lighter | #E3AEAB | |
| --color-feedback-negative-light | #D58581 | |
| --color-feedback-negative-base | #BE3E37 | |
| --color-feedback-negative-dark | #9B2D27 | |
| --color-feedback-negative-darker | #72211D | |
| --color-feedback-negative-darkest | #4A1512 |
Warning#
| Token | Amostra | HEX |
|---|---|---|
| --color-feedback-warning-lightest | #FCF6E3 | |
| --color-feedback-warning-lighter | #F7DD97 | |
| --color-feedback-warning-light | #F1CD6A | |
| --color-feedback-warning-base | #EFBA2A | |
| --color-feedback-warning-dark | #D8A20E | |
| --color-feedback-warning-darker | #705200 | |
| --color-feedback-warning-darkest | #473400 |
Info#
| Token | Amostra | HEX |
|---|---|---|
| --color-feedback-info-lightest | #E3E9F7 | |
| --color-feedback-info-lighter | #B0C1E8 | |
| --color-feedback-info-light | #7996D7 | |
| --color-feedback-info-base | #23489F | |
| --color-feedback-info-dark | #173782 | |
| --color-feedback-info-darker | #0F2557 | |
| --color-feedback-info-darkest | #081536 |