Color System

Brand Colors

Primary (Orange)

50

#fff5f2

100

#ffe8e0

200

#ffd1c0

300

#ffb399

400

#ff8a66

500

#FF6B35

600

#E55A2B

700

#CC4F22

800

#B2441A

900

#993A15

Primary 500 (#FF6B35) is our main brand color - used for CTAs, links, and brand elements.

---

Text Colors

Primary

#1A1A1A

Secondary

#6C757D

Muted

#ADB5BD

Inverse

#FFFFFF

---

Status Colors

Success

#28A745

Warning

#FFC107

Error

#DC3545

Info

#17A2B8

---

Background Colors

Primary

#FFFFFF

Secondary

#F8F9FA

Tertiary

#E9ECEF

---

Usage in Code

Tailwind CSS

// Primary brand color
<button className="bg-[#FF6B35] hover:bg-[#E55A2B] text-white">
  Book Now
</button>

// Status colors
<span className="text-[#28A745]">Success</span>
<span className="text-[#DC3545]">Error</span>

CSS Variables

:root {
  --juniro-primary: #FF6B35;
  --juniro-primary-hover: #E55A2B;
  --juniro-text-primary: #1A1A1A;
  --juniro-text-secondary: #6C757D;
  --juniro-success: #28A745;
  --juniro-error: #DC3545;
}

---

Accessibility

All color combinations meet WCAG 2.1 AA standards:

Combination	Contrast	Level
#1A1A1A on #FFFFFF	15.6:1	AAA
#FFFFFF on #FF6B35	3.2:1	AA (large text)
#FFFFFF on #28A745	3.1:1	AA (large text)

---

Colors are defined in juniro-design/src/tokens/colors.ts