dead-letter Exploratory Style Guide

Exploratory Artifact

# dead-letter

Legacy style exploration only. The canonical Brume design system lives in `docs/brand/style-guide.md` and `src/dead_letter/frontend/static/styles.css`.

## 1. Color Palette

### Core Tokens

--bg#f4f5f7
Page background
--panel#ffffff
Card/panel fill
--ink#1a1d23
Body text
--line#d1d5db
Borders
--accent#4A6FA5
Slate blue
--accent-2#7c5cbf
Muted violet

### Status Colors

--ok#1a7f48
Success
--warn#a36200
Warning
--err#c03030
Error

### Surface Tints (Cool)

#f8f9fb
Subtle emphasis
#f8f9fb
Drop zone
#edf0f8
Drop active
#eef1f8
Selected row
#e8ecf4
Active crumb
#fef2f2
Error bg

## 2. Typography

Heading — Geist · h1 · clamp(1.7rem, 4vw, 2.5rem) · Bold · -0.02em tracking
dead-letter
Heading — Geist · h2 · 1.15rem · Semibold
Active Job
Kicker · 0.72rem · Uppercase · --accent-2 · letter-spacing 0.14em

Workflow Setup

Body — Inter · 1rem · Regular

Import local .eml files into Inbox and write Cabinet bundles with tracked job status.

Field label — Inter · weight 600
Cabinet Destination
Mono — IBM Plex Mono · File path · 0.8rem · #6b7280
/Users/quinn/inbox/2026-03-05-meeting-notes.eml
Mono — Timestamps · 0.82rem
Created 14:32:01 · Started 14:32:01 · Finished 14:32:04
Mono — Watch stats · 0.82rem · --accent
files 12 jobs 8 errors 0

## 3. Header Bar (New)

Inbox to Cabinet Workflow

# dead-letter

files 3 jobs 2 errors 0

## 4. Buttons

## 5. Chips & Badges

### Mode Toggle

Single File Directory

### File Kind Badges

FILE DIR EML

## 6. Form Elements

Cabinet Destination `/Users/quinn/Documents/dead-letter/Cabinet/meeting-notes` Backend-owned bundle destination shown after job creation.
Manual Input Path

### Selection Card

Selected Input `/Users/quinn/inbox/meeting-notes.eml` inbox/meeting-notes.eml

### Options Disclosure

Conversion Options
Strip signatures Strip disclaimers Strip quoted headers Embed inline images

## 7. File Browser Rows

## 8. Breadcrumbs

## 9. Progress Meter (Flat)

0%

33% — 4 of 12

67% — 8 of 12

100% — Complete

## 10. Status States

Conversion finished successfully.

Conversion completed with errors.

Job failed before completion.

Job cancelled.

## 11. Error Callouts

Input path is required.

### Error Items

- `PARSE_ERROR` Failed to decode MIME structure inbox/corrupt-message.eml
- `IO_ERROR` Permission denied writing output archive/locked-file.eml

## 12. Drop Zone

### Default

Drop one .eml file to import into Inbox The backend copies it into Inbox and builds a Cabinet bundle.

### Active (drag hover)

Drop one .eml file to import into Inbox The backend copies it into Inbox and builds a Cabinet bundle.

## 13. History Rows (New)

History

✓ inbox/ 12 written 0 err 2 minutes ago
✓ meeting-notes.eml 1 written 0 err 5 minutes ago
✗ corrupt-message.eml 0 written 1 err 8 minutes ago
~ archive/2025/ 47 written 3 err 12 minutes ago
— large-export/ 6 written 0 err 1 hour ago

## 14. Two-Column Layout

header-bar — title + watch controls
col-left
Workflow Setup (inline)
Drop Zone
Mode Toggle
Selection Card
Options
[Start Job]
col-right
Active Job
• status, meter, summary
• cancel / resume
• error & notice disclosures
History
• compact rows

## 15. Focus States

Tab through: `2px solid #a3b8d8, offset 2px`

## 16. System Summary

Key Changes from v1
bg: #f6f3ec → #f4f5f7 (cool gray)
panel: #fffdf8 → #ffffff (clean white)
accent: #d9572b → #4A6FA5 (slate blue)
accent-2: #2f7f8b → #7c5cbf (muted violet)
heading: Avenir Next → Geist
body: Avenir Next → Inter
radius: 1rem → 0.3rem (panels), 0.25rem (buttons)
meter: gradient → flat --accent fill
orbs/gradients: removed (clean flat bg)
surfaces: warm tints → cool slate tints