# UI Design Specification

## 1. Overview and Aesthetic Philosophy
This document outlines the design language for a high-density document transcription workflow application built in Python. The UI represents a deliberate blend of **Modern Modular Dashboard** design and an **Archival/Academic** aesthetic. 

The interface balances modern structural trends with stylistic nods to historical preservation, ensuring maximum legibility, reduced eye strain during extended transcription sessions, and a clear presentation of complex relational data.

## 2. Key Structural Patterns

### 2.1. Modern Bento Grid Layout
The structure strictly adheres to the Bento Grid trend.
* The interface is divided into well-defined rectangular zones (e.g., image viewer, transcription editors, right-hand metadata column).
* This layout is highly functional for complex workflows, allowing users to cross-reference the original scanned document, raw AI output, human revision, and database relationships simultaneously without scrolling.

### 2.2. High-Density Flat Design (Flat 2.0)
The styling deliberately avoids heavy drop shadows or aggressive 3D glassmorphism.
* **Subtle Separation:** Relies on 1px borders and slight variations in background shade to separate functional zones.
* **Data Density:** Prioritizes fitting a large amount of structured data (processing metadata, related entities, tokens) into a compact space while remaining readable.

### 2.3. Dual-Typography System
The interface employs a classic typographic pairing standard in editorial or academic software:
* **Serif Headers:** Used for primary document titles. This lends a traditional, authoritative, and print-like feel appropriate for historical documents.
* **Sans-Serif UI/Body Text:** Functional UI elements, buttons, and transcription input fields use a clean, modern sans-serif font for maximum utility.

## 3. The "Archival" Color Palette

The color palette is strictly utilitarian: prioritizing glare elimination, minimizing eye strain for fading texts, and establishing hierarchy without distracting from the documents.

### 3.1 Palette Philosophy
* **The "Canvas" (Backgrounds):** A warm off-white/cream mimicking standard archival folder stock to provide a low-contrast environment. Card surfaces use a slightly elevated manila/parchment hue for visual separation.
* **The "Ink" (Typography):** Deep charcoal or slate (aged iron-gall ink) instead of pure black to prevent visual vibration. Secondary text uses a muted grey-brown.
* **The "Accents" (Interactive Elements):** A sophisticated forest green for primary actions/tabs, and warm earthy sepia/tan for badges and highlights.
* **The "Dark Room" (Image Viewer):** A very dark, matte slate isolates the scanned original. This high contrast eliminates screen glare, ensuring faded handwriting remains the absolute focal point.

### 3.2 Exact Color Specifications

| UI Role | Color Name | Hex Code | Tailwind Equivalent (Approx) |
| :--- | :--- | :--- | :--- |
| App Background | Archival Cream | `#FAF9F6` | `stone-50` |
| Card Surface | Folder Stock | `#F4F0E6` | `stone-100` |
| Image Viewer | Matte Slate | `#2B2D2C` | `zinc-800` |
| Primary Text | Iron Ink | `#333333` | `neutral-800` |
| Secondary Text | Faded Type | `#6B6A65` | `stone-500` |
| Primary Accent | Library Green | `#2D5A4C` | `emerald-800` |
| Secondary Accent | Aged Sepia | `#E2C7A8` | `orange-200` |

## 4. Implementation Guidelines
* When generating layout code, utilize UI framework grid utilities to construct the Bento Grid.
* Map the custom hex codes to the application's global theme variables to ensure consistency across all components.
* Prioritize static borders and background colors over hover effects or transition animations to maintain the academic utility of the interface.