# Alpha Drive AI — Brand Site

Static brand-guidelines site for **Alpha Drive AI**, served at
`brand.alphadriveai.com`. It exists so people and AI agents can read the brand
rules and pull correctly formatted logo files.

There is no build framework and no client-side rendering. The site is plain
HTML, one CSS file, Markdown, and static SVG/PNG assets. The only JavaScript is
a short inline script in `index.html` that switches the page background color
(dark by default, light optional). Everything else works with scripting off.

## For AI agents

To conform to the Alpha Drive AI brand, read these in order:

1. **[brand-guidelines.md](brand-guidelines.md)** — the rules: logo usage, the
   full color table (HEX / RGB / CMYK), typography, the slice, do/don't, font
   licensing, and a complete asset index with links.
2. **[logo/](logo/)** — the official outlined wordmark (`logo.svg`) and AD/AI icon
   (`Icon.svg`), with PNGs at `@0.5x` / `@2x` / `@4x`.
3. **[assets/](assets/)** — the supporting monograms, all on a transparent
   background. SVG is plain text, so you can read the vector directly. Naming:
   `<name>__transparent.svg`; PNG raster adds a scale, e.g.
   `<name>__transparent@4x.png` (`@2x` / `@4x` / `@8x`).

### Quick brand facts

- **Primary accent:** Alpha Red `#E30613` — the only accent. Never tint or gradient it.
- **Default surface:** Ink Black `#0A0A0C`. Text on it is Paper `#FFFFFF` or Smoke `#F2F2F0`.
- **Light surface:** Smoke `#F2F2F0`, with Ink Black text.
- **Wordmark:** ALPHA DRIVE AI, Arial Black 900, italic at -14°, with the horizontal slice.
- **Logos available:** official `logo` (wordmark) and `icon` (AD/AI) in `logo/`;
  supporting monograms `wordmark-with-tagline`, `mono-sliced-a`, `mono-ad-plate`,
  `mono-adai-plate` in `assets/`.

## Files

| Path | What it is |
|------|------------|
| `index.html` | The page. Static HTML; one inline script for the background switch only. |
| `styles.css` | All styling. Dark and light themes via CSS custom properties. |
| `brand-guidelines.md` | The written brand rules (agent-facing). |
| `llms.txt` | Machine-readable pointer file for AI agents. |
| `logo/` | Official outlined wordmark (`logo.svg`) and AD/AI icon (`Icon.svg`) + PNGs (@0.5x / @2x / @4x). Also the favicon. |
| `assets/*.svg` | Supporting monogram vectors (4 marks, transparent background). |
| `assets/*.png` | Supporting monogram raster at @2x / @4x / @8x (same naming as the SVGs). |
| `build-logos.mjs` | Build-time generator for the SVG files. Not loaded by the site. |

## Regenerating the SVG logos

The SVGs are produced from `build-logos.mjs`. It converts every glyph to true
outline `<path>` geometry (font-independent) using the Arial Black font +
opentype.js, so the marks render identically everywhere. To rebuild them:

```
npm install opentype.js
node build-logos.mjs
```

This requires the Arial Black font locally (Monotype, licensed; on Windows at
`C:/Windows/Fonts/ariblk.ttf`, overridable via the `ARIAL_BLACK` env var) and
writes the 4 supporting-monogram SVG files into `assets/` (one transparent
variant per mark). The
font is only needed to *rebuild* the SVGs; the committed SVGs and the site itself
need no font at run time. (`wordmark-refined` and `mono-shield-a` are no longer
generated — the site uses the official `logo/logo.svg` and `logo/Icon.svg`.)

PNG raster files are produced as artwork and dropped into `assets/` using the
same base names plus an `@<scale>x` suffix (see the table above).