# Erudit app-icon — brand book

The single source of truth for **how the Erudit icon is constructed**. It is written to
be reproducible *from words alone*: a designer with this document and the Spectral font
can rebuild the icon exactly, at any size, without pixel-matching anything.

Two rules make that possible:

1. **The icon is a square.** Every size and position below is a **fraction of the
   square's side** (equivalently, a percentage). Nothing is in pixels. Draw the square
   at whatever resolution you need and scale each value to it.
2. **The origin is the top-left corner.** `x` grows right, `y` grows down. So "center
   `48.1% / 49.2%`" means a point `0.481·side` from the left and `0.492·side` from the top.

The companion generator in [`../assets/icons/brand/`](../assets/icons/brand/) is the
machine version of this exact spec (`build-icon.mjs`, where each constant is the same
fraction printed here). The `docs/ICONS.md` map covers the *opposite* concern — which
files/sizes we slice this master into for each platform.

## Anatomy

![Construction scheme](../assets/icons/brand/icon-construction.png)

Bottom-to-top the icon is six layers: **tile → wood grain → light sheen → shadow →
letter «Э» → star ✻**. The letter and star are always drawn last, at full ink colour;
the grain and the two gradients only ever touch the background.

## Palette

The icon ships as a **light** and a **dark** variant (a matched pair — the light tile
carries dark ink, the dark tile carries light ink). Each variant uses four colours.

| Role | Light | Dark |
|------|-------|------|
| **Tile** — the wooden body | `#e6b053` | `#4a3316` |
| **Ink** — the «Э» and the ✻ | `#5a3a12` | `#f2d9a0` |
| **Grain** — the vertical stripes | `#d8a54e` | `#432e14` |
| **Sheen** — diagonal light | white, α 0 → 15 % | white, α 0 → 15 % |
| **Shadow** — diagonal dark | black, α 15 → 0 % | black, α 15 → 0 % |

The grain colour is intentionally close to the tile — a hair darker — so the stripes
read as wood texture, not as stripes.

## 1 — Tile

A **square with rounded corners**, corner radius **17 %** of the side, filled with the
**Tile** colour. This is the whole background; there is no separate outer frame or
border. Corners are baked at 17 %; platform masks (iOS/Android) may round further on top.

## 2 — Wood grain

Subtle vertical planks over the tile:

- Divide the width into **6 equal columns** (each `1/6` of the side wide).
- On the **right edge of each column**, draw one **vertical stripe**, width **`1/32` of
  the side** (≈ 3.1 %), running the full height.
- Move the **whole set of six stripes left** by **`1/16` of the side** (= two stripe
  widths).
- **Tilt every stripe 4°** (clockwise, about its own centre).
- Draw the stripes **past the top and bottom edges** so the tilt leaves no empty corners,
  then **clip the whole set to the tile** (so the rounded corners stay clean).
- Colour: **Grain**.

## 3 — Light sheen · 4 — Shadow

Two linear gradients along the **same diagonal**, from the **bottom-left corner to the
top-right corner**, each clipped to the tile and sitting **above the grain, below the
letter**:

- **Sheen** — white. Fully transparent at the bottom-left, rising to **15 % opacity** at
  the top-right. Brightens the top-right.
- **Shadow** — black. **15 % opacity** at the bottom-left, fading to transparent at the
  top-right. Deepens the bottom-left.

Together they give the tile a lit-from-the-top-right, resting-in-shadow-at-the-bottom-left
sense of depth. Both percentages are a tuning knob (`--sheen`, `--shade`).

## 5 — The letter «Э»

- Typeface: **Spectral, Bold** (SIL OFL; pinned in the brand folder).
- Glyph: the Cyrillic capital **«Э»** (U+042D).
- Size: scale the glyph so its **ink bounding box is 60.5 % of the side tall** (its width
  then follows the font — about 53.2 %).
- Position: place the **center of that bounding box** at **48.1 % / 49.2 %** (just up and
  left of the icon center).
- Colour: **Ink**.

## 6 — The star ✻

A **six-spoke teardrop asterisk** (the "score" mark that replaces a tile's point number):

- Each spoke tapers to a **point at the center** and ends in a **round bulb**; a central
  disc equal to a bulb fuses the six spokes.
- Outer diameter: **17.3 % of the side**.
- Bulb radius (and the central disc): **22 % of the star's radius**.
- Position: center at **78.8 % / 78.8 %** — tucked to the lower-right of the «Э», like a
  subscript, with a clear gap from the letter.
- Colour: **Ink**.

Spectral has no ✻ glyph, so the star is **drawn geometrically**, not set as type. The exact
construction is in `build-icon.mjs` (`starPath`).

## Composition intent

The «Э» and the ✻ are treated as **one group**. Its combined bounding box measures
about **65.9 % × 68.6 %** of the side, and it is placed so its **bottom-right corner sits
at 87.5 % / 87.5 %** of the icon (the lower-right corner of an inner `12.5 % … 87.5 %`
safe square). That is what pushes the composition down-and-right and leaves the star room
in the corner. When re-deriving positions, this is the anchor to preserve.

> This bottom-right bias suits a **full-bleed** icon (iOS / PWA / favicon, which show
> almost the whole square). Android crops more, so it uses a **separate two-layer build**
> — see the next section. The master itself is never moved for Android.

## Android adaptive icon (two layers)

Android icons are **108×108 dp** and the OS applies its own mask (circle, squircle,
rounded square…). Only the **inner 66 dp = 61 % of the side, centred** is guaranteed
visible under every mask; the outer ~1/6 ring is used for the mask and motion effects.
So Android is **not** the full-bleed master — it is built as two layers:

- **Background** — the tile with wood grain and the light/shadow gradients, **full-bleed
  and square** (no rounded corners; the OS supplies the shape). It fills the whole 108 dp
  layer, so the sacrificial outer ring is just more wood.
- **Foreground** — **only the «Э» + ✻**, transparent, **re-placed** to sit safely inside
  the mask. The whole mark is the master's optical placement (nudged right 8 % / down 3 %)
  scaled **0.75 about the icon centre** — **25 % smaller**, its «Э» ↔ ✻ arrangement
  unchanged — so the ✻ that used to graze the round mask now sits well inside the **61 %
  safe zone** with margin to spare:
  - «Э»: box height **40.4 %**, box center **51.8 % / 49.6 %**.
  - ✻: outer diameter **9.9 %** (smaller than the master's), center **69.7 % / 67.0 %**,
    tucked closer to the letter.

Everything else (palette, grain, gradients, star construction) is identical to the master.

## Variants in use

The **light** variant is the primary icon (launcher, favicon, apple-touch, PWA). The
**dark** variant is shipped in addition wherever the platform can pick by appearance
(e.g. an SVG favicon via `prefers-color-scheme`). Where a platform allows only one icon,
use **light**.

## Reproduce

```sh
cd assets/icons/brand
npm i opentype.js
# full master (iOS / PWA / favicon), either variant:
node build-icon.mjs --variant light --layer full        > icon-light.svg
# Android adaptive layers:
node build-icon.mjs --variant light --layer background   > icon-light-android-background.svg
node build-icon.mjs --variant light --layer foreground   > icon-light-android-foreground.svg
# the construction figure:
node build-icon.mjs --variant light --scheme             > icon-construction.svg
node render-png.mjs  icon-light.svg  icon-light.png  1024   # any size
```

`--layer` is `full` (default), `background`, or `foreground`. All outputs are committed
alongside the generator in [`../assets/icons/brand/`](../assets/icons/brand/).

## Masters

| | Light | Dark |
|-|-------|------|
| **Full** (iOS / PWA / favicon) | ![light](../assets/icons/brand/icon-light.png) | ![dark](../assets/icons/brand/icon-dark.png) |
| **Android background** | ![lbg](../assets/icons/brand/icon-light-android-background.png) | ![dbg](../assets/icons/brand/icon-dark-android-background.png) |
| **Android foreground** | ![lfg](../assets/icons/brand/icon-light-android-foreground.png) | ![dfg](../assets/icons/brand/icon-dark-android-foreground.png) |