Turbo OS – GUI & Design Specification (v1.0) 1. Design Philosophy Turbo OS uses a dark, minimal, performance-focused UI inspired by modern desktop operating systems. Principles: Dark surfaces reduce visual noise Colour is used only to communicate state Red is reserved for action and emphasis Hover provides feedback, not attention Consistency is mandatory across all apps The interface must feel fast, stable, and deliberate, not decorative. 2. Official Colour Palette Core Background Colours Desktop Background: #0E0E10 Panel / App Background: #111114 Taskbar / Title Bars: #1A0F12 Borders / Dividers: #12090C Dark colours should make up ~90% of the UI. Accent Colours (Restricted Use) Turbo Red (Primary): #D72638 Used for active buttons, selections, focused items Turbo Red Hover: #E63946 Used only when hovering red elements Turbo Red Pressed: #B91F2E Used only for pressed states Alert Red (Transient): #FF4D5A Alerts and warnings only; never persistent UI Red must never be used as a background colour. Neutral UI Colours Primary Text / Icons: #EDEDED Hover Grey: Secondary Text / Labels: Disabled Text / Buttons: 3. Typography System Font Font: Scratch Vector Editor → Sans Serif Usage: All UI text (buttons, labels, titles, menus) This ensures: Pixel-perfect rendering Scratch language compatibility No SVG or scaling glitches Custom fonts are prohibited for runtime UI. Font Sizes Use Size Taskbar text 10–11 px Buttons 11 px Window titles 12 px Labels / settings 10 px Hints / secondary text 9 px Text must never be scaled unevenly. 4. Button Design Dimensions Height: 22 px Corner Radius: 2 px Horizontal Padding: 8 px Vertical Padding: 4 px Minimum Width: 60 px Button States State Colour Behaviour Idle Default Hover Lighten only Pressed Move down 1 px Important Primary action Disabled No interaction Disabled buttons must have no hover or press response. 5. Icon Buttons Icon Size: 16×16 px Hitbox: 20×20 px Idle Colour: Hover: Brighten slightly Active: Icons are borderless by default. 6. Taskbar Specification Height: 32 px Background: Icon Size: 20×20 px Padding: 6 px vertical, 6–8 px horizontal Active Indicator: 3 px red underline () 7. Windows & Panels Title Bar Height: 28–32 px Background: Border: 1 px Corner Radius: 2–4 px Internal Padding: 6–8 px 8. Hover & Interaction Rules Hover = subtle brightness increase No colour swapping No glow effects No opacity flicker Pressed state always shifts 1 px down Hover communicates interactivity, not importance. 9. Layout & Spacing Minimum spacing between UI elements: 4 px Grouped elements should align cleanly Text alignment is left by default Padding is preferred over increasing font size 10. Scratch Implementation Rules PNG preferred over SVG UI text should be vector text, not imported images Button states should use separate costumes or colour changes All spacing, sizes, and colours must follow this spec 11. Golden Rules (Non-Negotiable) Sans Serif only Red is earned, not free Dark first, colour last Consistency over creativity If in doubt, simplify Status Turbo OS GUI Specification v1.0 — LOCKED Any changes require discussion before implementation.
