Foundations

Design foundations are the core building blocks of the design system. They define the visual language through tokens, colors, typography, spacing, and more.

Overview

Foundations provide the atomic values and guidelines that ensure consistency across all products built with the Everforth Design System.

Design Tokens

The atomic values that define colors, spacing, typography, and more.

Colors

Brand colors, semantic colors, and color accessibility guidelines.

Typography

Font families, sizes, weights, and typographic scale.

Spacing

Consistent spacing scale for margins, padding, and gaps.

Layout

Grid system, containers, and responsive breakpoints.

Theming

Customization, dark mode, and creating brand themes.

Design Principles

Our foundations are built on these core principles:

Consistency

Every token and value has a purpose. Using the same spacing scale and color palette across all components ensures a unified experience.

Flexibility

While we provide sensible defaults, every value can be customized to match your brand's specific needs through CSS custom properties or SCSS variables.

Accessibility

All color combinations meet WCAG 2.1 AA contrast requirements. Typography scales are designed for readability across devices.

Performance

We use CSS custom properties for theming, enabling runtime theme switching without additional CSS bundle sizes.