ADA Design System

Professional typography with your brand colors

Built with shadcn/ui, React, and TypeScript using ADA Electric Blue (#4d6aff) and Atmospheric Blue (#45b9ee).

ADA Brand Colors

Primary Blue

Electric/Professional Blue

#4d6aff
HSL(232, 100%, 66%)
Active

Secondary Blue

Tech/Atmospheric Blue

#45b9ee
HSL(201, 85%, 60%)
Info

Background

Pure White Base

#FFFFFF
HSL(0, 0%, 100%)
Clean

Typography Showcase

Font Viewer
Inter + Plus Jakarta Sans

Plus Jakarta Sans - Display Font
Display / Bold
60px / 100% line height
You have the right to remain private™
Spacing: -2%
Display / Semibold
48px / 110% line height
You have the right to remain private™
Spacing: -1%
Display / Medium
36px / 120% line height
You have the right to remain private™
Spacing: 0%
Inter - Body Font
Heading 1 / Bold
32px / 120% line height
You have the right to remain private™
Spacing: -0.5%
Heading 2 / Semibold
24px / 130% line height
You have the right to remain private™
Spacing: 0%
Heading 3 / Medium
20px / 130% line height
You have the right to remain private™
Spacing: 0%
Body / Regular
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Body / Medium
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Caption / Regular
14px / 140% line height
You have the right to remain private™
Spacing: 0.5%
Caption / Medium
14px / 140% line height
You have the right to remain private™
Spacing: 0.5%
Small / Regular
12px / 140% line height
You have the right to remain private™
Spacing: 1%
Weight Comparison - 16px
Light / 300
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Regular / 400
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Medium / 500
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Semibold / 600
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Bold / 700
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Extrabold / 800
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Black / 900
16px / 150% line height
You have the right to remain private™
Spacing: 0%
Size Scale - Medium Weight
12px
You have the right to remain private™
14px
You have the right to remain private™
16px
You have the right to remain private™
18px
You have the right to remain private™
20px
You have the right to remain private™
24px
You have the right to remain private™
30px
You have the right to remain private™
36px
You have the right to remain private™
48px
You have the right to remain private™
60px
You have the right to remain private™

Core Components

Button Variants

ADA brand colors in action

Status Badges

Clean status indicators

Primary
Secondary
Available
Low Stock
Error
Draft

Icon Actions

Professional iconography

Loading States & Progress

Progress Bars

Track completion states

Order Progress75%
Daily Target60%
Storage Used90%
Loading...

Spinners & Loaders

Loading indicators

Spinner Sizes

Pulse Loaders

Circular Progress

25%
65%
90%

Loading States

Interactive loading demos

Button States

Loading Overlay

Content with overlay loading state.

Skeleton Loaders

Basic Skeletons

Content placeholders

Avatars

Text Lines

Buttons

Complex Skeletons

Full layouts

List Items

Card Skeleton

Loading placeholder for complete cards

Table Skeleton

Loading placeholder for data tables

Dialogs & Modals

Interactive Dialogs

Modal dialogs and confirmation popups

Form Elements

Input Fields

Toggle Controls

Data Display

Menu Items

Restaurant menu with pricing

ItemCategoryPriceStatus
Margherita PizzaPizza€14.50
Available
Spaghetti CarbonaraPasta€12.50
Available
TiramisuDessert€6.50
Low Stock

Usage Example

Import Components

How to use in your ADA applications

import { Button } from "@/components/ui/button"
import { AdaLogo } from "@/components/ui/ada-logo"
import { LanguageSwitcher } from "@/components/ui/language-switcher"
import { Progress, Spinner, LoadingOverlay } from "@/components/ui"

export default function RestaurantDashboard() {
  return (
    <div className="p-8">
      <div className="flex items-center gap-4 mb-8">
        <AdaLogo size="md" variant="primary" />
        <LanguageSwitcher 
          currentLocale={locale}
          onLocaleChange={setLocale}
        />
      </div>
      
      <Button variant="default">
        <Plus className="mr-2 h-4 w-4" />
        Add Order
      </Button>
      
      <Progress value={75} variant="default" className="mt-4" />
    </div>
  )
}