Design System Overview

Y3NKO’s design system is bold, textured, and distinctly Ghanaian. Kente-inspired geometry, warm earth tones, grain textures, and layered depth create a visual identity that feels crafted and authentic.

Brand Identity

Name

Y3NKO (pronounced “Yen-ko”) is derived from the Akan phrase meaning “Let’s go” — capturing the spirit of adventure and invitation.

Brand Personality

• Warm & Welcoming: Like a friendly local guide
• Trustworthy: Professional yet approachable
• Vibrant: Celebrating Ghanaian culture
• Modern: Tech-forward but accessible

Design Direction

Every surface should feel like holding a woven cloth rather than looking at a generic screen. We achieve this through:

• Ghana flag colors as our primary palette
• Kente-inspired patterns for decorative elements
• Warm earth tones for backgrounds and surfaces
• Grain textures for visual depth
• Bold typography with geometric character

Design Principles

1. Authentically Ghanaian

Use colors, patterns, and imagery that celebrate Ghanaian culture without being clichéd. The design should feel modern and premium while being unmistakably African.

2. Mobile-First

70%+ of users will be on mobile devices. Every component and layout must work beautifully on small screens first.

3. Accessible

Meet WCAG AA standards. Ghana Gold focus rings provide high-visibility focus states. All interactive elements have appropriate touch targets.

4. Performance-Conscious

Design with performance in mind. Optimize images, use system fonts as fallbacks, and minimize layout shifts.

Tech Stack

Key Files

app/
├── globals.css           # Design tokens, custom utilities
└── layout.tsx            # Font configuration

components/
└── ui/                   # shadcn/ui components with customizations
    ├── button.tsx
    ├── card.tsx
    ├── input.tsx
    └── ...

CSS Custom Properties

All design tokens are defined as CSS custom properties in globals.css:

:root {
  /* Brand Colors */
  --ghana-red: #CE1126;
  --ghana-gold: #D4A853;
  --ghana-green: #006B3F;
 
  /* Earth Tones */
  --terracotta: #C75B39;
  --clay: #9B5E3C;
  --sand: #E8D5B7;
 
  /* Darks */
  --night: #1A1210;
  --coffee: #2C1810;
  --bark: #3D2E25;
  --dusk: #6B5549;
 
  /* Surfaces */
  --paper: #FAF6F1;
  --canvas: #F0E8DF;
  --linen: #E5DCD2;
 
  /* Shadows */
  --shadow-warm-sm: 0 1px 3px rgba(44, 24, 16, 0.08);
  --shadow-warm-md: 0 4px 12px rgba(44, 24, 16, 0.12);
  --shadow-warm-lg: 0 8px 24px rgba(44, 24, 16, 0.16);
}

Quick Reference

Primary Actions

<Button>Book Now</Button>
// Ghana Red (#CE1126) background

Secondary Actions

<Button variant="outline">View Details</Button>
// Border with red hover

Focus States

// All focusable elements get Ghana Gold ring
*:focus-visible {
  outline: 2px solid var(--ghana-gold);
  outline-offset: 2px;
}

Cards

<Card className="rounded-xl border-gray-100 hover:shadow-lg transition-shadow">
  {/* Content */}
</Card>

Component Architecture

Components follow a consistent pattern:

1. Base primitives from shadcn/ui
2. Custom variants via CVA
3. Y3NKO styling through Tailwind classes
4. Accessibility built-in

// Example: Button with CVA variants
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#D4A853] focus-visible:ring-offset-2",
  {
    variants: {
      variant: {
        default: "bg-[#CE1126] text-white hover:bg-[#9E0D1D]",
        outline: "border border-gray-300 hover:border-[#CE1126] hover:text-[#CE1126]",
        ghost: "hover:bg-gray-100",
      },
      size: {
        default: "h-12 px-6 py-3",
        sm: "h-9 px-4",
        lg: "h-14 px-8",
      },
    },
  }
)

Design Tokens in Use

Colors

See Colors for the complete palette.

Typography

See Typography for font families and scale.

Spacing

See Spacing for the spacing system.

Shadows

See Shadows for warm shadow utilities.

Motion

See Motion for animation guidelines.