Design System

A comprehensive design system built with Tailwind CSS v4, featuring semantic colors, typography scales, components, and more.

Tailwind CSS v4TypeScriptNext.jsReact Aria

Color Mode

Toggle between light and dark modes to see how the design system adapts.

Brand

Brand Colors

Primary brand colors that define your visual identity.

Success

System Colors

Semantic colors for states and feedback.

Warning

Components

All components adapt to the selected theme.

Aryvo Brand Colors

Deep blue theme with professional styling

Our design system uses the Aryvo brand colors to create a cohesive and professional experience across all components.

Brand Colors

Our core brand palette, available across all themes and surfaces.

Brand 25

Brand 50

Brand 100

Brand 200

Brand 300

Brand 400

Brand 500

Aryvo Light Blue #2A56FE

Brand 600

Brand 700

Brand 800

Brand 900

Aryvo Blue #012169

Brand 950

Color Palette

Our semantic color system provides consistent colors across light and dark modes.

Colors

Primary

Secondary

bg-secondary

Tertiary

bg-tertiary

Brand Solid

bg-brand-solid

Success

bg-success-primary

Warning

bg-warning-primary

Error

bg-error-primary

Active

bg-active

Background Colors

Primary

bg-primary

Secondary

bg-secondary

Tertiary

bg-tertiary

Brand Solid

bg-brand-solid

Success

bg-success-primary

Warning

bg-warning-primary

Error

bg-error-primary

Active

bg-active

Text Colors

Primary Text

Secondary Text

Tertiary Text

Quaternary Text

Disabled Text

Primary on Brand

Secondary on Brand

Tertiary on Brand

Quaternary on Brand

Brand Primary

Brand Secondary

Success Text

Warning Text

Error Text

Text Color Swatches

Aatext-primary

Aatext-secondary

Aatext-tertiary

Aatext-quaternary

Aatext-disabled

Aatext-primary_on-brand

Aatext-secondary_on-brand

Aatext-tertiary_on-brand

Aatext-quaternary_on-brand

Aatext-brand-primary

Aatext-success-primary

Aatext-warning-primary

Aatext-error-primary

Typography

A comprehensive typography scale with consistent line heights and letter spacing.

Display 2XL / Semibold

Display 2XL

text-display-2xl font-semibold

Display XL / Semibold

Display XL

text-display-xl font-semibold

Display LG / Semibold

Display Large

text-display-lg font-semibold

Display MD / Semibold

Display Medium

text-display-md font-semibold

Display SM / Semibold

Display Small

text-display-sm font-semibold

Large / Semibold

Large Text

text-lg font-semibold

Medium / Semibold

Medium Text

text-md font-semibold

Small / Semibold

Small Text

text-sm font-semibold

Extra Small / Semibold

Extra Small Text

text-xs font-semibold

Components

Reusable components built with accessibility and consistency in mind.

Buttons

Primary

Secondary

With Icons

Form Elements

Input Fields

Badges

DefaultPrimarySecondarySuccessWarningError

Cards

Basic Card

This is a basic card component with padding and border.

Secondary Card

Cards can have different background colors and styles.

Brand Border

Use semantic border colors for different states.

Spacing & Shadows

Consistent spacing scale and shadow system for depth and hierarchy.

Spacing Scale

spacing-1

spacing-2

spacing-3

spacing-4

spacing-5

spacing-6

spacing-8

spacing-10

spacing-12

spacing-16

Shadow System

Shadow XS

Subtle shadow for small elements

Shadow SM

Small shadow for cards and panels

Shadow MD

Medium shadow for floating elements

Shadow LG

Large shadow for modals and overlays

Icons

Consistent iconography using Untitled UI icons with semantic colors.

Actions

Success action

Settings

Users

Single user

Multiple users

Communication

Phone

Calendar

Business

Payment

Dashboard

Power/Brand

Icon Sizes

size-4

size-5

size-6

size-7

size-8