R3 Digital Design System

A comprehensive design system built on HSL colors and Tailwind CSS v4 with semantic token extensions. This interface matches exactly with our design tokens and serves as the single source of truth for designers and developers.

🎨 Design System Architecture

HSL Color System

Semantic tokens like bg-surface-primary and text-content-secondary

Tailwind Foundation

Standard utilities like p-4, gap-6, and rounded-lg

Dual Approach

Choose semantic py-spacing-section OR Tailwind py-24

Figma ↔ Code Token Mapping

Use these exact token names in Figma to ensure seamless design-to-code handoffs. Each section below shows the complete mapping from Figma tokens to CSS classes.

Figma Token:Surface/Primary

CSS Class:bg-surface-primary

Value:#171717

Color System

Semantic color mappings between Figma and CSS following our design token specifications. Each color serves specific purposes and automatically adapts to light/dark contexts where appropriate.

Color System Architecture

HSL Color Format

Better browser compatibility

Simplified from previous OKLCH system

Contextual Colors

Content/Stroke colors adapt to context

Light/dark theme support built-in

Surface Colors

Background colors for different surfaces and components

Primary

Main dark backgrounds

Semantic Class:bg-surface-primary

Figma Token:Surface/Primary

Value:#171717

Tailwind Equivalent:bg-neutral-900

Secondary

Secondary surfaces

Semantic Class:bg-surface-secondary

Figma Token:Surface/Secondary

Value:#262626

Tailwind Equivalent:bg-neutral-800

Tertiary

Light grey surfaces

Semantic Class:bg-surface-tertiary

Figma Token:Surface/Tertiary

Value:#E5E5E5

Tailwind Equivalent:bg-neutral-200

Light

White surfaces

Semantic Class:bg-surface-light

Figma Token:Surface/Light

Value:#FFFFFF

Tailwind Equivalent:bg-white

Content Colors

Text and content colors

Text Preview

Primary

Main text color

Semantic Class:text-content-primary

Figma Token:Content/Primary

Value:Contextual

Tailwind Equivalent:text-neutral-900 (contextual)

Text Preview

Secondary

Red emphasis text

Semantic Class:text-content-secondary

Figma Token:Content/Secondary

Value:#DC2626

Tailwind Equivalent:text-red-500

Text Preview

Inverse

Opposite of primary

Semantic Class:text-content-inverse

Figma Token:Content/Inverse

Value:Contextual

Tailwind Equivalent:text-white (contextual)

Text Preview

Muted

Muted grey text

Semantic Class:text-content-muted

Figma Token:Content/Muted

Value:#737373

Tailwind Equivalent:text-neutral-500

Interactive Colors

Colors for CTAs and interactive elements

Primary

Primary buttons/links

Semantic Class:bg-interactive-primary

Figma Token:Interactive/Primary

Value:#DC2626

Tailwind Equivalent:bg-red-500

Secondary

Secondary buttons

Semantic Class:bg-interactive-secondary

Figma Token:Interactive/Secondary

Value:#262626

Tailwind Equivalent:bg-neutral-800

Stroke Colors

Border and divider colors

Primary

Main borders

Semantic Class:border-stroke-primary

Figma Token:Stroke/Primary

Value:Contextual

Tailwind Equivalent:border-neutral-200 (contextual)

Secondary

Red accent borders

Semantic Class:border-stroke-secondary

Figma Token:Stroke/Secondary

Value:#DC2626

Tailwind Equivalent:border-red-500

Typography System

Typography mappings between Figma and code following the exact specifications from our design tokens. Use these exact names in Figma to ensure consistency and seamless design-to-code handoffs.

Typography Guidelines

Default Body Text

14px with 26px line-height

300 weight (light) for all body text

Responsive Scaling

Single breakpoint at 768px

All typography classes auto-scale

Weight System

Weight is implicit in the style purpose

No separate weight variants needed

Display/Titles

Example

CSS Class

Figma Token

Desktop/Mobile

Tailwind Equiv

Hero XXL

title-9xl

Hero XXL

96px

72px

text-8xl md:text-9xl font-bold

Hero XL

title-8xl

Hero XL

84px

64px

text-7xl md:text-8xl font-bold

Title Large

title-5xl

Title Large

48px

40px

text-4xl md:text-5xl font-bold

Title Medium

title-4xl

Title Medium

40px

32px

text-3xl md:text-4xl font-bold

Title Small

title-3xl

Title Small

32px

28px

text-2xl md:text-3xl font-bold

Title Tiny

title-2xl

Title Tiny

28px

24px

text-xl md:text-2xl font-bold

Body Content

Example

CSS Class

Figma Token

Desktop/Mobile

Tailwind Equiv

Introduction text for sections

text-intro

Intro

30px

24px

text-2xl md:text-3xl font-light

Large body text for emphasis

text-body-xl

Body XL

20px

18px

text-lg md:text-xl font-normal

Standard testimonial quotes

text-quote

Quote

24px

20px

text-xl md:text-2xl font-medium

Featured testimonial quotes

text-quote-featured

Quote Featured

30px

24px

text-2xl md:text-3xl font-medium

UI Elements

Example

CSS Class

Figma Token

Desktop/Mobile

Tailwind Equiv

text-navigation

Navigation

16px

text-base font-bold

text-navigation-small

Navigation Small

12px

text-xs font-bold

Button Text

text-button

Button Text

14px

text-sm font-bold

Form Field Text

text-field

Field Text

14px

text-sm font-normal

text-breadcrumb

Breadcrumb

12px

text-xs font-normal

Standard Text

Example

CSS Class

Figma Token

Desktop/Mobile

Tailwind Equiv

Large paragraph text

text-lg

Paragraph Large

18px

16px

text-lg font-normal

Standard paragraph text

text-base

Paragraph

14px

text-sm font-normal

Small paragraph text

text-sm

Paragraph Small

12px

text-xs font-normal

Container System

Container system with responsive gutters following our design tokens. Content containers use larger gutters (24px/64px) while navigation uses smaller gutters (16px/32px).

Container Guidelines

Mobile Gutters

24px content / 16px navigation

Desktop Gutters

64px content / 32px navigation

Breakpoint

768px (mobile to desktop)

Outer Container

Max: 1500px

Outer Container

Main layout container for full-width sections

CSS Class:container-outer

Figma Token:Container/Outer

Max Width:

1500px

Gutters:

24px mobile, 64px desktop

Use Cases:

Page sections, hero areas, full-width content

Inner Container

Max: 1180px

Inner Container

Content container for readable text width

CSS Class:container-inner

Figma Token:Container/Inner

Max Width:

1180px

Gutters:

24px mobile, 64px desktop

Use Cases:

Article content, forms, main content areas

Text Width

Max: 784px

Text Width

Optimal reading width for text content. Note: w-text is defined in CSS, or use max-w-[784px] with Tailwind

CSS Class:w-text or max-w-[784px]

Figma Token:Text Width

Max Width:

784px

Gutters:

Inherits from parent

Use Cases:

Long-form content, articles, body text

Fluid Container

Max: 100%

Fluid Container

Full-width container with responsive gutters

CSS Class:container-fluid

Figma Token:Container/Fluid

Max Width:

100%

Gutters:

24px mobile, 64px desktop

Use Cases:

Full-width sections that need gutters

Navigation Container

Max: 1500px

Navigation Container

Special container for navigation with smaller gutters

CSS Class:container-nav

Figma Token:Container/Navigation

Max Width:

1500px

Gutters:

16px mobile, 32px desktop

Use Cases:

Navigation bars, headers

Outer Container (No Padding)

Max: 1500px

Outer Container (No Padding)

Outer container without any padding

CSS Class:container-outer-no-pad

Figma Token:Container/Outer/NoPad

Max Width:

1500px

Gutters:

None

Use Cases:

Edge-to-edge content within outer bounds

Inner Container (No Padding)

Max: 1180px

Inner Container (No Padding)

Inner container without any padding

CSS Class:container-inner-no-pad

Figma Token:Container/Inner/NoPad

Max Width:

1180px

Gutters:

None

Use Cases:

Edge-to-edge content within inner bounds, used inside container-outer

Gallery Scroll Container

Max: Extends to viewport edge

Gallery Scroll Container

Scrollable container that starts at content line but extends to viewport edge for overflow scrolling

CSS Class:gallery-scroll-container

Figma Token:Container/Gallery/Scroll

Max Width:

Extends to viewport edge

Gutters:

Left: aligns with 1180px content; Right: extends past container gutters

Use Cases:

Horizontal scrolling galleries, carousels that need left content alignment with right overflow

Common Usage Patterns

<div className="container-outer">

Use for full-width sections like heroes, footers, and major page divisions

<div className="container-inner max-w-text">

Combine containers for optimal reading width within inner constraints

<nav className="container-nav">

Special navigation container with specific gutter requirements

Spacing System

Spacing tokens that work with both semantic classes and standard Tailwind utilities. Choose the approach that best fits your workflow - semantic for design consistency or Tailwind for flexibility.

Semantic + Tailwind Approach

Semantic Classes (Recommended)

py-spacing-section

Use semantic tokens for design system consistency

Tailwind Utilities (Alternative)

py-24

Use standard Tailwind classes for flexibility

96px

Section

Between major sections

Semantic Class:spacing-section

Figma Token:Section

Value:96px

Tailwind Equivalent:24 (py-24, gap-24)

Use Cases:

Between major sections

48px

Component

Between components

Semantic Class:spacing-component

Figma Token:Component

Value:48px

Tailwind Equivalent:12 (gap-12, py-12)

Use Cases:

Between components

32px

Card

Internal card padding

Semantic Class:spacing-card

Figma Token:Card

Value:32px

Tailwind Equivalent:8 (p-8, gap-8)

Use Cases:

Internal card padding

24px

Element

Between related elements

Semantic Class:spacing-element

Figma Token:Element

Value:24px

Tailwind Equivalent:6 (gap-6, py-6)

Use Cases:

Between related elements

16px

Compact

Compact layouts

Semantic Class:spacing-compact

Figma Token:Compact

Value:16px

Tailwind Equivalent:4 (gap-4, p-4)

Use Cases:

Compact layouts

8px

Tight

Minimal spacing

Semantic Class:spacing-tight

Figma Token:Tight

Value:8px

Tailwind Equivalent:2 (gap-2, py-2)

Use Cases:

Minimal spacing

How to Apply Spacing

Apply spacing using semantic tokens OR Tailwind equivalents:

Margin Top

mt-spacing-section

Apply spacing as top margin

Margin Bottom

mb-spacing-component

Apply spacing as bottom margin

Padding Top

pt-spacing-card

Apply spacing as top padding

Padding Bottom

pb-spacing-element

Apply spacing as bottom padding

Gap

gap-spacing-compact

Apply spacing as flexbox/grid gap

Common Spacing Patterns

Semantic Approach

py-spacing-section

Major page sections (96px)

gap-spacing-element

Related elements (24px)

p-spacing-card

Card interiors (32px)

Tailwind Approach

py-24

Major page sections (96px)

gap-6

Related elements (24px)

p-8

Card interiors (32px)

Border Radius System

Consistent border radius values for different component types. Each radius serves specific UI patterns and maintains visual hierarchy across the design system.

6px

Button/Input

Standard radius for interactive elements

CSS Class:rounded-button

Figma Token:Button/Input

Value:6px

Tailwind Equivalent:rounded-md

Use Cases:

Buttons and inputs

8px

Card

Standard radius for content containers

CSS Class:rounded-card

Figma Token:Card

Value:8px

Tailwind Equivalent:rounded-lg

Use Cases:

Cards and panels

Modal

Larger radius for overlay elements

CSS Class:rounded-modal

Figma Token:Modal

Value:12px

Tailwind Equivalent:rounded-xl

Use Cases:

Modals and overlays

Border Radius Guidelines

Apply consistent border radius across components to maintain visual harmony:

Interactive Elements

rounded-button (6px)

Buttons, form inputs, interactive controls

Content Containers

rounded-card (8px)

Cards, content panels, grouped information

Overlay Elements

rounded-modal (12px)

Modals, popovers, dropdown menus

Component Examples

Common UI components built with our design system tokens. These components automatically inherit semantic styling and maintain consistency across the application.

Primary Button

Main call-to-action buttons with semantic styling

Figma Component:Button/Primary

Code Example:

<Button variant="default" size="default">
  Get In Touch
  <ArrowRight className="h-4 w-4" />
</Button>

Secondary Button

Secondary actions with outline styling

Figma Component:Button/Secondary

Code Example:

<Button variant="outline" size="default">
  Download
  <Download className="h-4 w-4" />
</Button>

Ghost Button

Subtle actions with minimal styling

Figma Component:Button/Ghost

Code Example:

<Button variant="ghost" size="default">
  <Settings className="h-4 w-4" />
  Settings
</Button>

Card Title

Card content with semantic typography and spacing.

Card Component

Standard content cards with proper spacing

Figma Component:Card/Standard

Code Example:

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
  </CardHeader>
  <CardContent>
    <p>Card content with semantic typography and spacing.</p>
  </CardContent>
</Card>

DefaultSecondaryOutline

Badge Components

Status indicators and labels

Figma Component:Badge/Default

Code Example:

<Badge variant="default">Default</Badge>
<Badge variant="secondary">Secondary</Badge> 
<Badge variant="outline">Outline</Badge>

Design-to-Code Workflow

For Designers

• Use tokens from this page as Figma variable names
• Reference component variants shown here
• Specify exact CSS classes in handoff specs
• Maintain consistency with semantic naming

For Developers

• Use semantic classes instead of arbitrary values
• Reference this page for token availability
• Extend components using design system patterns
• Maintain token consistency in new components

Quick Reference

Colors

bg-surface-*
text-content-*
border-stroke-*

Typography

title-*xl
text-navigation
font-featured

Layout

container-outer
container-inner
w-text

Spacing

spacing-section
spacing-component
spacing-element