285 lines
15 KiB
Markdown
285 lines
15 KiB
Markdown
# 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.
|