Tokens
Updated color and token system is applied for new ID and face capture modules
Android: Releases after 5.33
iOS: Releases after 5.32
Web: In progress
Primitive tokens
Primitive tokens are predefined, reusable color, spacing, or typography values that serve as the foundation for creating design systems and are referenced by semantic tokens to maintain consistency across the design. When customizing our platform, it's enough for you to define your color pallete in the primitives (brand, brand secondary, grays, positive, negative, warn, and neutral colors) which are referenced in semantic and component tokens.
Accessibility notice
All colors used in the product align with WCAG guidelines for color contrast. When customizing colors, make sure that the updates align with the guidelines, by following the recommended contrast ratio of at least 4.5:1 for normal text and 3:1 for large text.
Brand
Used for the main brand color in the product. Used in primary buttons and accents across the product.
| Color | HEX | RGB |
|---|---|---|
| brand.50 | #e5f0ff | rgb(229, 240, 255) |
| brand.200 | #99ceff | rgb(153, 206, 255) |
| brand.300 | #66a6ff | rgb(102, 166, 255) |
| brand.400 | #3388ff | rgb(51, 136, 255) |
| brand.500 | #006aff | rgb(0, 106, 255) |
| brand.600 | #0055cc | rgb(0, 85, 204) |
| brand.900 | #21273b | rgb(33, 39, 59) |
Brand Secondary
Used for the secondary brand color in the product, for complementing the brand.
| Color | HEX | RGB |
|---|---|---|
| brand.secondary.50 | #f2e2fe | rgb(242, 226, 254) |
| brand.secondary.500 | #820ad1 | rgb(130, 10, 209) |
Gray
Used for input fields, text, background, etc.
| Color | HEX | RGB |
|---|---|---|
| Color.Gray.50 | #fcfcfd | rgb(252, 252, 253) |
| Color.Gray.100 | #ebecef | rgb(235, 236, 239) |
| Color.Gray.200 | #c6c8d2 | rgb(198, 200, 210) |
| Color.Gray.300 | #a3a8b8 | rgb(163, 168, 184) |
| Color.Gray.500 | #60667c | rgb(96, 102, 124) |
| Color.Gray.700 | #3a3e4b | rgb(58, 62, 75) |
| Color.Gray.800 | #262831 | rgb(38, 40, 49) |
| Color.Gray.900 | #14151a | rgb(20, 21, 26) |
Positive
Used for positive actions, like success screens.
| Color | HEX | RGB |
|---|---|---|
| Color.Positive.50 | #e4fbf0 | rgb(228, 251, 240) |
| Color.Positive.600 | #189f60 | rgb(24, 159, 96) |
| Color.Positive.800 | #0c5030 | rgb(12, 80, 48) |
Warn
Used for warn actions, like disabling permissions.
| Color | HEX | RGB |
|---|---|---|
| Color.Warn.50 | #fff7eb | rgb(255, 247, 235) |
| Color.Warn.400 | #ffb647 | rgb(255, 182, 71) |
| Color.Warn.500 | #ff9900 | rgb(255, 153, 0) |
| Color.Warn.950 | #523100 | rgb(82, 49, 0) |
Negative
Used in negative, destructive actions, like error and deletion feedback and actions.
| Color | HEX | RGB |
|---|---|---|
| Color.Negative.50 | #fff0f0 | rgb(255, 240, 240) |
| Color.Negative.500 | #ff5a5f | rgb(255, 90, 95) |
| Color.Negative.600 | #e71111 | rgb(231, 17, 17) |
| Color.Negative.950 | #240001 | rgb(36, 0, 1) |
Neutral
Used in background colors for the whole screen, and text color.
| Color | HEX | RGB |
|---|---|---|
| color.neutral.dark | #000000 | rgb(0, 0, 0) |
| brand.neutral.light | ##ffffff | rgb(255, 255, 255) |
Updated 21 days ago