70 lines
3.3 KiB
Markdown
70 lines
3.3 KiB
Markdown
# Iconography — Fenja AI
|
||
|
||
Icons in Fenja are the meeting point between **hand-drawn human mark** and **sharp angular Norse-runic geometry**. They are the system's strongest carrier of voice after the serif itself.
|
||
|
||
## Rules
|
||
|
||
1. **Stroke-only, thin.** 1px or 1.5px. Color: `--on-surface` (#383831). No fills on the main silhouette.
|
||
2. **Graphite character.** The line should feel drawn, not perfectly mechanical — slight variation is welcome; pure geometric precision is not.
|
||
3. **Runic overlay.** Pair the human mark with one or two angular line-work elements (triangles, diamonds, vertical strokes) that feel Norse in origin.
|
||
4. **Pigment accents only as small details.** A single conceptual element inside the icon may carry a flat Archival Pigment fill — never the whole mark.
|
||
5. **No filled Material icons.** No rounded "friendly" cartoon icons. No emoji in the icon slot. Ever.
|
||
|
||
## Size & spacing
|
||
|
||
| Size | Context |
|
||
|---|---|
|
||
| 16×16 | Inline with label-md, dense tables |
|
||
| 20×20 | Navigation, form field adornments |
|
||
| 24×24 | Default UI icon size |
|
||
| 32×32 | Feature callouts |
|
||
| 48×48+ | Hero illustrations only |
|
||
|
||
Icons are optically centered on the cap-height of adjacent serif headlines or the x-height of sans body.
|
||
|
||
## Sources — what we use today
|
||
|
||
### Custom (aspirational, not yet shipped)
|
||
A bespoke set matching the "graphite + runic" description is the target. None exist in this project yet. This is the biggest open gap in the system.
|
||
|
||
### Substitute library: Lucide
|
||
Until the custom set is produced, we use **Lucide** at 1.5px stroke weight. Reasons: matches our stroke weight, has the thin monoline character closest to what we want, and the Apache-licensed source SVGs are easy to re-skin.
|
||
|
||
```html
|
||
<!-- CDN reference -->
|
||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||
|
||
<i data-lucide="feather" class="w-5 h-5" style="stroke: var(--on-surface); stroke-width: 1.5;"></i>
|
||
```
|
||
|
||
**Flag:** this is a substitution. We have not yet produced the custom runic set called for in the spec. Most icons will look "correct enough" but will miss the *hand-drawn + Norse-runic* layering that the brand ultimately requires.
|
||
|
||
### Logos (custom, shipped)
|
||
Located in `assets/`:
|
||
- `fenja-icon-black.svg` — the spear mark, charcoal, on light
|
||
- `fenja-icon-white.svg` — the spear mark, paper, on dark
|
||
- `fenja-wordmark-black.svg` — spear + "Fenja AI" lockup, charcoal
|
||
- `fenja-wordmark-white.svg` — spear + "Fenja AI" lockup, paper
|
||
|
||
**Minimum sizes:** icon 24×36px, wordmark 96×36px. Maintain clear space equal to the height of the spear-head around all sides.
|
||
|
||
## Unicode as icon — permitted
|
||
|
||
Typographic glyphs may serve as minimal "icons" in editorial contexts:
|
||
|
||
| Glyph | Use |
|
||
|---|---|
|
||
| `—` em-dash | Section breaks, attribution |
|
||
| `§` | Note references |
|
||
| `¶` | Paragraph marker in archive views |
|
||
| `·` | List interpuncts |
|
||
| `↗` | External link |
|
||
| `↳` | Reply / thread descent |
|
||
|
||
## Emoji — forbidden
|
||
|
||
No emoji. Not in empty states, not in CTAs, not in marketing. Use charcoal runic line-work or Archival Pigment flat marks instead.
|
||
|
||
## Data viz glyphs
|
||
|
||
Axes, gridlines, and tick marks use the **Ghost Border** (`--outline-variant` at 15–30% opacity). Data series use Archival Pigments at 70–100% for primary, 20–40% for overlapping fills. No drop shadows, no gradients on chart elements.
|