| 1 |
# System UI Style Guide: Classic High-Affordance Design |
| 2 |
|
| 3 |
This document outlines the core UI, UX, and architectural principles for a hobby operating system focused on spatial consistency, high-affordance visuals, and deterministic behavior. |
| 4 |
|
| 5 |
--- |
| 6 |
|
| 7 |
## 1. Architectural Principles |
| 8 |
|
| 9 |
### Spatial Consistency |
| 10 |
- **Persistent Geometry:** Window coordinates (X, Y) and dimensions (W, H) must be saved on close and restored exactly on launch. |
| 11 |
- **Icon Persistence:** Files and folders on the desktop or in directory views must stay at their specific pixel coordinates. No auto-arrangement by default. |
| 12 |
|
| 13 |
### Determinism and Performance |
| 14 |
- **Zero Latency UI:** UI interactions (clicks, menu opens) must be handled by the local rendering loop immediately. No asynchronous "loading" states for basic system navigation. |
| 15 |
- **Native Execution:** Avoid web-runtimes. All UI elements should be rendered using native primitive drawing calls to ensure sharpness and speed. |
| 16 |
|
| 17 |
--- |
| 18 |
|
| 19 |
## 2. Visual Language (Affordance) |
| 20 |
|
| 21 |
### The Lighting Grid |
| 22 |
Elements must use a consistent 3D lighting model (Light Source: Top-Left). |
| 23 |
- **Raised (Buttons):** Top/Left = White/Highlight; Bottom/Right = Dark Grey/Shadow. |
| 24 |
- **Sunken (Fields/Active):** Top/Left = Dark Grey/Shadow; Bottom/Right = White/Highlight. |
| 25 |
|
| 26 |
### Strict Geometry |
| 27 |
- **Pixel Alignment:** All borders and lines must align to the integer pixel grid to prevent blurring. |
| 28 |
- **90-Degree Corners:** Do not use rounded corners. Sharp corners maximize screen real estate and align with the physical pixel structure of monitors. |
| 29 |
|
| 30 |
--- |
| 31 |
|
| 32 |
## 3. Layout and Typography |
| 33 |
|
| 34 |
### Information Density |
| 35 |
- **Functional Whitespace:** Use whitespace only to separate logical groups. Avoid large margins used purely for "modern aesthetics." |
| 36 |
- **Visible Menus:** Primary commands must be located in a persistent menu bar. Do not hide core functionality behind "hamburger" icons or context-sensitive gestures. |
| 37 |
|
| 38 |
### Typography |
| 39 |
- **Clarity over Smoothness:** Use bitmap fonts or vector fonts with strong hinting. |
| 40 |
- **Font Choice:** Prefer sans-serif fonts with high x-heights for readability at small sizes (e.g., 9pt - 11pt). |
| 41 |
|
| 42 |
--- |
| 43 |
|
| 44 |
## 4. UI Component Specs |
| 45 |
|
| 46 |
### Window Management |
| 47 |
- **BeOS-Style Tabs:** Window titles should reside in a "tab" that only spans the width of the text. This allows users to "stack" windows and still see the titles of those underneath. |
| 48 |
- **Hard Borders:** Every window must have a high-contrast border (at least 1-2 pixels) to clearly define the workspace. |
| 49 |
|
| 50 |
### Scrollbars |
| 51 |
- **Explicit Controls:** Scrollbars must consist of three distinct parts: the Track, the Thumb (elevator), and the Stepper Arrows. |
| 52 |
- **No Hiding:** Scrollbars must remain visible as long as the content exceeds the viewable area. No "fade-on-hover" behavior. |
| 53 |
|
| 54 |
--- |
| 55 |
|
| 56 |
## 5. User Agency |
| 57 |
|
| 58 |
- **No Ambient Noise:** The OS must not include suggestions, ads, or "helpful" tips that interrupt the workflow. |
| 59 |
- **Passive Response:** The system should only perform actions in response to explicit user triggers. No background "smart" re-organization. |
| 60 |
|