Colors

Y3NKO’s color palette is inspired by the Ghanaian flag and enriched with warm earth tones.

Brand Colors

These are the core brand colors derived from the Ghana flag.

Ghana Red

The primary action color. Used for CTAs, hero backgrounds, and interactive elements.

--ghana-red: #CE1126;
--ghana-red-dark: #9E0D1D; /* Hover state */

Usage	Example
Primary buttons	`bg-[#CE1126] hover:bg-[#9E0D1D]`
Hero backgrounds	Accommodation hero section
Links	`text-[#CE1126] hover:underline`
Card hover accents	Title hover state

Ghana Gold

The accent color. Used for focus rings, search CTA, star ratings, and highlights.

--ghana-gold: #D4A853;
--ghana-gold-light: #F2E4C4;

Usage	Example
Focus rings	`focus-visible:ring-[#D4A853]`
Star ratings	`fill-[#D4A853] text-[#D4A853]`
Nav active underlines	Border-bottom accent
Warm glow shadows	`--shadow-warm-glow`

Ghana Green

Secondary accent. Used for activities section, success states, and nature-related content.

--ghana-green: #006B3F;
--ghana-green-dark: #004D2D;

Usage	Example
Activities hero	Green gradient background
Success messages	Toast notifications
Nature badges	Activity difficulty badges

Earth Tones

Warm secondary colors that complement the brand palette.

--terracotta: #C75B39;  /* Warm accent, featured elements */
--clay: #9B5E3C;        /* Secondary warm */
--sand: #E8D5B7;        /* Warm light surface */
--warm-cream: #F5EDE4;  /* Subtle backgrounds */

Color	Usage
Terracotta	CTA gradients, warm accents in featured cards
Clay	Secondary borders, subtle accents
Sand	Warm section backgrounds

Dark Colors

Warm blacks and browns, never pure gray.

--night: #1A1210;   /* Darkest — body text, headings */
--coffee: #2C1810;  /* Footer, header, dark sections */
--bark: #3D2E25;    /* Secondary text */
--dusk: #6B5549;    /* Muted text, captions */

Color	Usage
Night	Primary text, h1-h6 headings
Coffee	Header, footer backgrounds
Bark	Secondary text
Dusk	Muted text, placeholders

Surface Colors

Light, warm backgrounds for content areas.

--paper: #FAF6F1;   /* Lightest warm surface */
--canvas: #F0E8DF;  /* Card backgrounds */
--linen: #E5DCD2;   /* Borders, dividers */

Color	Usage
Paper	Page backgrounds, lightest sections
Canvas	Card backgrounds, alternating sections
Linen	Borders, dividers, input borders

Functional Colors

Semantic colors for status and feedback.

--success: #2D8A56;
--warning: #D4873E;
--error: #CE1126;    /* Same as Ghana Red */
--info: #3B7CB8;

Color Usage Rules

Color	When to Use
Ghana Red	Primary CTAs, hero backgrounds (accommodations), links, card hover
Ghana Gold	Focus rings, search button, icon accents, star ratings, nav active underlines
Ghana Green	Activities hero, success states
Coffee/Night	Header, footer, dark sections, body text
Paper/Canvas/Linen	Page backgrounds, card surfaces, borders
Terracotta	CTA gradients, warm accents in featured elements

WCAG Contrast

All color combinations meet WCAG AA standards:

Combination	Ratio	Passes
Night on Paper	15.8:1	AAA
Ghana Red on Paper	5.2:1	AA (large text)
Dusk on Paper	4.7:1	AA
White on Ghana Red	4.6:1	AA
Ghana Gold on Coffee	6.3:1	AA

Using Colors in Code

Direct Hex Values

For brand colors, use direct hex values for consistency:

<button className="bg-[#CE1126] hover:bg-[#9E0D1D] text-white">
  Book Now
</button>

CSS Variables

For theming and consistency:

<div className="text-[var(--night)] bg-[var(--paper)]">
  Content
</div>

Tailwind Theme

For shadcn/ui integration:

<Button variant="default">
  {/* Uses primary color from theme */}
</Button>

Gradients

Hero Gradient

Dark overlay for hero images:

.gradient-hero {
  background: linear-gradient(
    135deg,
    rgba(44, 24, 16, 0.85) 0%,
    rgba(26, 18, 16, 0.7) 50%,
    rgba(199, 91, 57, 0.4) 100%
  );
}

CTA Gradient

Warm gradient for CTA sections:

.gradient-cta {
  background: linear-gradient(
    135deg,
    #CE1126 0%,
    #C75B39 60%,
    #D4A853 100%
  );
}

Dark Gradient

Footer and dark sections:

.gradient-dark {
  background: linear-gradient(180deg, #2C1810 0%, #1A1210 100%);
}

Overview Typography