project-bifrost-platform/design

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 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.