# ai.pt — Brand Kit

The complete brand package for **ai.pt**, the home of AI in Portugal.
This kit is self-contained: every logo, icon, colour, font and rule needed to
produce on-brand material is in this folder. If an instruction here conflicts
with anything else, this file wins.

---

## 1. The name

- The brand name is written **ai.pt — always lowercase**.
- Correct: `ai.pt`
- Wrong: `AI.pt`, `Ai.pt`, `AI.PT` — never capitalise it, even at the start
  of a sentence, in a headline, or in all-caps layouts.
- Tagline: **The home of AI in Portugal**
- One-line description: *To help Portugal become a world leader in AI.*
- One-paragraph description: *ai.pt is on a mission to help Portugal become a
  world leader in Artificial Intelligence. ai.pt operates a product studio,
  community initiatives and an investment fund, all focused on AI and based in
  Portugal. Visit ai.pt to learn more.*

## 2. Logo — `logo/`

The wordmark is drawn artwork (exact circles and quarter-circles).
**Never retype "ai.pt" in a font as a logo substitute.** Use the files.

| File | Use on |
|---|---|
| `logo/svg/ai-pt-logo-light-mode.svg` | White or light backgrounds (DEFAULT) |
| `logo/svg/ai-pt-logo-dark-mode.svg` | Navy, dark, or dark-photo backgrounds |
| `logo/svg/ai-pt-logo-mono-white.svg` | Orange backgrounds, busy imagery, one-colour dark |
| `logo/svg/ai-pt-logo-mono-navy.svg` | One-colour print, engraving, light one-colour uses |

PNG equivalents (transparent background) are in `logo/png/` at 2048px and
1024px widths. **Prefer SVG whenever the medium allows.**

Choosing a variant:
- Light background → light-mode (navy + orange).
- Dark background → dark-mode (white + orange).
- Orange background → mono-white ONLY (never navy on orange).
- If contrast is ever in doubt → mono-white.

Rules:
- Clear space: keep a margin of **x on all sides**, where x = the stem width
  of the letter *i* (the SVG is 1030×474 units; the stem is 64 units, so
  clear space = 6.2% of the logo's width).
- Minimum size: 120px wide digital, 20mm print. Below that, use the icon.
- DO NOT: skew, rotate, stretch, add effects/shadows/gradients, recolour,
  outline, place navy logo on mid-tone or orange fields, attach words or
  sub-brand names to the lockup, or separate/redraw the orange marks.

## 3. Icon / favicon — `icon/`

The icon is the **orange quarter-circle** — the tittle of the *i* in ai.pt.
Use it wherever the wordmark cannot fit: favicons, app tiles, small avatars.

| File | Use |
|---|---|
| `icon/svg/ai-pt-favicon.svg` | Favicon / app tile: orange mark on navy square, full bleed |
| `icon/png/ai-pt-favicon-512 / 192 / 180 / 64 / 32 / 16.png` | Raster favicon set (180 = apple-touch-icon) |
| `icon/svg/ai-pt-icon-orange.svg` | The bare mark, transparent — for use on white or navy |
| `icon/svg/ai-pt-icon-white.svg` | Bare mark in white — on orange or photography |
| `icon/svg/ai-pt-icon-navy.svg` | Bare mark in navy — light one-colour uses |

Rules: always this orientation (square corner top-left, curve to bottom-right).
Never rotate it, never pair it with letters, never use it as a bullet point.

Favicon HTML:
```html
<link rel="icon" href="/ai-pt-favicon.svg" type="image/svg+xml">
<link rel="icon" href="/ai-pt-favicon-32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/ai-pt-favicon-180.png">
```

## 4. Colour

Primary:
- **Deep Navy `#11224E`** — rgb(17,34,78). The brand's ground: backgrounds, text, surfaces.
- **Signal Orange `#F78025`** — rgb(247,128,37). A signal, not a surface: one accent per composition.

Secondary (tints, for charts/illustration/depth — never as main brand colours):
- Navy 800 `#1A3B70` · Navy 600 `#2C589C` · Navy 400 `#5C82C3` · Orange 400 `#FA9A51`

Neutrals: White `#FFFFFF` · Surface `#F3F4F7` · Rule/border `#E6E8EE`

Usage rules:
- Ratio ≈ **70% navy · 20% neutral · 10% orange**.
- At most one orange-dominant piece in nine; the rest navy/white.
- On an orange background, text and logo are **white only**.
- Never: orange background with tile patterns; orange body text on white
  below 20px; orange and navy at equal visual weight.
- Dark mode: background #11224E, text #FFFFFF, accent #F78025.
- Light mode: background #FFFFFF, text #11224E, accent #F78025.

Machine-readable tokens: `brand.json` · CSS custom properties: `tokens.css`.

## 5. Typography — `fonts/`

Two typefaces, no third:
- **Manrope** — ALL headlines and display text. Bold (700) for statements,
  ExtraLight (200) for large editorial openers.
- **Inter** — ALL body copy, UI, captions, data.

Files (variable fonts, all weights included):
`fonts/Manrope-Variable.ttf` · `fonts/Inter-Variable.ttf` ·
`fonts/Inter-Italic-Variable.ttf`
Both are open source (SIL OFL, licences included) and also available on
Google Fonts under "Manrope" and "Inter". `fonts/fonts.css` has ready
@font-face rules.

Type rules:
- Headlines: Manrope, tight letter-spacing (−0.02em to −0.045em at display sizes).
- Body: Inter 400, line-height ≈ 1.7, colour #11224E (or rgba(17,34,78,0.72) for secondary text).
- Eyebrows/labels: Inter 500, uppercase, letter-spacing 0.42em, small (11px).
- Never end a line with a word of ≤3 letters (to, and, a, an, or) — rebreak manually.
- If text doesn't fit, reword it. Never shrink type or move layout elements to make it fit.

## 6. Voice

- Third person, always: "ai.pt is…" — **never "we", never "our"**.
- Formal, clean, professional. No hype, no exclamation marks, no emoji.
- Correct: "ai.pt is a platform at the intersection of AI and Portugal, with
  the mission to help Portugal become a global leader in AI."
- Wrong: "We are at the intersection of AI and Portugal, and our mission is…"

## 7. Imagery

- Subjects: Portuguese urban landscapes and streets; natural-looking people going about their day.
- Treatment: photorealistic, high detail, cool colour cast.
- Generation prompt template: `[subject] — photography, photorealism, highly detailed, 1920x1080, 4k`.
- Logo over photos: dark photo → dark-mode logo; light photo → light-mode; if neither reads → mono-white.
- Always export PNG at full resolution.

## 8. Web & accounts

- Primary domain: **ai.pt** · Secondary: ia.pt
- TikTok `@ai.pt` · Instagram `@ai.pt.home` · YouTube `@aiportugalhome` ·
  Facebook `@ai.pt.home` · LinkedIn `@aiportugal` · X `@AiPortugal`

## File index

```
ai-pt-brand-kit/
├── README.md            ← you are here (the single source of truth)
├── brand.json           ← all tokens, machine-readable
├── tokens.css           ← CSS custom properties + type styles
├── logo/
│   ├── svg/             ← 4 variants (source of truth, infinitely scalable)
│   └── png/             ← same 4 variants @ 2048w and 1024w, transparent
├── icon/
│   ├── svg/             ← favicon + bare mark in orange/white/navy
│   └── png/             ← favicon 512/192/180/64/32/16 + bare marks @512
└── fonts/
    ├── Manrope-Variable.ttf, Inter-Variable.ttf, Inter-Italic-Variable.ttf
    ├── fonts.css        ← @font-face rules
    └── OFL-Manrope.txt, OFL-Inter.txt (licences)
```
