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:

CSS Variables — Used automatically via Tailwind CSS classes
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.

Token	Value	Preview
`primary-50`	`#FFECE5`
`primary-75`	`#FCD2C2`
`primary-100`	`#FCB59A`
`primary-200`	`#FA9874`
`primary-300`	`#F77A4A`
`primary-400`	`#F56630`
`primary-500`	`#EB5017`
`primary-600`	`#CC400C`
`primary-700`	`#AD3307`
`primary-800`	`#8F2802`
`primary-900`	`#711E00`

Secondary

A blue palette for secondary actions and informational elements.

Token	Value
`secondary-50`	`#E3EFFC`
`secondary-75`	`#C6DDF7`
`secondary-100`	`#B6D8FF`
`secondary-200`	`#80BBFF`
`secondary-300`	`#3D89DF`
`secondary-400`	`#1671D9`
`secondary-500`	`#0D5EBA`
`secondary-600`	`#034592`
`secondary-700`	`#04326B`
`secondary-800`	`#012657`
`secondary-900`	`#001633`

Grey

Neutral tones for text, borders, and backgrounds.

Token	Value	Usage
`grey-50`	`#F9FAFB`	Subtle backgrounds
`grey-75`	`#F7F9FC`	Card backgrounds
`grey-100`	`#F0F2F5`	Dividers, input backgrounds
`grey-200`	`#E4E7EC`	Borders, disabled backgrounds
`grey-300`	`#D0D5DD`	Input borders, outlines
`grey-400`	`#98A2B3`	Placeholder text, icons
`grey-500`	`#667185`	Secondary text
`grey-600`	`#475367`	Body text
`grey-700`	`#344054`	Strong text
`grey-800`	`#1D2739`	Headings
`grey-900`	`#101928`	Primary text

Semantic Colors

Success

Token	Value
`success-50`	`#E7F6EC`
`success-400`	`#0F973D`
`success-600`	`#04802E`
`success-700`	`#036B26`

Error

Token	Value
`error-50`	`#FBEAE9`
`error-400`	`#D42620`
`error-500`	`#CB1A14`
`error-700`	`#9E0A05`

Warning

Token	Value
`warning-50`	`#FEF6E7`
`warning-400`	`#F3A218`
`warning-500`	`#DD900D`
`warning-600`	`#AD6F07`

Info

Token	Value
`info-400`	`#0BA5EC`
`info-500`	`#0086C9`

Shadows

Soft Shadows

Subtle, diffused shadows for a gentle elevation effect.

Token	Value
`shadow-soft-xxs`	`0px 1.5px 4px -1px rgba(16, 25, 40, 0.07)`
`shadow-soft-xs`	`0px 2px 4px -1px rgba(16, 25, 40, 0.02), 0px 5px 13px -5px rgba(16, 25, 40, 0.05)`
`shadow-soft-sm`	`0px 10px 18px -2px rgba(16, 25, 40, 0.07)`
`shadow-soft-md`	`0px 0px 3px -1px rgba(16, 25, 40, 0.04), 0px 14px 22px -9px rgba(16, 25, 40, 0.14)`
`shadow-soft-lg`	`0px 4px 6px -2px rgba(16, 25, 40, 0.03), 0px 16px 24px -4px rgba(16, 25, 40, 0.08)`
`shadow-soft-xl`	`0px 8px 8px -4px rgba(16, 25, 40, 0.03), 0px 24px 32px -4px rgba(16, 25, 40, 0.08)`
`shadow-soft-2xl`	`0px 32px 54px -12px rgba(16, 25, 40, 0.18)`
`shadow-soft-3xl`	`0px 40px 72px -12px rgba(16, 25, 40, 0.14)`

Hard Shadows

Defined shadows with visible edges for stronger elevation.

Token	Value
`shadow-hard-xxs`	`0px 2px 5px -2px rgba(16, 25, 40, 0.06), 0px 2px 7px 0px rgba(16, 25, 40, 0.05), 0px 0px 0px 1px rgba(16, 25, 40, 0.05)`
`shadow-hard-xs`	`0px 2px 12px -1px rgba(16, 25, 40, 0.1), 0px 2px 2px -1px rgba(16, 25, 40, 0.04), 0px 0px 0px 1px rgba(16, 25, 40, 0.05)`
`shadow-hard-sm`	`0px 6px 16px 0px rgba(16, 25, 40, 0.08), 0px 0px 0px 1px rgba(16, 25, 40, 0.05)`
`shadow-hard-md`	`0px 0px 3px -1px rgba(16, 25, 40, 0.04), 0px 16px 24px -6px rgba(16, 25, 40, 0.08), 0px 0px 0px 1px rgba(16, 25, 40, 0.05)`

Typography

Display

For hero sections and large headlines.

Token	Size	Line Height	Letter Spacing
`display-lg`	56px	1	-0.04em
`display-sm`	48px	1	-0.04em

Headings

For section headers and titles.

Token	Size	Line Height	Letter Spacing
`h1`	40px	1.2	-0.04em
`h2`	36px	1.2	-0.04em
`h3`	32px	1.2	-0.02em
`h4`	28px	1.2	-0.02em
`h5`	24px	1.2	-0.02em
`h6`	20px	1.2	-0.02em

Body

For paragraph text and general content.

Token	Size	Line Height
`body-lg`	18px	1.45
`body-md`	16px	1.45
`body-sm`	14px	1.45
`body-xs`	12px	1.45

Captions

For labels, metadata, and small text (typically uppercase).

Token	Size	Line Height	Letter Spacing
`caption-lg`	14px	1.2	0.12em
`caption-sm`	12px	1.2	0.12em
`caption-xs`	10px	1.2	0.16em

Spacing

Based on a 4px grid system.

Token	Value
`1`	4px
`2`	8px
`3`	12px
`4`	16px
`5`	20px
`6`	24px
`7`	28px
`8`	32px
`10`	40px
`12`	48px
`16`	64px
`20`	80px
`24`	96px
`32`	128px
`40`	160px
`48`	192px

Blurs

For backdrop and filter blur effects.

Token	Value
`blur-xs`	2px
`blur-sm`	4px
`blur-md`	12px
`blur-lg`	16px
`blur-xl`	20px

Grid & Breakpoints

Breakpoints

Token	Value
`sm`	320px
`md`	600px
`lg`	1136px

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

The default font stack uses Inter:


--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;

Make sure to include Inter in your project:


<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

Or via npm:


npm install @fontsource/inter


import "@fontsource/inter/400.css";
import "@fontsource/inter/500.css";
import "@fontsource/inter/600.css";
import "@fontsource/inter/700.css";