1.6 KiB
1.6 KiB
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-dimvertical gradient ("hand-rubbed wood"). - Floating search uses
surface-container-lowestwith 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.02emtracking. Body: Manrope 1.6 line-height. - Highlights in the reader use raw-ochre pigment at 22% opacity (matches the "paper bleed-through" rule).