# Fenja — Product UI Kit

A hi-fi reference implementation of the Fenja archive product: a quiet reading + annotation surface for a personal AI research companion.

## What's here

- `index.html` — interactive demo. Click any document to open the reader + "Ask this document" pane; ask a question to see the runic loader and a cited reply.
- `kit.css` — kit-level styles composed over `../../colors_and_type.css`.
- `components.jsx` — atoms: `Icon`, `Button`, `IconButton`, `Tag`, `Sidebar`, `Topbar`, `FloatingSearch`, `ArchiveItem`, `Composer`, `RuneSpinner`.
- `screens.jsx` — molecules: `ArchiveScreen`, `ReaderScreen`.

## Disclaimer

No Fenja codebase or Figma was attached. This kit is built from the written spec and should be treated as a **reference implementation** rather than a port. The written "Nordic Editorial" system pointed toward a patient, research-oriented product surface — we modeled that as an archive + ask experience.

## What follows the spec

- No 1px dividers anywhere. List separation is alternating tonal tint (`surface-container-low`).
- Primary CTA uses the `secondary → secondary-dim` vertical gradient ("hand-rubbed wood").
- Floating search uses `surface-container-lowest` with atmospheric shadow.
- The topbar uses glass (80% surface + 16px blur).
- All icons are 1.5px-stroke Lucide-style SVGs (inline). These are flagged as a substitution for the aspirational custom runic set.
- Loader is the signature runic geometry, not a spinner.
- Headlines: Newsreader, left-aligned, `−0.02em` tracking. Body: Manrope 1.6 line-height.
- Highlights in the reader use raw-ochre pigment at 22% opacity (matches the "paper bleed-through" rule).