# Design System — # Egypt

Tokens are defined in `src/app/globals.css` (Tailwind CSS v4 `@theme inline`) and consumed via utility classes.
This file documents the system for designers and engineers.

## Brand palette (logo)

Derived from the two colours of `public/assets/brand/logo.jpeg`:
navy `#17243d` and red `#d72631`.

| Token | Value | Usage |
|---|---|---|
| `brand-700` | `#344d7f` | Logo navy — eyebrows, mid-tone accents |
| `brand-800` | `#263b64` | Links / headings-on-white |
| `brand-950` | `#17243d` | Logo navy — dark sections, footer, hero, utility bar |
| `accent-red-600` | `#d72631` | Logo red — primary CTAs |
| `ink-900` | `#17243d` | Body / heading ink |
| `warm-100` | `#f5f7f9` | Section backgrounds, dividers |
| `warm-200` | `#e2e6ee` | Borders |

Full scales exist for brand (50–950), accent-red (50/500/600/700), ink (400/500/600/700/800/900),
warm (100/200/300). There is no teal accent.

## Typography

| Role | Font | Sizes |
|---|---|---|
| Body | Inter (`--font-sans`) | base 16px; `leading-relaxed` |
| Headings | Manrope (`--font-heading`) | `h-display` 4xl→6xl; `h-section` 2xl→2.75rem; `h-huge` reserved |

Utilities: `.font-heading`, `.h-display`, `.h-section`, `.text-balance`, `.text-pretty`.

## Layout primitives

- `.container-site` — `max-w-[1440px]`, px-5/sm:px-8/lg:px-12.
- Sidebar column pages: `grid ... lg:grid-cols-12`, aside `lg:col-span-3` (sticky `top-[144px]`), content `lg:col-span-9`.
- Page hero variants: `PageHero` (full with image overlay) and `compact` (privacy/legal, people detail).

## Components inventory

**UI primitives (`src/components/ui/`)** — shadcn v4: `button`, `card`, `checkbox`, `dialog`, `input`, `label`,
`navigation-menu`, `scroll-area`, `select`, `separator`, `sheet`, `skeleton`, `tabs`, `textarea`, `accordion`, `badge`
+ custom `reveal` (scroll animation) and `animated-counter`.

**Layout (`src/components/layout/`)**: `brand-logo`, `site-header` (utility bar + mega menus), `header-shell` (state
hub for mobile/search state), `mobile-menu` (Sheet + accordion), `search-panel` (full-width header search), `footer`, `cookie-preferences`.

**Shared (`src/components/shared/`)**: `page-hero` (also exports `Breadcrumbs`), `section-heading` (`SectionHeading`,
`ArrowLink`, `CTABand`).

**Template :: feature**:
- `components/home/*` — hero, stats, expertise-explorer, industries-preview, insights-preview, careers-promo.
- `components/services/service-detail.tsx` — `ServicesSidebar` + detail renderer.
- `components/industries/industry-detail.tsx` — `IndustriesSidebar` + detail renderer.
- `components/careers/careers-subpage.tsx` — `CareersSidebar` + shared subpage template.

## Motion

- `.reveal` / `is-visible` — IntersectionObserver-driven fade+rise (0.7s `cubic-bezier(0.22,1,0.36,1)`); `@media
  (prefers-reduced-motion: reduce)` disables globally.
- `.animate-heroIn` — hero content entrance.
- `tw-animate-css` for shadcn data-state animations; `--animate-marquee` reserved.
- Shadows: `shadow-soft`, `shadow-card`, `shadow-float` (navy-tinted, `rgb(23 36 61 / …)`).

## Accessibility

- All interactive hero controls expose `role="tablist"/"tab"` + `aria-selected`; keyboard arrows/Home/End navigate.
- Dialog/sheet focus trapped by Radix; `sr-only` labels where icons-only.
- Contrast: `brand-800 #263b64` on white ≈ 11.1:1; white on `brand-950` ≈ 15.5:1; `brand-100` on `brand-950` for hero body.
- Semantic landmarks: `<header>`, `<footer>`, `<nav aria-label>`, breadcrumb `nav` with `aria-current="page"`.