Design Tokens

Complete reference of Lenzora design system tokens

CSS Custom Properties

Color Tokens

--color-sapphire-50

Lightest sapphire shade

#f0f8ff

Example:

--color-sapphire-100

Very light sapphire

#e0f0fe

Example:

--color-sapphire-200

Light sapphire

#bae1fd

Example:

--color-sapphire-300

Medium light sapphire

#7cc8fc

Example:

--color-sapphire-400

Medium sapphire

#36a9fa

Example:

--color-sapphire-500

Primary sapphire (brand color)

#0066CC

Example:

--color-sapphire-600

Dark sapphire

#0056b3

Example:

--color-sapphire-700

Darker sapphire

#004499

Example:

--color-sapphire-800

Very dark sapphire

#003380

Example:

--color-sapphire-900

Darkest sapphire

#002266

Example:

Spacing Tokens

--space-xs

Extra small spacing

0.25rem (4px)

Example:

(4px)
--space-sm

Small spacing

0.5rem (8px)

Example:

(8px)
--space-md

Medium spacing

1rem (16px)

Example:

(16px)
--space-lg

Large spacing

1.5rem (24px)

Example:

(24px)
--space-xl

Extra large spacing

2rem (32px)

Example:

(32px)
--space-2xl

2X large spacing

3rem (48px)

Example:

(48px)
--space-3xl

3X large spacing

4rem (64px)

Example:

(64px)
--space-4xl

4X large spacing

6rem (96px)

Example:

(96px)

Typography Tokens

--font-space-grotesk

Display font family

Space Grotesk, system-ui, sans-serif

Example:

The quick brown fox jumps over the lazy dog

--font-inter

Body font family

Inter, system-ui, sans-serif

Example:

The quick brown fox jumps over the lazy dog

--font-geist-mono

Code font family

Geist Mono, monospace

Example:

The quick brown fox jumps over the lazy dog

--text-xs

Extra small text

0.75rem (12px)

Example:

The quick brown fox jumps over the lazy dog

--text-sm

Small text

0.875rem (14px)

Example:

The quick brown fox jumps over the lazy dog

--text-base

Base text size

1rem (16px)

Example:

The quick brown fox jumps over the lazy dog

--text-lg

Large text

1.125rem (18px)

Example:

The quick brown fox jumps over the lazy dog

--text-xl

Extra large text

1.25rem (20px)

Example:

The quick brown fox jumps over the lazy dog

--text-2xl

2X large text

1.5rem (24px)

Example:

The quick brown fox jumps over the lazy dog

--text-3xl

3X large text

1.875rem (30px)

Example:

The quick brown fox jumps over the lazy dog

--text-4xl

4X large text

2.25rem (36px)

Example:

The quick brown fox jumps over the lazy dog

Icon Tokens

--icon-size-xs

Extra small icons

0.75rem (12px)

Example:

--icon-size-sm

Small icons

1rem (16px)

Example:

--icon-size-md

Medium icons

1.25rem (20px)

Example:

--icon-size-lg

Large icons

1.5rem (24px)

Example:

--icon-size-xl

Extra large icons

2rem (32px)

Example:

--icon-size-2xl

2X large icons

2.5rem (40px)

Example:

Animation Tokens

--duration-fast

Fast animation duration

150ms

Example:

--duration-base

Base animation duration

300ms

Example:

--duration-slow

Slow animation duration

500ms

Example:

--easing-in

Ease-in timing function

cubic-bezier(0.4, 0, 1, 1)

Example:

--easing-out

Ease-out timing function

cubic-bezier(0, 0, 0.2, 1)

Example:

--easing-in-out

Ease-in-out timing function

cubic-bezier(0.4, 0, 0.2, 1)

Example:

Usage Examples

CSS Usage

.my-component {
  color: var(--color-sapphire-500);
  padding: var(--space-md);
  font-family: var(--font-inter);
  transition: all var(--duration-base) var(--easing-out);
}

.my-icon {
  width: var(--icon-size-lg);
  height: var(--icon-size-lg);
}

Tailwind CSS Classes

<div className="text-sapphire-500 p-md font-inter transition-all duration-base ease-out">
  <Icon size="lg" className="w-lg h-lg">
    <LensBasic />
  </Icon>
</div>