Design Tokens

Rayden UI includes a comprehensive design token system extracted from the Rayna UI  Figma design system. These tokens ensure consistency across all components and make theming straightforward.

Overview

Design tokens are available in two ways:

1. CSS Variables — Used automatically via Tailwind CSS classes
2. JavaScript/TypeScript — Importable for programmatic use

Using Tokens

In Tailwind CSS Classes

All tokens are available as Tailwind v4 theme variables:

// Colors
<div className="bg-primary-400 text-grey-900">Content</div>
 
// Shadows
<div className="shadow-soft-lg">Card with soft shadow</div>
 
// Typography
<p className="text-body-lg">Large body text</p>

In JavaScript/TypeScript

import { colors, shadows, spacing, typography, blurs, grid } from "@raydenui/ui/preset";
 
// Access any token
console.log(colors.primary[400]); // "#F56630"
console.log(shadows.soft.lg); // "0px 4px 6px..."
console.log(spacing[4]); // "16px"

Colors

Primary

The primary color palette is a warm orange, used for main actions and brand elements.

Secondary

A blue palette for secondary actions and informational elements.

Grey

Neutral tones for text, borders, and backgrounds.

Semantic Colors

Success

Error

Warning

Info

Shadows

Soft Shadows

Subtle, diffused shadows for a gentle elevation effect.

Hard Shadows

Defined shadows with visible edges for stronger elevation.

Typography

Manrope gives headings a distinct voice. Hanken Grotesk carries paragraphs, navigation, buttons, form labels, and other interface text. Code uses the local Mac stack: SF Mono, SFMono-Regular, then Menlo, with platform fallbacks elsewhere.

Role scale

Sizes use rem so they follow the reader’s default text size. Pixel equivalents below assume a 16px root. Line heights are unitless. Each semantic text-* utility includes size, line height, tracking, and default weight. Display, heading, label, and code utilities also select their font family; body and caption utilities inherit the surrounding family. Use font-sans explicitly when placing body text inside a heading.

Applying the system

<section className="space-y-6">
  <h1 className="text-h3 md:text-h1">Your workspace, connected</h1>
  <p className="text-body-md prose-measure">
    Keep projects, conversations, and decisions in one place.
  </p>
  <nav aria-label="Workspace" className="font-sans text-label-md">
    <a href="/projects">Projects</a>
  </nav>
  <pre className="text-code-md overflow-x-auto">
    <code>npm install @raydenui/ui</code>
  </pre>
</section>

• Choose heading elements for document structure, then choose their visual size with utilities. Heading tags automatically use Manrope; they do not impose a new size on existing components.
• Use text-h3 md:text-h1 or text-h2 md:text-display-lg for responsive titles. Large display sizes are for short headlines, not dense panels.
• Use text-body-md for reading text and prose-measure to cap long paragraphs at 65 characters. text-body-sm is for secondary text, not the default reading size.
• Use text-label-md for controls and navigation. Use text-label-lg for mobile inputs; do not reduce the document’s root size to fit a layout.
• Keep small labels in sentence case. Add uppercase to text-caption-* only for short eyebrows; caption-xs remains a compatibility alias at 12px, matching caption-sm.
• Heading utilities balance line wrapping. Code blocks should scroll horizontally. Apply tabular-nums to changing values and table numbers.
• font-medium, font-semibold, and font-bold can override a role’s default weight. Manrope is upright only; use Hanken Grotesk for true italic emphasis.

Spacing

Based on a 4px grid system.

Blurs

For backdrop and filter blur effects.

Grid & Breakpoints

Breakpoints

Grid Columns

The grid system adapts to different screen sizes:

• Small (320px+): 4 or 6 columns, 16px margin, 12px gutter
• Medium (600px+): 6 or 8 columns, 32px margin, 20px gutter
• Large (1136px+): 12 columns, 112px margin, 32px gutter
• Fluid: 12 columns, 24px margin, 24px gutter

Font Family

Import the shared styles and optional self-hosted fonts once in your application:

@import "tailwindcss";
@import "@raydenui/ui/styles.css";
@import "@raydenui/ui/fonts.css";

fonts.css ships variable WOFF2 subsets, including Hanken Grotesk’s true italic, with font-display: swap. Browsers fetch only the subsets and styles used on the page. Both font licenses are included in the package. SF Mono and Menlo are resolved locally; Rayden does not download or redistribute them.

If you already load these families yourself, omit fonts.css. The styles retain system fallbacks when webfonts are unavailable. Override --font-heading, --font-sans, and --font-mono to customize the family roles:

@theme {
  --font-heading: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-mono:
    "SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

The JavaScript typography and fontFamily exports from @raydenui/ui/preset, the CSS utilities, and the AI/DTCG tokens describe the same role system.