Primitive colors
Our design system leverages a purposeful set of color styles as the perfect starting point for any brand or project. When it comes to color, contrast is critical for ensuring text is legible. We've added WCAG 2.2 contrast ratios to our color system so you can make sure you're designing with accessibility in mind.
Our color system uses a two-level approach. Primitive colors (e.g., purple-500) define our core brand palette but should never be used directly in components. Instead, always use semantic tokens (e.g., catnip-color-background-primary-strong). These tokens provide context and are mapped to primitive colors, ensuring brand consistency and making our system easier to maintain and theme.
Implementation: Primitive scales from Figma live in @signicat/catnip-design-tokens as --catnip-color-* variables (for example steel, grey, brand, purple, red, blue, green, orange). See the live list with samples on Color tokens.
Base colors
Our base colors are pure black and white.
Neutral colors
We have three specific neutral palettes: Grey, Steel, and Graphite. These colors are applied to surfaces, buttons, text, outline and layout elements.
Branded and complimentary colors
The table below includes a visual representation of each color, along with its color code, hexadecimal notation, and a plain white or black foreground color contrast ratio against background. Tone values range from 950 (dark) to 25 (light). Everything in between is the tones going from the darkest to the lightest color. Complemntary color include blue, orange and red colors.
To achieve theming:
- Purple color pallete is used as the branded color tokens for Signicat theme.
- Blue color pallete is used as the branded color tokens for EndUI theme.
Accessibility
Ensuring that colors across all our digital platforms are accessible is crucial for providing an inclusive experience. Here are some guidelines to follow:
- Ensure text is easily readable against its background, ensuring minimum contrast of 4.5:1 for texts and 3:1 for larger text and graphics such as icons. High contrast also can lead to glare.
- Color alone should not convey important information. Use additional cues (such as text labels or icons) to ensure everyone can understand the content.