Version 2.0

Altitude Design System

A comprehensive 5-layer design system with semantic tokens, component tokens, and WordPress/Greenshift integration. Built on an 8px grid for consistent, scalable, and accessible interfaces.

245

Color Primitives

22

Type Sizes

31

Spacing Values

8px

Grid System

5-Layer Token Architecture

GreenshiftWordPress/Greenshift CSS variables
Layer 5
ComponentsButton, Card, Input tokens
Layer 4
SemanticRole-based: Brand, Background, Text
Layer 3
TypographyMajor Second & Major Third scales
Layer 2
PrimitivesRaw values: Colors, Spacing, Radius
Layer 1

Explore the System

Navigate through tokens, components, and interactive tools

Primitives

22 color families with 11 shades, spacing scale, radius, and typography values.

Explore

Semantic Tokens

Role-based tokens for colors, radius, and layout with Light/Dark mode support.

Explore

Component Tokens

Button, Card, and Input component tokens with semantic references.

Explore

Typography

Two fluid type scales - Major Second (1.125) and Major Third (1.25).

Explore

Colors

Semantic color system with primitive palettes and role-based tokens.

Explore

Greenshift

WordPress/Greenshift integration with preset colors and custom properties.

Explore

Theme Generator

Create and preview custom themes with live preview and export options.

Explore

Design Principles

  • 5-layer token architecture
  • Semantic naming for clear intent
  • Accessible by default (WCAG 2.1)
  • Responsive 8px grid system

Platform Support

  • WordPress / Greenshift CMS
  • Figma Design System
  • React / Next.js Applications
  • CSS Custom Properties