Overview
Foundations
Brand
Colors
Typography
Spacing & Layout
Semantic Tokens
Icons
Shadows
Components
Patterns
Design System
- Foundations
- 7
Brand, Colors, Tokens & more
- Components
- 11
Documented & ready to use
- Design Tokens
- 200+
Semantic & primitive tokens
- Accessibility
- AA
WCAG compliant
Get Started
Explore the building blocks of Integral's design language
Brand
Logo usage, colour versions, safe space, Integral Spark, and downloadable SVG assets
Colors
Complete color palettes with accessibility ratings and usage guidance
Semantic Tokens
Theme tokens for backgrounds, text, borders, and interactive states
Button
Five variants with theming tables, specs, and interactive previews
Input
Text inputs with validation states, icons, and size variants
Avatar
User profile avatars with size variants and initials fallback
Built for teams
Everything you need to build consistent, accessible user interfaces at scale.
Accessible by default
All components meet WCAG AA standards with proper contrast ratios and keyboard navigation
Fast implementation
Pre-built components and patterns reduce development time and ensure consistency
Developer friendly
Built with Chakra UI and React for seamless integration with modern workflows
Production ready
Battle-tested components used across Integral's product suite
What's Available
Current components and foundations
Foundations
Brand, Colors, Typography, Spacing, Icons, Tokens, Shadows
Actions
Button (5 variants), Link
Data Display
Avatar, Badge, Count Badge
Forms
Input, Single Select, Multi Select
Layout
Header, Sidebar, User Menu
Last updated: March 2026