Back

Colors

FindborgUI uses OKLCH color space with hex fallbacks for perceptually uniform shading and maximum vibrancy.

Beach Color Story 🏖️

All colors inspired by Hernando Beach, Florida

🌊 Water (Blue)
🌿 Seagrass (Green)
🌅 Sunset (Orange)
☀️ Sun (Red)
🏖️ Shallow Water (Cyan)

Brand 1 - Blue 🌊

Water/Ocean - Primary brand color

0
--brand-1-0
1
--brand-1-1
2
--brand-1-2
3
--brand-1-3
4
--brand-1-4
5
--brand-1-5
6
--brand-1-6
7
--brand-1-7
8
--brand-1-8
9
--brand-1-9
10
--brand-1-10

Brand 2 - Green 🌿

Seagrass/Beach Vegetation - Success states

0
--brand-2-0
1
--brand-2-1
2
--brand-2-2
3
--brand-2-3
4
--brand-2-4
5
--brand-2-5
6
--brand-2-6
7
--brand-2-7
8
--brand-2-8
9
--brand-2-9
10
--brand-2-10

Brand 3 - Orange 🌅

Sunset/Sunrise - Warning states

0
--brand-3-0
1
--brand-3-1
2
--brand-3-2
3
--brand-3-3
4
--brand-3-4
5
--brand-3-5
6
--brand-3-6
7
--brand-3-7
8
--brand-3-8
9
--brand-3-9
10
--brand-3-10

Brand 4 - Red ☀️

Sun - Error states

0
--brand-4-0
1
--brand-4-1
2
--brand-4-2
3
--brand-4-3
4
--brand-4-4
5
--brand-4-5
6
--brand-4-6
7
--brand-4-7
8
--brand-4-8
9
--brand-4-9
10
--brand-4-10

Brand 5 - Cyan 🏖️

Shallow Tropical Water - Secondary brand color, info states

0
--brand-5-0
1
--brand-5-1
2
--brand-5-2
3
--brand-5-3
4
--brand-5-4
5
--brand-5-5
6
--brand-5-6
7
--brand-5-7
8
--brand-5-8
9
--brand-5-9
10
--brand-5-10

Neutral Palette

Grayscale for text, borders, and backgrounds

0
--neutral-0
50
--neutral-50
100
--neutral-100
200
--neutral-200
300
--neutral-300
400
--neutral-400
500
--neutral-500
600
--neutral-600
700
--neutral-700
800
--neutral-800
900
--neutral-900

Semantic Colors

Use semantic tokens in components instead of direct brand colors

Primary
--color-primary
Main brand color (Brand-1 Blue)
Secondary
--color-secondary
Secondary actions (Brand-5 Cyan)
Success
--color-success
Success states (Brand-2 Green)
Warning
--color-warning
Warning states (Brand-3 Orange)
Error
--color-error
Error states (Brand-4 Red)
Info
--color-info
Informational states (Brand-5 Cyan)

Usage Example

/* Use semantic tokens in components */
.button-primary {
  background: var(--color-primary);
}

/* Use brand shades for variations */
.button-primary:hover {
  background: var(--brand-1-4);  /* Lighter shade */
}

/* Use neutrals for text and borders */
.card {
  color: var(--color-text);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}