Flaibo Design System

Complete component library and token reference

Typography

Display (36px / 700 / -1px tracking)

The quick brown fox jumps over the lazy dog

H1 (28px / 700 / -0.8px tracking)

The quick brown fox jumps over the lazy dog

H2 (20px / 600 / -0.5px tracking)

The quick brown fox jumps over the lazy dog

H3 (16px / 600 / -0.3px tracking)

The quick brown fox jumps over the lazy dog

Body-lg (15px / 400)

The quick brown fox jumps over the lazy dog

Body (13px / 400)

The quick brown fox jumps over the lazy dog

Caption (11px / 400)

The quick brown fox jumps over the lazy dog

Label (10px / 600 / uppercase)

Label text example

Mono (12px / 400)

const example = 'Monospace Font';

Color Palette

Surface

Primary #FFFFFF

Secondary #F8FAFC

Muted #F1F5F9

Text

Primary #0F172A

Secondary #374151

Muted #64748B

Hint #94A3B8

Accent

Primary #2563EB

Dark #1D4ED8

Surface #EFF6FF

Semantic

Success #059669

Warning #F59E0B

Error #EF4444

Buttons

Primary Variant

Secondary Variant

Ghost Variant

Cards

Standard Card

Default card styling with border-default

Featured Card

Accent border (1.5px) for highlighted content

Badges

Accent

Accent Badge

Success

Success Badge

Warning

Warning Badge

Neutral

Neutral Badge

Chips

Role

Admin

Status

Active

Success

Completed

Warning

Pending

Error

Failed

Inputs

Default Input

Focused Input

Disabled Input

Progress Bar

Progress 25%

Progress 50%

Progress 75%

Progress 100%

Avatars

Small (28px)

JDAB

Medium (36px)

JDAB

Large (44px)

JDAB

Spacing & Border Radius

Border Radius

SM (6px)

MD (8px)

LG (10px)

XL (12px)

Tokens Reference

Available Tokens

All tokens are available in lib/tokens.ts

• tokens.surface.primary, secondary, muted

• tokens.text.primary, secondary, muted, hint

• tokens.accent.primary, dark, surface, border, subtle

• tokens.border.default, medium

• tokens.semantic.success, warning, error

• tokens.radius.sm, md, lg, xl

• chartColors array for data visualization

Design System v1.0 - Light mode only