Foundations Overview

The foundations are the core design decisions that power the Tendoo Design System. They define the look, feel, and behavior of every component and experience built using the system. This page offers a high-level view of these foundational elements to help teams build consistently and efficiently.

What’s Included in Foundations

The following foundational elements form the base of the Tendoo Design System:

1. Color

Defines the primary, secondary, neutral, and semantic color tokens (e.g., success, error, warning). Includes guidance for light and dark modes and accessibility contrast.

2. Typography

Sets standards for font families, sizes, weights, line heights, and letter spacing across platforms.

3. Spacing

Establishes a scale (typically 4px-based) used to control padding, margin, and layout spacing between elements.

4. Sizing

Defines common width, height, and icon sizing values used across components for visual consistency.

5. Elevation

Manages layering and shadows for components like modals, tooltips, and cards to convey depth and hierarchy.

6. Radius

Specifies border-radius values for consistent rounding of elements (e.g., buttons, inputs, cards).

7. Grid & Layout

Describes the layout system (e.g., column grids, breakpoints, containers) used to ensure responsive structure.

8. Motion

Outlines animation guidelines, easing curves, and durations for transitions, microinteractions, and component feedback.

Why Foundations Matter

• Consistency: Ensures all UI elements feel like they belong to the same product.
• Scalability: Makes it easier to scale design and development across teams and features.
• Efficiency: Reduces design and engineering guesswork with pre-defined values.
• Accessibility: Built-in standards ensure usable, inclusive experiences by default.

How to Use

• Designers should apply foundation tokens in design tools (e.g., Figma).
• Developers should use system tokens via variables or design tokens in code.
• Avoid hardcoded values and custom styles unless explicitly approved.

---

Understanding and applying these foundations is the first step toward building cohesive, scalable experiences with Tendoo Design.