Colors
Define the color palette, semantic roles, and theming structure that power the Tendoo Design System.
Colors
Color is a core component of the Tendoo visual language. It conveys meaning, establishes visual hierarchy, enhances usability, and strengthens brand recognition. Our system employs a flexible palette structure, powered by semantic roles and design tokens, to ensure consistency across both light and dark themes.
Palette Structure
The color system is divided into:
- Brand colors — Primary colors that define Tendoo’s visual identity.
- Neutral colors — Grayscale shades for surfaces, text, and borders.
- Semantic colors — Used to convey status or intent (e.g. success, warning, error).
- Accent colors — Optional colors used to highlight or differentiate UI elements.
Semantic Colors
| Role | Token | Example Usage |
|---|---|---|
| Primary | color.primary | Buttons, links, active states |
| Secondary | color.secondary | Secondary actions |
| Success | color.success | Confirmation messages |
| Warning | color.warning | Alerts, attention states |
| Error | color.error | Error states, validation |
| Info | color.info | Informational messages |
💡 Use semantic tokens instead of hard-coded colors to maintain flexibility and theme support.
Example Tokens
// color.tokens.ts
export const color = {
primary: "#2563eb",
secondary: "#64748b",
success: "#22c55e",
warning: "#facc15",
error: "#ef4444",
info: "#0ea5e9",
neutral: {
50: "#f9fafb",
100: "#f3f4f6",
200: "#e5e7eb",
300: "#d1d5db",
400: "#9ca3af",
500: "#6b7280",
600: "#4b5563",
700: "#374151",
800: "#1f2937",
900: "#111827",
},
};Theming Support
Tendoo supports both light and dark themes using the same token system. Themes dynamically switch token values depending on the active mode.
/* CSS custom properties for light theme */
:root {
--color-bg: #ffffff;
--color-text: #111827;
--color-primary: #2563eb;
}
/* CSS custom properties for dark theme */
[data-theme="dark"] {
--color-bg: #0f172a;
--color-text: #f8fafc;
--color-primary: #3b82f6;
}Usage Guidelines
- Use semantic tokens (
color.primary,color.error, etc.) in both design tools and code. - Maintain appropriate contrast ratios (WCAG AA or higher) for text and critical UI elements.
- Avoid relying solely on color to convey meaning (e.g., pair error states with icons or text).
Resources
- Read about Design Tokens
- Check Accessibility guidelines
- Browse UI Components to see how color is applied in context
Color is more than decoration — it’s a system of meaning. Stick to the tokens and palette roles to ensure consistency, accessibility, and scalability across Tendoo interfaces.