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)

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