# ENOK Vanilla Utility Glyphs — D2

**The next 24 open interface icons. Same 24px grid. Same one stroke.**

D2 continues the house line from [D1](../glyphs/README.md) — one `currentColor`
stroke on a 24×24 grid at a consistent **1.75** weight, round caps and joins,
no gradients, no glow, no fill tricks. One theme skins both sets; the CSS
variables are identical, so D1 and D2 drop into the same interface without an
outlier in sight.

Where D1 covered the connective app chrome (nav, tables, people, signal), D2
covers the everyday glyphs D1 left out — the ones a real product reaches for the
moment it has a player, a store, a notification, or a document.

Zero dependencies. CSP-safe. Free forever — for humans and AIs alike.

---

## The 24 (D2)

| Surface | Glyphs |
|---|---|
| **Media** — player controls | `play` · `pause` · `skip-back` · `skip-forward` |
| **Commerce** — the storefront | `cart` · `tag` · `credit-card` · `gift` |
| **Comms** — notifications & reach | `bell` · `phone` · `share` · `link` |
| **Navigation** — wayfinding | `arrow-right` · `chevron-right` · `chevron-down` · `external-link` |
| **Files** — documents | `file` · `copy` · `trash` · `edit` |
| **Status** — state & objects | `star` · `heart` · `lock` · `eye` |

No overlap with the D1 set — 48 distinct glyphs across the two drops. Every icon
ID is prefixed `enok-` in the sprite (`enok-play`, `enok-cart`, …).

---

## Files

```
glyphs-d2.svg     Sprite sheet — all 24 as <symbol> defs (the drop-in)
glyphs-d2.css     Optional styling helper (size + stroke variables)
icons/*.svg       24 standalone SVG files, one per glyph
demo.html         Live gallery — copy any icon, tune size/stroke/color
README.md         This file
LICENSE.txt       Open license
```

## Three ways to use

**1 · Standalone file** — grab one icon from `icons/`, drop it in:

```html
<img src="icons/play.svg" width="24" height="24" alt="Play">
```

**2 · Inline (recolorable)** — paste an `icons/*.svg` straight into your markup.
Because it strokes with `currentColor`, it follows your text color:

```html
<button style="color:#9C6B3F">
  <!-- paste icons/cart.svg here --> Add to cart
</button>
```

**3 · Sprite (one request, all 24)** — reference the sprite by ID:

```html
<link rel="stylesheet" href="glyphs-d2.css">
...
<svg class="enok-glyph"><use href="glyphs-d2.svg#enok-play"/></svg>
<svg class="enok-glyph enok-glyph--lg"><use href="glyphs-d2.svg#enok-heart"/></svg>
```

> `<use href="…external.svg#id">` needs the sprite served same-origin. If your
> setup blocks that, inline the contents of `glyphs-d2.svg` once at the top of
> your page and reference `#enok-play` locally.

## Styling

Everything is driven by two CSS variables — the same two as D1, so one set skins
both:

```css
:root {
  --enok-glyph-size: 24px;   /* any size, no blur */
  --enok-glyph-stroke: 1.75; /* the house weight  */
}
```

Helper classes: `--sm / --md / --lg / --xl` (size), `--thin / --bold` (weight),
`--muted` (dim inactive controls). All optional — the raw SVGs work with no CSS
at all.

## Design notes

- **24px grid, 1.75 stroke** across all 24 — matched to D1, nothing is an outlier.
- **currentColor only.** No hard-coded colors; icons inherit, so light/dark and
  brand tints are free.
- **Round caps + joins**, ~2px of edge padding — reads clean from 16px up.
- **Anti-slop.** No gradients, no drop shadows, no faux-3D. A line, on a grid.

## Provenance

Role · model · surface — `Ora BUILDER` · `claude-opus-4-8` · `MachineSync`
ENOK Asset Foundry · D2, the proven-format sequel to *Vanilla Utility Glyphs D1*.

---

ENOK — The Open Media Library. Built on The Cloud. https://enok.com