# HKA Group — Design System (machine-readable)

> For agents and tools designing anything under hka.group or its subdomains.
> Human version: https://hka.group/brand/

## Identity

- Company: HKA Group (legal: HKA Trading and Marketing Ltd, London, UK)
- What it does: business development, marketing, consultancy. Never use the word "services".
- Tagline pattern: "Inspired by Henry Kofi Amankwah" + "Marketing & consultancy · London"
- Single-theme brand: always the dark ink world. No light mode, no alternate palettes.

## Colour tokens

| Token      | Hex       | Use                                        |
|------------|-----------|--------------------------------------------|
| ink        | `#2D2A3C` | Page ground / background                   |
| ink-raised | `#302D3F` | Cards, panels, footer band                 |
| tan        | `#C8AA87` | THE accent: buttons, headings, rules, line art |
| sand       | `#DABD9C` | Hover / lightened accent                   |
| slate      | `#5A5869` | Hairline rules, dividers (not body text)   |
| mist       | `#BEBAC8` | Body / secondary text                      |
| white      | `#FFFFFF` | Headlines, primary text                    |
| paper      | `#EFEFEF` | Rare light panels only                     |

Rules: tan is the only accent — never introduce a new hue for emphasis; use weight and scale. Semantic colours (success/error) only inside app UIs, never in brand surfaces.

## Typography

| Role          | Font                  | Weight | Size        | Treatment                        |
|---------------|-----------------------|--------|-------------|----------------------------------|
| Display       | DIN Pro               | 700    | 48–60px     | UPPERCASE, line-height 1.05      |
| Heading       | DIN Pro               | 700    | 30–40px     | UPPERCASE                        |
| Label / nav   | DIN Pro               | 600    | 12–14px     | UPPERCASE, letter-spacing 3–4px  |
| Body          | Helvetica LT Light (fallback: Helvetica, Arial) | 400 | 16–18px | line-height 1.7, max 65ch |
| Caption/legal | DIN Pro               | 400    | 11–12px     | UPPERCASE, letter-spacing 2px    |

Font files (woff2): `/wp-content/themes/hka/fonts/` on hka.group (DIN Pro 400/600/700, Helvetica LT Std Light).

### Arabic

- Font: **IBM Plex Sans Arabic** (Google Fonts), weights 400 / 600 / 700 mapping to Helvetica-body / DIN-medium / DIN-bold roles.
- Never letter-space Arabic. Line-height ≥ 1.5 display, 1.8–2 body. Full RTL mirroring, including the corner language.
- Sample display line: مستوحاة من هنري كوفي أمانكوا

## Corner language (signature)

From the logo: curved where a stroke turns, sharp where it cuts. Round ONE diagonal pair (top-left + bottom-right), keep the other pair sharp.

| Element                | border-radius        |
|------------------------|----------------------|
| Images, panels, cards  | `28px 0 28px 0`      |
| Buttons                | `18px 0 18px 0`      |
| Small controls         | `10px 0 10px 0`      |
| Tiny rules/chips       | `2px 0 2px 0`        |
| App icons (exception)  | all corners, 22% of size |

## Components

- **Primary button**: solid tan block, ink text, two-line UPPERCASE DIN 600 label, arrow glyph (↘), hover → sand. Corner rule above.
- **Section rule**: 40×2px tan bar opens every section, above the heading.
- **Form fields**: underline-only inputs (2px slate rule), floating tan UPPERCASE label, focus turns the rule tan. No boxes.
- **Decorative art**: tan 1px line-art circles + zigzags overlaying duotone (ink-tinted) photography.
- **Facts strip**: single row of DIN 600 12px/4px-tracking uppercase facts between hairline rules.

## Motion

- Library: GSAP 3 + ScrollTrigger (+ Lenis smooth scroll on the site).
- Reveals: rise 30–40px + fade, `power3.out`, ~1s, trigger at 80–88% viewport, once.
- Headlines: word-by-word rise with overflow masks, stagger 0.03–0.08s.
- Ambient: background shapes drift forever — sine in/out, yoyo, 8–17s loops, ≤28px travel, ≤0.6° rotation. Felt, not seen.
- Always skip everything under `prefers-reduced-motion`.

## Voice

- Understated: never pitch, never "scream for clients". One idea stated with confidence.
- Factual: "Est. 2015 · London, United Kingdom · In memory of Henry Kofi Amankwah".
- Henry's words are quoted verbatim, never paraphrased.
- Say "business development, marketing and consultancy" — never "services".
- Contact: email only (info@hka.group). No phone, no social media.

## Assets

- Logo (full, tan on transparent): `/wp-content/uploads/2020/09/HKA-Group-Logo-full-reflection.png`
- Favicon mark (HK crown): `/icons/favicon-192.png`, `/icons/favicon-512.png`
- App icon (tan tile, rounded 22%): `/icons/icon-512.png`
- Theme colour / PWA background: `#2D2A3C`