Typography

Y3NKO uses a two-font system: Syne for display/headings and Outfit for body text.

Font Stack

:root {
  /* Display & Headings: Bold geometric, modern African character */
  --font-display: "Syne", ui-sans-serif, system-ui, sans-serif;
 
  /* Body: Geometric, clean, readable */
  --font-body: "Outfit", ui-sans-serif, system-ui, sans-serif;
 
  /* Code: Technical contexts */
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

Font Roles

Font	Role	Character
Syne (700-800)	Hero headlines, section headings, buttons, nav, badges	Bold geometric, confident, distinctly modern African
Syne (600)	Subheadings, card titles, labels	Same family, lighter for hierarchy
Outfit (300-500)	Body text, descriptions, forms	Clean, geometric, readable complement

Type Scale

Element	Desktop	Mobile	Font	Weight
Hero Display	60-72px	36-48px	Syne	800 (extrabold)
H1 (Page title)	40-48px	28-36px	Syne	800
H2 (Section)	24-36px	22-28px	Syne	700
H3 (Card/Sub)	18-24px	16-20px	Syne	700
Body	16px	16px	Outfit	400
Small	14px	14px	Outfit	400-500
Caption/Label	12px	12px	Syne	600 (uppercase)

Implementation

Next.js Font Setup

// app/layout.tsx
import { Syne, Outfit } from 'next/font/google'
 
const syne = Syne({
  subsets: ['latin'],
  variable: '--font-syne',
  weight: ['600', '700', '800'],
})
 
const outfit = Outfit({
  subsets: ['latin'],
  variable: '--font-outfit',
  weight: ['300', '400', '500'],
})
 
export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${syne.variable} ${outfit.variable}`}>
      <body>{children}</body>
    </html>
  )
}

Tailwind CSS

/* globals.css */
@layer base {
  body {
    font-family: var(--font-body);
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--night);
  }
}

Usage Examples

Hero Display

<h1 className="font-display font-extrabold text-4xl sm:text-5xl md:text-7xl text-white tracking-tight">
  Discover Ghana
</h1>

Section Heading

<h2 className="font-display font-bold text-2xl md:text-3xl text-[var(--night)] tracking-tight">
  Featured Accommodations
</h2>

Card Title

<h3 className="font-display font-bold text-lg text-[var(--night)] group-hover:text-[#CE1126] transition-colors">
  Luxury Beach Villa
</h3>

Body Text

<p className="text-[var(--dusk)] leading-relaxed">
  Experience the beauty of Ghana's coastline in this stunning beachfront property.
</p>

Caption/Label

<span className="font-display text-xs font-semibold uppercase tracking-wider text-[var(--dusk)]">
  Greater Accra
</span>

Utility Classes

Font Family

.font-display   // Syne - headings, buttons
.font-body      // Outfit - body text (default)
.font-mono      // JetBrains Mono - code

Text Wrapping

.text-balance   // Balanced line breaks
.text-pretty    // Pretty line breaks

Example:

<h1 className="text-balance">
  Discover the Heart of Ghana Through Authentic Experiences
</h1>

Component Typography

Button

<Button className="font-display font-semibold text-base">
  Book Now
</Button>

Input Labels

<Label className="font-display text-sm font-medium text-[var(--bark)]">
  Email Address
</Label>

Form Input

<Input className="font-body text-base" placeholder="Enter your email" />

Badge

<Badge className="font-display text-xs font-semibold uppercase tracking-wide">
  Featured
</Badge>

Line Heights

Usage	Value	Tailwind
Headings	1.1-1.2	`leading-tight`
Body	1.5-1.7	`leading-relaxed`
Tight body	1.4	`leading-snug`

Letter Spacing

Usage	Value	Tailwind
Headings	-0.02em	`tracking-tight`
Uppercase labels	0.05em	`tracking-wider`
Body	Normal	default

Responsive Typography

Use Tailwind’s responsive prefixes:

<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl">
  Responsive Heading
</h1>

Recommended Responsive Scale

Element	sm	md	lg
Hero	text-4xl	text-5xl	text-7xl
H1	text-3xl	text-4xl	text-5xl
H2	text-2xl	text-3xl	text-4xl
Body	text-base	text-base	text-lg

Accessibility

Minimum body text: 16px (1rem)
Sufficient line height for readability
High contrast ratios (see Colors)
No text below 12px except for captions

Colors Spacing