Foundations
Explore the core design principles and visual language that power the Tendoo Design System.
Foundations
The Tendoo Design System is built on a robust set of foundations that define our visual language and guide how design elements behave, feel, and interact. These principles ensure consistency, usability, accessibility, and scalability across all Tendoo products.
These foundational rules and tokens power every UI component, layout, and interaction across both web and mobile platforms.
What You’ll Find
- Colors — Brand palette, semantic roles, theming support.
- Typography — Font stack, type scale, weights, and accessibility.
- Spacing — Spacing scale for consistent vertical and horizontal rhythm.
- Corner Radius — Standardized corner-radius tokens for all components.
- Elevation — Depth and shadow tokens to express hierarchy and interactivity.
- Layout — Flex/grid systems, alignment patterns, and spacing principles.
- Grid — Columns, gutters, responsive grids for web and mobile.
- Breakpoints — Responsive behavior across different screen sizes.
- Effect styles — Blur, focus rings, and other visual effects.
- Motion — Easing, durations, animation principles, and transition tokens.
- Z-Index — Layering logic for UI elements like modals, menus, and overlays.
- Iconography — Icon usage, sizes, grid systems, and stroke weights.
- Accessibility — Inclusive design guidelines, contrast, focus, and semantics.
- Design Tokens — The underlying token system that powers consistent implementation across code and design tools.
Get Started
- Read our Design Token Guide
- Explore how foundations are applied in UI Components
- Learn how to implement Accessibility best practices