3.7 KiB
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.