Color Palette
Background Colors
Dark Gray 4
rgba(34,34,34,.4)
Brand Palette (from :root)
Typography
Primary · Eudoxussans
Eudoxussans
AI-powered data analytics. Turn raw data into actionable insights instantly.
Regular · 400
Medium · 500
Bold · 700
Display · 56px · −1px tracking
Data,
Refined.
56px display with −1px letter-spacing. Used for hero headlines and primary CTAs on landing pages.
56px · −1px
lh: 62px
Analytics Platform
5xl · 56px · Bold · line-height: 64px · tracking: −1px
AI-powered insights
4xl · 54px · Bold · line-height: 62px · tracking: −1px
Analyze your data smarter
3xl · 35px · Bold · line-height: 48px · tracking: −1px
Connect your data sources in minutes
2xl · 24px · Medium · line-height: 40px
Redbird transforms complex datasets into clear, actionable visualizations using advanced AI models that learn your business context.
base · 18px · Regular · line-height: 28px
Last sync: 2 minutes ago · 1,240 events processed
sm · 16px · Regular · line-height: 24px
ANALYTICS · REPORTS · INSIGHTS
2xs · 14px · Bold · line-height: 20px · tracking: +2px
Letter Spacing
Redbird
Tight
−1px · display headlines, hero text
ANALYTICS · REPORTS
Normal
+2px · uppercase labels and caps
Spacing
Spacing Scale
26 tokens — 8px → 271.25px
Borders
Border Radii
The 50% radius token creates perfect circles regardless of element size — used for avatar components, circular icons, and pill-shaped indicators.
Border Widths
The 12px base border is a standout token — used as a thick decorative accent or left-border highlight on feature sections, creating bold visual emphasis.
Shadows / Elevation
No Shadow Tokens Detected
Redbird's design system defines no named shadow tokens at the CSS custom property level. Elevation is primarily communicated through border color contrast and background stepping from the light base surface (#FFFFFF) to subtle fills (#F3F3F3). The 12px --border-width-base token serves as the primary depth signal — thick colored borders provide visual hierarchy without shadows.
Z-Index
| Layer | Value | Usage |
|---|
| z-1 | -1 | Background decorations, canvas watermarks |
| z-2 | 1 | Base content layer |
| z-3 | 2 | Slightly elevated elements |
| z-4 | 3 | Interactive components, chart tooltips |
| z-5 | 4 | Dropdown menus, popovers |
| z-6 | 1000 | Modals, overlays, global notifications |
Z-index values are deliberately compact (−1 to 4) for most UI layers, with a large jump to 1000 for modal-level chrome. This reflects a flat component architecture where most elements compete only within a narrow range — typical of data dashboard UIs.
Breakpoints
7 breakpoints from 479px to 1920px. Paired floor/ceiling values at 767/768px for tight boundary control. Maximum at 1920px supports ultra-wide analytics dashboard layouts. Starts at 479px (below standard 480px mobile threshold) suggesting support for narrower feature-phone viewports.
Opacity
No Opacity Tokens Detected
Redbird's design system defines no named opacity tokens in the CSS custom property layer. Transparency is handled directly via RGBA values in the color tokens (e.g., --color-dark-gray-4: rgba(34, 34, 34, 0.4)) rather than a separate opacity scale. This pattern embeds opacity directly into semantic color tokens rather than separating it as a utility.
Accessibility — Contrast Ratios
WCAG 2.1: AA ≥ 4.5:1 · AA Large ≥ 3:1 · AAA ≥ 7:1
⚠️ Dark gray text (#333333) on black fails WCAG — Redbird is fundamentally a light-theme system. Dark text is designed for white/light backgrounds only.
| Text Color | Background Color | Ratio | WCAG Rating |
|---|
| Dark Gray (#333) | White (#FFF) | 12.63:1 | AAA |
| Dark Gray (#333) | Light Blue (#E0E6FE) | 10.18:1 | AAA |
| Dark Gray (#333) | Black (#000) | 1.66:1 | Fail |
| Dark Gray (#333) | Dark Blue (#1C1548) | 1.33:1 | Fail |
| Blue (#0000EE) | White (#FFF) | 9.4:1 | AAA |
| Blue (#0000EE) | Light Blue (#E0E6FE) | 7.57:1 | AAA |
| Blue (#0000EE) | Black (#000) | 2.23:1 | Fail |
| Blue 2 (#009CFD) | Black (#000) | 7.17:1 | AAA |
| Blue 2 (#009CFD) | Dark Blue (#1C1548) | 5.74:1 | AA |
| Blue 2 (#009CFD) | White (#FFF) | 2.93:1 | Fail |
| Red (#FF0040) | Black (#000) | 5.33:1 | AA |
| Red (#FF0040) | White (#FFF) | 3.94:1 | AA Large |
| Red (#FF0040) | Dark Blue (#1C1548) | 4.26:1 | AA Large |
| Red 2 (#F5405C) | Black (#000) | 5.77:1 | AA |
| Red 2 (#F5405C) | Dark Blue (#1C1548) | 4.62:1 | AA |
CSS Variables Reference
Black--color-black#000000
White--color-white#FFFFFF
Dark Blue--color-dark-blue#1C1548
Light Blue--color-light-blue#E0E6FE
Dark Gray 2--color-dark-gray-2#353131
Dark Gray 3--color-dark-gray-3#222222
Blue 3--color-blue-3#0568FD
Dark Gray 4--color-dark-gray-4rgba(34,34,34,.4)
Light Red--color-light-red#FFDEDE
Dark Gray--color-dark-gray#333333
Blue 2--color-blue-2#009CFD
Red 2--color-red-2#F5405C
Light Gray--color-light-gray#E5E5E5
Light Gray 2--color-light-gray-2#F1ECEC
Primary Violet--primary-violate#553BF9
Primary Light--primary-light#6F58FF
Secondary Orange--secondary-orange#FF7C54
Eudoxussans--font-family-2Eudoxussans
System sans--font-family-basesans-serif
Regular--font-weight-regular400
Medium--font-weight-medium500
Bold--font-weight-bold700
2xs--font-size-2xs14px
xs--font-size-xs15px
sm--font-size-sm16px
base--font-size-base18px
lg--font-size-lg20px
xl--font-size-xl22px
2xl--font-size-2xl24px
3xl--font-size-3xl35px
4xl--font-size-4xl54px
5xl (Display)--font-size-5xl56px
Tight--letter-spacing-tight−1px
Normal (wide)--letter-spacing-normal+2px
Hairline--border-width-hairline1px
Thin--border-width-thin2px
Base (Accent)--border-width-base12px
xl (Circle)--radius-xl50%
Instant--duration-instant100ms
Fast--duration-fast200ms
Normal--duration-normal500ms
No shadow tokens defined
No opacity tokens defined
Background--z-1-1
Base Layer--z-21
Elevated--z-32
Interactive--z-43
Dropdowns--z-54
Modals / Overlays--z-61000
Design System Preview · Redbird (Light) · Generated 19/04/2026 · 16 color tokens · 10 font-size · 2 font-family · 3 font-weight · 9 line-height · 2 letter-spacing · 26 spacing · 4 radius · 3 border-width · 0 shadow · 3 duration · 0 easing · 6 z-index · 7 breakpoints · 0 opacity