Skip to main content

Foundations

The foundations of Naos Design System are the core building blocks that ensure consistency and quality across all designs and implementations.

Design Tokens​

Design tokens are the smallest atoms of our design system - the named entities that store visual design attributes.

  • Colors - Color palette, semantic colors, and usage guidelines
  • Typography - Font families, sizes, weights, and hierarchy
  • Spacing - Spacing scale and layout principles
  • Elevation - Shadow and depth system
  • Border Radius - Corner radius values

Core Principles​

Consistency​

Create predictable experiences by using established patterns and components consistently across all touchpoints.

Accessibility​

Design and build for everyone. All components meet WCAG 2.1 AA standards and support keyboard navigation and screen readers.

Clarity​

Prioritize clear communication through thoughtful hierarchy, spacing, and typography.

Efficiency​

Enable teams to move quickly while maintaining quality through reusable components and clear documentation.

Design Philosophy​

Naos is built on the principle that good design is invisible. Our components and patterns should fade into the background, allowing users to focus on their tasks without friction.

We prioritize:

  • User needs over aesthetics - Beautiful design serves users, not just looks good
  • Simplicity over complexity - The simplest solution is often the best
  • Flexibility with constraints - Provide options without overwhelming choice
  • Consistency with context - Adapt to context while maintaining consistency

Using Design Tokens​

Design tokens ensure consistency between design and code. They are:

  • Single source of truth - Defined once, used everywhere
  • Platform agnostic - Can be consumed by any platform or technology
  • Semantic - Named by purpose, not appearance
  • Themeable - Support light/dark mode and customization

Next Steps​