# Exaflair brand, for designers

The brand kit (`brandkit.pdf` in Drive, folder "new") is the source. This is the working
summary: what is stated in the kit, what we inferred from it, and what it does not cover.
Values marked **[inferred]** were read from the kit's images, not from its text.
Tokens live in `tokens.css` / `tokens.json` next to this file; use those in code.

## Color

| Token | Name | HEX | RGB | CMYK | Role |
|---|---|---|---|---|---|
| `--color-tangerine` | Tangerine | `#F08000` | 240, 128, 0 | 0, 47, 100, 6 | Primary. The one accent. |
| `--color-yellow-orange` | Yellow Orange | `#FFAA33` | 255, 170, 51 | 0, 33, 80, 0 | Secondary. Highlights, hover, warm tints. |
| `--color-white` | White | `#FFFFFF` | 255, 255, 255 | 0, 0, 0, 0 | Surfaces, type on dark. |
| `--color-almost-black` | Almost Black | `#111111` | 17, 17, 17 | 0, 0, 0, 93 | Dark ground, type on light. |
| `--color-burnt-orange` | (gradient end) | `#CA5C2A` | — | — | Only as the bottom of the gradient. **[inferred]** |
| `--color-off-white` | (light ground) | `#F1F1F1` | — | — | Light-mode page background. **[inferred]** |

**Gradient:** vertical, Tangerine at the top to burnt orange at the bottom
(`--gradient-brand`). The kit shows it as a tall panel; use it for large fields, not text.

**How to use it:** the brand is dark-dominant. Almost Black grounds with orange as the single
color pop is the default look; light mode is off-white, not pure white. Tangerine is an
accent, not a fill: one or two orange moments per screen. Yellow Orange is for a second
tier of emphasis and never replaces Tangerine as the primary.

## Typography

One typeface: **Montserrat**, in five weights: Light 300, Regular 400, Medium 500,
SemiBold 600, Bold 700. It is an open-source Google Font (OFL); load it from Google Fonts
or self-host. No secondary or display face is specified; do not introduce one.

Observed usage in the kit **[inferred]**:

- Wordmark `EXAFLAIR`: all caps, Regular or Medium, very wide tracking
  (`--tracking-wordmark`, 0.34em). Always set as caps with that spacing.
- Headlines: Medium/SemiBold, tight leading. Bold is used sparingly.
- Body: Light or Regular.
- Numbers and specs in the kit are set small with slightly wide tracking.

Type scale in tokens: 12 / 14 / 16 / 18 / 22 / 28 / 36 / 48 / 64, plus a fluid display size.

## Logo

The mark is an **X + F monogram**: the X's two strokes cross behind an F. One X stroke is
Tangerine; the other X stroke and the F take the contrast color.

| On | X stroke 1 | X stroke 2 + F | File |
|---|---|---|---|
| Light / off-white | Tangerine | Almost Black | `logos/png/*-light*.png` |
| Dark / Almost Black | Tangerine | White | `logos/png/*-dark*.png` |
| Orange field | Almost Black | White | `logos/png/*-orange.png` |
| Any (one-color) | — | Black or white only | `logos/png/*-mono-transparent.png` |

Two lockups: **stacked** (monogram above the wordmark, square) and **horizontal** (monogram
left of the wordmark, wide). Both exist as solid-background and transparent PNGs. Vector
files (SVG, PDF, EPS) exist for the stacked lockup in black and white only; ask the kit
owner for vector versions of the horizontal lockup.

Grey backgrounds: the kit shows the logo on five light greys and five dark greys. Use the
light version (black F) up to mid-grey and the dark version (white F) from mid-grey down.

Files: `brand/logos/png/` (12 PNGs, 6100x1765 horizontal, 3000x3000 stacked) and
`brand/logos/vector/` (SVG/PDF/EPS, black and white). Served at `/brand/logos/...` on the
design-context site.

## Tagline and voice

- Tagline: **"Powered by intelligence, driven by flair"**, with the `ai` in *flair* set in
  Tangerine. In the kit it appears in caps under the wordmark: `POWERED BY INTELLIGENCE
  DRIVEN BY FLAIR`.
- Supporting lines from the kit: "Where scale meets talent." "Exa brings the scale of a
  quintillion. Flair adds the finesse with intelligence built in." (The kit spells it
  "Quinitillian"; the intended word is quintillion, the meaning of the exa- prefix.)
- Positioning copy: "Plug in product minds, AI-boosted builders, and systems that scale
  without the overheads. Bootstrap or scale with our vetted talent powered by
  industry-leading AI workflows."
- Tone: direct and specific. Say what was built and what it does. No filler adjectives, no
  "innovative solutions", no exclamation marks. Short sentences over long ones.

## Imagery

**[inferred]** Dark, desaturated technology and concrete photography with the logo as the
only saturated element. A tonal repeating-monogram pattern on dark grey is used as texture.
Collateral in the kit: business cards, envelopes, letterhead, signage, website.

## Not in the kit (decide before relying on it)

- Logo clear space and minimum size.
- Misuse rules (stretching, recoloring, drop shadows).
- Icon style, illustration style, photography licensing.
- Accessible contrast guidance. Note: Tangerine on white is about 2.9:1 and on Almost Black
  about 7.0:1, so orange text is fine on dark grounds and only for large text on light.