Color tokens in a design system are named colors that are used to define the visual style of a userInterface. They provide a consistent, standardized palette of colors that can be used throughout the design system, ensuring that the userInterface has a cohesive and cohesive visual style.
Color tokens are typically defined in a design system's style guide or documentation, along with usage examples and guidelines. This allows designers and developers to easily access and use the color tokens in their designs and code.
In addition to providing a consistent visual style, color tokens can also help to improve the accessibility of a userInterface. By using color tokens, designers and developers can ensure that the colors used in the userInterface have sufficient contrast and are legible for users with low vision or color blindness.
Overall, color tokens are an essential part of a design system, providing a flexible and powerful tool for defining the visual style of a userInterface.
| breakpoint | |||
| --nile-breakpoint-small | 22.5rem |
|
|
| --nile-breakpoint-medium | 48rem |
|
|
| --nile-breakpoint-large | 66rem |
|
|
| --nile-breakpoint-xlarge | 85rem |
|
|
| --nile-breakpoint-max | 99rem |
|
|
| colors | |||
|
|
--nile-colors-primary-100 | rgba(0, 94, 166, 0.1) |
|
|
|
--nile-colors-primary-400 | rgba(0, 94, 166, 0.25) |
|
|
|
--nile-colors-primary-500 | #80AED3 |
|
|
|
--nile-colors-primary-600 | #005EA6 |
|
|
|
--nile-colors-primary-700 | #005291 |
|
|
|
--nile-colors-primary-900 | #002F53 |
|
|
|
--nile-colors-dark-100 | rgba(0, 0, 0, 0.1) |
|
|
|
--nile-colors-dark-200 | #F5F7F7 |
|
|
|
--nile-colors-dark-500 | #7F7F7F |
|
|
|
--nile-colors-dark-900 | #000000 |
|
|
|
--nile-colors-red-100 | #FEF6F7 |
|
|
|
--nile-colors-red-400 | #F3A5AA |
|
|
|
--nile-colors-red-500 | #E5434D |
|
|
|
--nile-colors-red-700 | #A4121C |
|
|
|
--nile-colors-blue-100 | #F5FAFE |
|
|
|
--nile-colors-blue-400 | #A5D3F3 |
|
|
|
--nile-colors-blue-500 | #42A3E5 |
|
|
|
--nile-colors-blue-700 | #1978B8 |
|
|
|
--nile-colors-yellow-100 | #FEFCF6 |
|
|
|
--nile-colors-yellow-400 | #F3E0A5 |
|
|
|
--nile-colors-yellow-500 | #E5BF43 |
|
|
|
--nile-colors-yellow-700 | #B89219 |
|
|
|
--nile-colors-green-100 | #F6FEFC |
|
|
|
--nile-colors-green-400 | #A5F3E1 |
|
|
|
--nile-colors-green-500 | #43E5C0 |
|
|
|
--nile-colors-green-700 | #19B893 |
|
|
|
--nile-colors-neutral-100 | #FAFAFA |
|
|
|
--nile-colors-neutral-400 | #E6E9EB |
|
|
|
--nile-colors-neutral-500 | #C7CED4 |
|
|
|
--nile-colors-neutral-700 | #777D82 |
|
|
|
--nile-colors-white-200 | rgba(255, 255, 255, 0.2) |
|
|
|
--nile-colors-white-500 | rgba(255, 255, 255, 0.5) |
|
|
|
--nile-colors-white-base | #FFFFFF |
|
| line-height | |||
| --nile-line-height-xsmall | 1rem |
|
|
| --nile-line-height-small | 1.25rem |
|
|
| --nile-line-height-medium | 1.5rem |
|
|
| --nile-line-height-large | 1.75rem |
|
|
| --nile-line-height-xlarge | 2.25rem |
|
|
| --nile-line-height-heading-large | 1 |
|
|
| --nile-line-height-text-base-condensed | 1.25rem |
|
|
| radius | |||
|
|
--nile-radius-base-standard | 4px |
|
| --nile-radius-radius-none | 0px |
|
|
| --nile-radius-radius-xxs | 2px |
|
|
| --nile-radius-radius-xs | 4px |
|
|
| --nile-radius-radius-sm | 4px |
|
|
| --nile-radius-radius-md | 4px |
|
|
| --nile-radius-radius-lg | 6px |
|
|
| --nile-radius-radius-xl | 8px |
|
|
| --nile-radius-radius-2xl | 10px |
|
|
| --nile-radius-radius-3xl | 12px |
|
|
| --nile-radius-radius-4xl | 16px |
|
|
| --nile-radius-radius-full | 9999px |
|
|
| sizes | |||
| --nile-sizes-width-xxs | 320px |
|
|
| --nile-sizes-width-xs | 384px |
|
|
| --nile-sizes-width-sm | 480px |
|
|
| --nile-sizes-width-md | 560px |
|
|
| --nile-sizes-width-lg | 640px |
|
|
| --nile-sizes-width-xl | 768px |
|
|
| --nile-sizes-width-2xl | 1024px |
|
|
| --nile-sizes-width-3xl | 1280px |
|
|
| --nile-sizes-width-4xl | 1440px |
|
|
| --nile-sizes-width-5xl | 1600px |
|
|
| --nile-sizes-width-6xl | 1920px |
|
|
| --nile-sizes-paragraph-max-width | 720px |
|
|
| spacing | |||
| --nile-spacing-one-half-x | 3px |
|
|
| --nile-spacing-1-x | 6px |
|
|
| --nile-spacing-2-x | 12px |
|
|
| --nile-spacing-3-x | 24px |
|
|
| --nile-spacing-5-x | 48px |
|
|
| --nile-spacing-7-x | 96px |
|
|
| --nile-spacing-gutter | 24px |
|
|
| --nile-spacing-spacing-none | 0px |
|
|
| --nile-spacing-spacing-xxs | 2px |
|
|
| --nile-spacing-spacing-xs | 4px |
|
|
| --nile-spacing-spacing-sm | 6px |
|
|
| --nile-spacing-spacing-md | 8px |
|
|
| --nile-spacing-spacing-lg | 12px |
|
|
| --nile-spacing-spacing-xl | 16px |
|
|
| --nile-spacing-spacing-2xl | 20px |
|
|
| --nile-spacing-spacing-3xl | 24px |
|
|
| --nile-spacing-spacing-4xl | 32px |
|
|
| --nile-spacing-spacing-5xl | 40px |
|
|
| --nile-spacing-spacing-6xl | 48px |
|
|
| --nile-spacing-spacing-7xl | 64px |
|
|
| --nile-spacing-spacing-8xl | 80px |
|
|
| --nile-spacing-spacing-9xl | 96px |
|
|
| --nile-spacing-spacing-10xl | 128px |
|
|
| --nile-spacing-spacing-11xl | 160px |
|
|
| --nile-spacing-none | 0px |
|
|
| --nile-spacing-xxs | 2px |
|
|
| --nile-spacing-xs | 4px |
|
|
| --nile-spacing-sm | 6px |
|
|
| --nile-spacing-md | 8px |
|
|
| --nile-spacing-lg | 12px |
|
|
| --nile-spacing-xl | 16px |
|
|
| --nile-spacing-2xl | 20px |
|
|
| --nile-spacing-3xl | 24px |
|
|
| --nile-spacing-4xl | 32px |
|
|
| --nile-spacing-5xl | 40px |
|
|
| --nile-spacing-6xl | 48px |
|
|
| --nile-spacing-7xl | 64px |
|
|
| --nile-spacing-8xl | 80px |
|
|
| --nile-spacing-9xl | 96px |
|
|
| --nile-spacing-10xl | 128px |
|
|
| --nile-spacing-11xl | 160px |
|
|
| transition | |||
| --nile-transition-base | 250ms cubic-bezier(0.17, 0.67, 0.83, 0.67) |
|
|
|
|
--nile-transition-duration-shorter | 50ms |
|
|
|
--nile-transition-duration-short | 100ms |
|
|
|
--nile-transition-duration-default | 250ms |
|
|
|
--nile-transition-duration-long | 500ms |
|
|
|
--nile-transition-duration-longer | 1000ms |
|
|
|
--nile-transition-curve-base | cubic-bezier(0.17, 0.67, 0.83, 0.67) |
|
| type | |||
|
|
--nile-type-scale-1 | 10.24 |
|
|
|
--nile-type-scale-2 | 12 |
|
|
|
--nile-type-scale-3 | 14 |
|
|
|
--nile-type-scale-4 | 16 |
|
|
|
--nile-type-scale-5 | 18 |
|
|
|
--nile-type-scale-6 | 20 |
|
|
|
--nile-type-scale-7 | 31.25 |
|
|
|
--nile-type-scale-8 | 39.06 |
|
|
|
--nile-type-scale-9 | 48.83 |
|
| font | |||
|
|
--nile-font-family-sans-serif | colfax-regular, Helvetica, Helvetica Neue, Arial, Segoe UI, Roboto, Droid Sans, sans-serif |
|
|
|
--nile-font-family-serif | colfax-regular, Times, Georgia, serif |
|
|
|
--nile-font-family-serif-colfax-medium | colfax-medium, Times, Georgia, serif |
|
|
|
--nile-font-family-medium | colfax-medium |
|
|
|
--nile-font-family-body | colfax-regular, Helvetica, Helvetica Neue, Arial, Segoe UI, Roboto, Droid Sans, sans-serif |
|
|
|
--nile-font-weight-regular | 400 |
|
|
|
--nile-font-weight-medium | 500 |
|
|
|
--nile-font-weight-semi-bold | 600 |
|
|
|
--nile-font-weight-bold | 700 |
|
|
|
--nile-font-size-micro | 10.24 |
|
|
|
--nile-font-size-small | 12 |
|
|
|
--nile-font-size-base | 14 |
|
|
|
--nile-font-size-large | 18 |
|
|
|
--nile-font-size-xlarge | 20 |
|