# Fenja AI — Nordic Editorial Design System

> **The Digital Archivist.** An interface that breathes. A design system that treats data like a high-end research publication and an interface like a piece of minimalist Danish furniture.

---

## 1. Brand Context

**Fenja AI** is an AI product whose brand rejects the frantic, neon-soaked tropes of "Deep Tech" AI in favor of a timeless, academic, and human-centric aesthetic. The name **Fenja** comes from Norse myth — Fenja and Menja are the giantesses of the mill *Grótti*, grinders of gold and salt. The logo is a single **spear** (Norse iconography), rendered in warm charcoal `#383831`.

The goal of every surface: **authoritative quietude**. Move beyond the "template" look by using intentional asymmetry, oversized editorial margins, tonal surface shifts (no hairline dividers), and a radical commitment to negative space.

### Sources in this project

| Source | What it contained |
|---|---|
| `uploads/fenja icon black.svg` | Primary spear icon (charcoal) |
| `uploads/fenja icon white.svg` | Spear icon (on dark) |
| `uploads/fenja black(1).svg` | Full wordmark lockup: spear + "Fenja AI" in Manrope Medium |
| `uploads/fenja white(1).svg` | Wordmark lockup (on dark) |
| `uploads/Manrope-*.ttf` | 7 weights of Manrope — the functional sans |
| `uploads/Newsreader_36pt-*.ttf` | 5 cuts of Newsreader — the editorial serif |
| Pasted spec | "Nordic Editorial" design principles: surfaces, pigments, "no-line" rule, ghost borders, tonal layering, runic iconography |

No codebase or Figma file was attached. UI kit screens in this system are derived from the written spec alone and should be treated as **reference implementations**, not pixel ports of a shipping product.

---

## 2. Content Fundamentals

**Voice: the quiet expert.** Fenja doesn't shout. It speaks the way a good research librarian does — precise, unhurried, generous with context. The tone is *academic but warm*, not clinical.

### Tone rules

| Do | Don't |
|---|---|
| "A study in stillness." | "🚀 Blazingly fast AI!" |
| "Archive of 4,812 documents." | "4.8K+ files uploaded 🔥" |
| "We found a pattern." | "AI magic unlocked ✨" |
| Serif subheads paired with crisp sans body | All-caps marketing shouts |

### Casing & grammar

- **Sentence case everywhere.** Buttons, headlines, menu items. No Title Case marketing jargon.
- **Oxford comma, always.**
- **Full stops on standalone sentences**, none on single-phrase labels or buttons.
- **Numerals for data** (`12 results`), spelled for prose (`twelve years of research`).
- Prefer **"you"** for user-facing prose; **"we"** is used sparingly and only for Fenja itself (e.g. "We found a pattern."). Avoid "our" marketing padding.

### The Definitive Emphasis — headline syntax

A strict grammatical and visual rhythm, to reinforce the Archivist persona. Applies to **every product-level headline** (hero H1, section H2, card H3, ask-pane titles).

| Rule | Detail |
|---|---|
| **Terminal keyword placement** | The core capability or subject of the headline must always sit at the **end** of the sentence. |
| **Styling** | That final keyword or phrase is rendered in **Newsreader Bold Italic**. Everything before it stays in the standard serif weight. |
| **The absolute period** | Every headline concludes with a period — even in contexts where headlines are conventionally left open. The period is a visual anchor and a signal of finality. |

Examples:

- "A quiet place to keep ***what you are reading***."
- "Recently ***filed***."
- "Reading alongside you, ***Fenja***."
- "Ask the ***archive***."

Apply this rule only to product-authored headlines — do **not** rewrite user-generated content (document titles, note headings) into the syntax.

### Emoji & glyph policy

- **No emoji.** Anywhere. Not in UI, not in empty states, not in marketing.
- Unicode glyphs are acceptable as **typographic** devices only: em-dashes (—), en-dashes (–), interpuncts (·), section marks (§), pilcrow (¶).
- For state markers, use the **Archival Pigment** accent colors applied to runic geometry, not colored emoji.

### Copy examples

| Context | Copy |
|---|---|
| Empty state | "Nothing here yet. Drop a document to begin." |
| Loading | "Reading…" (not "Loading…", never "Please wait") |
| Error | "Could not reach the archive. Retry?" |
| Success | "Filed." or "Saved to your archive." |
| CTA | "Begin" / "Open archive" / "Read the study" |
| Destructive confirm | "Remove this forever?" (full stop, honest) |

### Microcopy rhythm

Fenja microcopy often uses a **period** where other brands use an exclamation point. Confidence comes from restraint.

> "A thinking tool. Built slowly."
> "Search your own library. Quietly."
> "Ask the archive."

---

## 3. Visual Foundations

### Surface philosophy — the "no-line" rule

**Borders are forbidden** for structural sectioning. Define boundaries through background color shifts between surface tiers only. Treat the UI as stacked sheets of fine cotton paper.

```
surface-container-lowest  #fffcf7   ← floating search, topmost elevation (unbleached paper — the only near-white)
surface / background      #faf6ee   ← primary canvas
surface-container-low     #f6f2e8   ← first tonal nest
surface-container         #efeadc   ← inset sections, sidebars
surface-container-high    #e7e1d0   ← deeper insets
surface-container-highest #ddd6c3   ← recessed / pressed button fill
```

A `surface-container-lowest` card sits on a `surface-container-low` section on a `surface` page with **zero dividers**.

### Archival Pigment accent palette

Flat, matte inks — extracted from historical manuscripts. Never gradient, never glossy. For overlapping data areas, apply at **20–40% opacity** so the paper texture bleeds through.

| Swatch | Hex | Use |
|---|---|---|
| Faded Terracotta | `#b96b58` | Warnings, critical alerts, destructive |
| Oxidized Copper | `#6d8c7c` | Success, growth, positive trends |
| Raw Ochre | `#c29d59` | Cautions, tertiary accents |
| Faded Indigo | `#5a6d83` | Info, neutral data (the only "blue") |
| Dusty Heather | `#8d7a85` | Categorical, supporting iconography |

**No "tech blue."** Ever. The only permissible blue is the heavily desaturated `#5a6d83`.

### Typography

- **Headlines (Newsreader serif)** — `display` and `headline` scales. At `display-lg` use letter-spacing `-0.02em` for a locked-in editorial feel.
- **Body & labels (Manrope sans)** — `title`, `body`, `label` scales. Body line-height **1.6** against the warm background.
- **Hierarchy rule:** always lead with the serif for *intent*, follow with sans for *execution*.
- **Labels** are all-caps, tracked `+0.08em`, in `--on-surface-variant`.

Headlines are **always left-aligned**. No centered text in hero sections. A strong vertical axis is non-negotiable.

### Spacing — the editorial margin

Desktop lateral padding is `--space-20` (**7rem / 112px**). Hero cards use `--space-8` (44px) padding. Between list items use `--space-6` (32px). Generous whitespace is the system's primary visual tool.

### Backgrounds & imagery

- **No full-bleed photography in chrome.** Imagery lives in contained frames, always.
- **Preferred imagery vibe:** warm, matte, desaturated — think museum-catalog reproductions. Film grain is welcome; high saturation is not.
- **Hand-drawn graphite illustrations** are the primary iconography: 1–1.5px stroke in `--on-surface` `#383831`, clean but slightly organic. One **Archival Pigment** accent per icon, used on a single conceptual element (Oxidized Copper for a positive trend line, Faded Terracotta for a warning mark).
- **Data & connectivity** is drawn as **topographic currents** — smooth, parallel, hand-drawn contour lines that wrap around figures and interface elements. Never nodes-and-links. Never solid dots.
- **Data grids** (axes, rules) use the **Ghost Border** at 15–30% opacity. No solid axis lines.
- **No patterns, no gradients** on chrome. Primary CTA is a flat fill — no gradient, no shadow.

### Elevation & depth

Depth comes from **tonal layering**, not shadow. Stack surface tiers. When a floating effect is *truly* needed:

- Blur **32–64px**, opacity **4–6%**, color `--on-surface` (not pure black — keeps the shadow warm).
- `--shadow-ambient` for cards, `--shadow-float` for popovers, `--shadow-modal` for overlays.

### Borders

Forbidden for layout. If accessibility requires a border (focus ring, form field bottom edge): use the **Ghost Border** — `--outline-variant` at **15% opacity**. Never a solid 100% border. Focus rings use a 2px outset in `--secondary` at 40% opacity.

### Corner radii

- `--radius-md` **0.75rem (12px)** — the default. Buttons, cards, inputs.
- `--radius-lg` **1.25rem (20px)** — hero cards, modals.
- `--radius-sm` **0.375rem (6px)** — dense UI, tags, chips.
- **No fully-rounded pills** except for runic state dots and avatars (`--radius-full`).

### Cards

- `--radius-md`, no border, no solid shadow — **tonal lift only**. Place a lighter tier card (`surface-container-lowest`) on a darker tier section (`surface-container-low`).
- Hero cards: `--space-8` (44px) padding, generous.
- Standard cards: `--space-5` to `--space-6` padding.
- If elevation is needed, use `--shadow-ambient` — a whisper.

### Transparency & blur (Glass)

Reserved for **floating overlays only**: command palettes, toasts, floating search, dropdowns over scrollable content. Apply `backdrop-filter: blur(12–20px)` to a `surface` token at **80% opacity**. Do not use glass on chrome, cards, or hero sections.

### Hover, press, focus

| State | Treatment |
|---|---|
| Hover (primary button) | fill darkens `#785f53` → `#6b5348`; no scale |
| Hover (secondary) | fill darkens one tonal tier |
| Hover (tertiary) | fill deepens, arrow slides 4px right |
| Hover (link) | border-bottom from 30% opacity → 100% |
| Press | 1px translateY down, no scale-shrink |
| Focus | 2px `--secondary` ring at 40% opacity, 3px offset |
| Disabled | 40% opacity, no cursor change on hover |

No bounce. No elastic. No "playful" overshoots. The whole system has **one easing**: `cubic-bezier(0.2, 0.0, 0, 1)` and **one speed**: 240ms. Fades and tonal shifts only.

### Animation

- Transitions: 140ms (fast micro), 240ms (default), 420ms (layout).
- No bounces, no springs, no overshoots.
- Loading state uses **interactive outline typography** (drifting Newsreader letterforms behind hand-drawn human illustrations) paired with **topographic currents**. No spinners, no progress circles, no runic rotations.
- Page entrances: **fade + 4px translate-up**. Never scale. Never slide from off-screen.

### Layout rules

- Desktop content max-width `72rem` (1152px), reading measure max `42rem` (672px).
- Lateral margin `--space-20` (7rem) on desktop; `--space-5` (24px) on mobile.
- Fixed header (if present) uses glass surface; never a solid fill.
- **Asymmetry is encouraged.** Illustrations and runic accents may bleed off-center or overlap container edges.

---

## 4. Components

### Buttons

| Variant | Spec |
|---|---|
| **Primary** | `#785f53` flat fill · white text · `radius-md` (12px) · no shadow · hover darkens to `#6b5348` |
| **Secondary** | `surface-container-highest` `#ddd6c3` fill · `--on-surface` text · reads like a subtle indentation in the page |
| **Tertiary** | Warm-wheat `#d9c9a8` fill · dark-walnut text · italic serif arrow that slides right on hover. Kept as a distinct colored button — no underline, no ghost states. |

### Cards & lists

- **The rule of no dividers.** Forbid horizontal lines between list items. Separate with `--space-6` (2rem) of whitespace, or alternate background tints between `surface` and `surface-container`.
- **Cards:** `--radius-md` (12px). Generous padding — `--space-8` (2.75rem) for hero cards to maintain the editorial feel; `--space-5` to `--space-6` for standard cards.
- No borders. Elevation is tonal — place a lighter tier card on a darker tier section.

### Input fields

- **Forgo the box.** `surface-variant` (`#e7e1d0`) background with a **bottom-only Ghost Border** (`--outline-variant` at 30% opacity). No side borders, no rounded box.
- **Labels:** `label-sm` size, all-caps, tracked `+0.08em`, in `--secondary-fixed-dim` (`#9a8679`) — muted, sophisticated.
- **Focus:** bottom border thickens to `--secondary` (`#785f53`).

### Iconography

See [`ICONOGRAPHY.md`](./ICONOGRAPHY.md) for full detail.

- **Hand-drawn, thin stroke** (1px or 1.5px) in `--on-surface` `#383831`. Clean but slightly organic — intentional micro-asymmetry.
- **Pigment accents:** one **Archival Pigment** per icon, applied to a single conceptual element (Oxidized Copper trend line, Faded Terracotta warning flame).
- **No filled Material icons. No emoji. No cartoon illustration.**

### Signature components

- **Interactive outline typography** (loader). Replaces all spinners and runic geometry. Outlined Newsreader letterforms drift, rotate and morph behind hand-drawn human illustrations — the meeting point of human expression and advanced technology. See `preview/outline-type-loader.html`.
- **Topographic currents** (data & connectivity). Parallel, hand-drawn contour lines that wrap around figures and interface elements like elevation rings. Replaces all node-and-link visualizations. See `preview/topographic-currents.html`.

---

## 5. Font substitutions

No substitutions required — all font files were provided.

- **Manrope** (supplied, 7 weights: 200, 300, 400, 500, 600, 700, 800) — self-hosted from `fonts/`.
- **Newsreader** (supplied, 5 cuts: Regular, Italic, Bold, BoldItalic, ExtraBold) — self-hosted from `fonts/`.

Missing from the upload but referenced in the system:
- No monospace was provided. We default to **JetBrains Mono** / system mono stack. If a specific mono is desired, flag it and we'll swap it in.

---

## 6. Index — files in this project

### Root
- `README.md` — this file
- `ICONOGRAPHY.md` — icon approach, library choice, usage rules
- `colors_and_type.css` — all CSS variables + semantic base styles (import this everywhere)
- `SKILL.md` — agent-skill manifest
- `fonts/` — Manrope + Newsreader TTFs (self-hosted)
- `assets/` — logos (icon + wordmark, black + white variants)

### Preview cards
- `preview/` — individual HTML cards that populate the Design System review tab (one card per sub-concept)

### UI kits
- `ui_kits/product/` — hi-fi recreation of the Fenja AI product surface (chat-with-archive)
  - `index.html` — interactive demo
  - `*.jsx` — component files

### Slides
- Not included. No slide template was attached.

---

## 7. Known limitations / asks

- **No codebase or Figma was attached.** UI kit screens are designed from the written spec and should be treated as a reference implementation.
- **Custom iconography does not yet exist.** We use Lucide at 1.5px stroke weight as a stand-in. A bespoke set matching the "runic + graphite" description is the biggest open gap.
- **Illustration assets are not yet produced.** Where illustrations are called for, we ship labelled placeholders.
- **Product scope unclear.** The system as written points toward a research/knowledge product — we modeled a single surface ("Archive") accordingly. Please confirm whether there's a marketing site, a docs site, or other surfaces we should cover.