rds
Back to Design System

Tokens

Core design tokens that define the RDS visual language

Design Tokens
Tailwind CSS
CSS Variables

Overview

Our design tokens are built on Tailwind CSS with custom configuration and CSS variables. These tokens ensure consistency across all components and pages, making it easy to maintain a cohesive design system.

Framework: Tailwind CSS v3

Variables: CSS custom properties in globals.css

Theme: Light/Dark mode support via next-themes

Configuration: tailwind.config.ts

Colors

Complete color palette, semantic colors, and RDS primary color (gray-950)

  • Full Tailwind palette
  • Semantic colors
  • Primary: Gray-950
  • Dark mode support
View Documentation

Typography

Type scale, font families, weights, and text utilities

  • Geist Sans & Mono
  • 12px to 128px scale
  • 9 font weights
  • Common patterns
View Documentation

Spacing & Layout

Spacing scale, border radius, breakpoints, and containers

  • 4px grid system
  • Responsive breakpoints
  • Border radius scale
  • Z-index layers
View Documentation

Shadows & Motion

Elevation shadows, animation durations, and easing functions

  • 8 shadow levels
  • Focus rings
  • Animation timing
  • Built-in keyframes
View Documentation

Quick Reference

Primary Colors

Gray-950 (Primary)

bg-gray-950

Primary

bg-primary

Secondary

bg-secondary

Type Scale

Aatext-4xl
Aatext-2xl
Aatext-base
Aatext-sm

Common Spacing

4 (16px)

p-4, gap-4

6 (24px)

p-6, gap-6

8 (32px)

p-8, gap-8

Usage

/* Import from tokens for JS/TS use */
import { colors, cssVariables } from "@/components/tokens";

/* Use Tailwind classes for styling */
<div className="bg-gray-950 text-white p-6 rounded-lg shadow-lg">
  Primary styled element
</div>

/* Semantic colors adapt to light/dark mode */
<div className="bg-background text-foreground">
  Theme-aware content
</div>

/* CSS custom properties for custom styles */
.custom-element {
  background: hsl(var(--primary));
  border-radius: var(--radius);
}