Design Tokens

Consistent design tokens as CSS custom properties

Colors

Accent (Ice Blue)

Accent
#4A9EFF
Accent Light
#6BB0FF
Accent Dark
#3A8EEF

Semantic Colors

Success
#10b981
Warning
#f59e0b
Error
#ef4444
Info
#4A9EFF

Text Colors

Text
#ffffff
Text Muted
rgba(255,255,255,0.7)
Text Inverse
#1A1A1A
CSS 
/* Accent Colors */
--color-accent: #4A9EFF;
--color-accent-light: #6BB0FF;
--color-accent-dark: #3A8EEF;

/* Semantic Colors */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-info: #4A9EFF;

/* Text Colors */
--color-text: #ffffff;
--color-text-muted: rgba(255, 255, 255, 0.7);
--color-text-inverse: #1A1A1A;

Spacing

Baseline UI uses an 8px-based spacing system:

--spacing-xs (4px)
--spacing-sm (8px)
--spacing-md (16px)
--spacing-lg (24px)
--spacing-xl (32px)
CSS 
--spacing-xs: 0.25rem;   /* 4px */
--spacing-sm: 0.5rem;    /* 8px */
--spacing-md: 1rem;      /* 16px */
--spacing-lg: 1.5rem;    /* 24px */
--spacing-xl: 2rem;      /* 32px */
--spacing-2xl: 3rem;     /* 48px */
--spacing-3xl: 4rem;     /* 64px */
--spacing-4xl: 6rem;     /* 96px */
--spacing-5xl: 8rem;     /* 128px */

Typography

Font Sizes

Extra Small (12px)

Small (14px)

Base (16px)

Large (18px)

Extra Large (20px)

2XL (24px)

3XL (30px)

4XL (36px)

Font Weights

Light (300)

Normal (400)

Medium (500)

Semibold (600)

Bold (700)

CSS 
/* Font Sizes */
--font-size-xs: 0.75rem;     /* 12px */
--font-size-sm: 0.875rem;    /* 14px */
--font-size-base: 1rem;      /* 16px */
--font-size-lg: 1.125rem;    /* 18px */
--font-size-xl: 1.25rem;     /* 20px */
--font-size-2xl: 1.5rem;     /* 24px */
--font-size-3xl: 1.875rem;   /* 30px */
--font-size-4xl: 2.25rem;    /* 36px */

/* Font Weights */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

Glassmorphism

Baseline UI uses milky glass effects for a technical design:

Light Glass (--glass-bg-light)
Medium Glass (--glass-bg-medium)
Heavy Glass (--glass-bg-heavy)
CSS 
/* Glass Backgrounds */
--glass-bg-light: rgba(255, 255, 255, 0.05);
--glass-bg-medium: rgba(255, 255, 255, 0.08);
--glass-bg-heavy: rgba(255, 255, 255, 0.12);

/* Backdrop Blur */
--glass-blur-sm: 2px;
--glass-blur-md: 4px;
--glass-blur-lg: 6px;
--glass-blur-xl: 8px;

/* Glass Borders */
--glass-border-light: rgba(255, 255, 255, 0.1);
--glass-border-medium: rgba(255, 255, 255, 0.15);
--glass-border-heavy: rgba(255, 255, 255, 0.2);

Border Radius

Technical design with maximum 4px border radius:

Small (2px)
Medium (4px)
CSS 
--tech-border-radius-none: 0;
--tech-border-radius-sm: 2px;
--tech-border-radius-md: 4px;

Shadows

CSS 
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);