V2 (new) sStep 4 complete. (untested, unreviewed, cross my fingers)

2026-08-01 18:28:00 -05:00
parent 51ac2d0b98
commit dfe6f121ff
8 changed files with 175 additions and 11 deletions
@@ -0,0 +1,50 @@
+# 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.