# AISU — Brand Kit

> Colors, type, logo and visual language for anything AISU.
> Who she is and how she looks: see [CHARACTER.md](./CHARACTER.md).
> Ready-to-use CSS variables: [tokens.css](./tokens.css).

The look is called **Signal**. It mixes warm printed paper with a live transmission: cream stock, dark ink, risograph red, and an orange "0-1" signal that glows through it.

---

## Palette

### Core

| Name | Hex | Role |
|---|---|---|
| `paper` | `#EFE6C9` | Main background. Warm cream, never pure white. |
| `paper-2` | `#E6DBB8` | Secondary surfaces, cards, stripes. |
| `ink` | `#2B2322` | Text, lines, the wordmark. Warm near-black, never `#000`. |
| `ink-soft` | `#5B4D48` | Secondary text, captions. |
| `crimson` | `#B5434A` | AISU's red: アイス, eyebrows, accents, the offset "echo". Matches her hair. |
| `orange` | `#FF5A1F` | **The signal.** The 0-1 clips, live dots, glows. Use sparingly. |
| `teal` | `#6E9BB0` | Cold contrast in grid lines and glitch bars. Accent only. |
| `neon` | `#CCFF00` | Night mode accent. Electric, for highlights and CTAs on dark. |
| `night` | `#0D0C0B` | Night mode background. |

Rough proportion on a paper layout: **70% paper · 20% ink · 8% crimson · 2% orange.**

### Two modes

- **Paper (default):** `paper` background, `ink` text, `crimson` accents, `orange` for the signal.
- **Night:** `night` background, `paper` as text color, `neon` accents. Use it for drops, live moments and anything that should feel "on air". Don't mix neon into paper mode.

### Contrast (text legibility, WCAG)

| Text on `paper` | Ratio | Use for |
|---|---|---|
| `ink` | 12.3 : 1 | Any text |
| `ink-soft` | 6.5 : 1 | Any text |
| `crimson` | 4.4 : 1 | Large text and labels (≥ 18px or bold ≥ 14px) only |
| `orange`, `teal` | ≈ 2.5 : 1 | **Never text.** Dots, glows, lines only |

| Text on `night` | Ratio | Use for |
|---|---|---|
| `paper` | 15.7 : 1 | Any text |
| `neon` | 16.6 : 1 | Any text |
| `orange`, `teal` | ≈ 6.3 : 1 | Any text |
| `crimson` | 3.6 : 1 | Large text only |

---

## Typography

All four are free on Google Fonts.

| Family | Role | Notes |
|---|---|---|
| **[Anton](https://fonts.google.com/specimen/Anton)** | Display: the wordmark, headlines | Always UPPERCASE. Tight leading (0.85–0.95). |
| **[Noto Sans JP](https://fonts.google.com/noto/specimen/Noto+Sans+JP)** 900 | Japanese: アイス | Black weight only. Usually crimson. Often set vertically. |
| **[JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)** 400/700 | Labels, HUD, buttons, metadata | UPPERCASE, letter-spacing +0.04 to +0.2em. Feels like a transmission readout. |
| **[Inter](https://fonts.google.com/specimen/Inter)** 400/500/700 | Body copy | Sentence case. 500 for lead paragraphs. |

Hierarchy example: `VIRTUAL IDOL // AI MUSIC` (mono, crimson, 12px, +0.2em) → **AISU** (Anton, huge) → body line (Inter 500).

---

## Logo / wordmark

There is no drawn logo file. The mark is **typographic**:

```
AISU アイス
```

- **AISU** in Anton, `ink` on paper (or `paper` on night).
- **アイス** in Noto Sans JP 900, `crimson` (or `neon` in night mode), at about **half the cap height** of AISU.

### Lockups

| Lockup | Use |
|---|---|
| **Horizontal**: `AISU` + `アイス` on the same baseline, gap ≈ 0.3em | Nav bars, headers, small placements |
| **Hero**: huge `AISU`, `アイス` set **vertically** against its top-right corner | Posters, covers, first screens |
| **Monogram**: Anton "A", ink on a cream rounded square | Favicon, avatars at tiny sizes |

### Rules

- Keep clear space around the mark at least the height of the "A".
- Don't outline, stretch, rotate, add drop shadows or gradients to the wordmark.
- Don't set AISU in another typeface.
- Don't put アイス before AISU.
- On photos or art, place the wordmark on a calm area or on a `paper`/`night` block.

---

## Visual language

The motifs that make something look like AISU:

- **Paper grain.** A fine, slightly animated noise over everything, like printed stock.
- **Risograph offset.** A copy of AISU in `crimson`, shifted a few pixels behind her, as if the print were misregistered.
- **Technical grid.** Thin `crimson` and `teal` lines and short glitch bars running across the background, like a circuit or a broadcast test card.
- **The 0-1 signal.** The digits **0-1** glowing in `orange`: in her hair, as a live dot, as a status. It is AISU's "on air" light.
- **Waveform halo.** A thin audio-wave ring around her head that reacts to the music.
- **HUD labels.** Small mono readouts in the corners (`AISU`, `SCROLL ↓`, `COMING SOON`).
- **Separators.** `✦` between items in a marquee; `//` between label parts.

### Buttons and UI

- **One primary button per group.** Solid `ink` (paper mode) or solid `neon` (night), square corners, mono UPPERCASE label, letter-spacing +0.14em.
- Hover: lift up-left 2px with a **hard offset shadow** (`4px 4px 0`, `crimson` on paper, `paper` on night). No blur, no glow. Pressed: back to flat.
- **Everything else is a text link**: mono UPPERCASE with a 1.5px `crimson` underline (`neon` at night). No ghost boxes next to the primary.
- **Glyphs only when they inform:** `↗` leaves the site, `↓` downloads. No decorative `→`, `▶` or `✕`.
- **Never fake a control.** If something isn't available yet, say it as a status or a data row, not as a disabled button.
- Status: an `orange` dot that pulses next to a mono label (`● COMING SOON`), no border.

### Copy style on graphics

- Headlines: short, UPPERCASE, Anton. *"MEMES INTO MUSIC."*
- One highlighted word in `crimson` (paper) or `neon` (night).
- Taglines from canon: *"A virtual idol who sings, writes and talks back."* · *"The community decides the music."*

---

## Assets

| File | Size | Use |
|---|---|---|
| [`aisu-cutout.webp`](/img/aisu-cutout.webp) | 484 × 1496, transparent | Full-body reference, compositing on any background |
| [`aisu-signal.webp`](/img/aisu-signal.webp) | 711 × 950 | Portrait reference, avatars, close-ups |
| [`tokens.css`](./tokens.css) | — | Palette and font stacks as CSS variables |

See the logo note in [CHARACTER.md](./CHARACTER.md#look-canon): don't reproduce the third-party logo that appears on her tee in some art.