Design System¶

This page documents brand identity, color tokens, logo usage, and UI theming for the Pite game engine and its editor.

Logo¶

Main mark is a hexagonal icon on a 512×512 grid, scaled to fill the viewport edge-to-edge vertically (no top/bottom padding). Single path, fill-rule="evenodd", no strokes, no gradients. It recolors cleanly via the fill attribute, which is how all variants are derived.

Usage rules¶

• Do not stretch, outline, rotate, add shadows, or place on low-contrast backgrounds. Minimum legible size: 16 px.
• Light background → logo.svg (#0b9387). Dark background → logo-white.svg (#f7f7f9). Never use #0b9387 on #042F2E — contrast is too low;that pairing is reserved for fills/borders.
• egui cannot render SVG natively. In-app surfaces (window icon, editor header) need PNG renditions — export from the SVG at 16 / 32 / 64 / 128 / 256 px.

2. Core palette — Pite Teal¶

Canonical tokens: palette.json (plus usage allow lists). The table mirrors it — do not add new hexes here, update palette.json first.

3. Theme tokens¶

Light-theme surface tokens live with the open light-theme item (§6.4) — only the dark editor mapping below is implemented. Backgrounds use palette Background (#042F2E); the mark on dark is logo-white.svg (#f7f7f9).

4. Editor mapping (pite-editor/src/theme.rs)¶

The editor is dark-theme-only today. Surfaces are neutral near-black; the teal ACCENT is a signal color only (selection stroke, hyperlinks, active widget stroke — never full fills):

Selection fill is solid palette dark (#124d49) with near-white (TEXT) glyphs — the allow-listed dark → white pair (simulated 7.9–9.0). egui paints selected text in rows, tabs, and TextEdit with selection.stroke.color on that fill. Darker than the old tint wash so regions read clearly, quieter than solid primary; teal-on-teal (3.6–4.1) and black-on-tint (1.35) were measured and rejected. Accent usage follows the palette.json allow lists: accent text (hyperlinks) sits on near-black surfaces only (BG/PANEL/INACTIVE, contrast ≥ 4.5 — matching smallText: primary → black); accent strokes and fills on any surface stay ≥ 3.0 (iconsAndUI range). Widget state fills: noninteractive PANEL, inactive/open #171C22 (23, 28, 34), hovered #1F262E (31, 38, 46), active #1E3A35 (30, 58, 53, a dark teal tint). Corner radii stay 8 (window) / 6 (widgets, menu). The viewport fallback painter (app.rs, GPU-unavailable path only) fills with theme::BG and draws muted overlays: #6FB3A7 (111, 179, 167) sprites, #7C9BB8 (124, 155, 184) other nodes, #C9D1D8 (201, 209, 216) captions.

Rationale: accent-as-signal, surfaces carry structure. The previous theme washed every panel and widget stroke in full-strength teal, so nothing could stand out and long sessions felt loud. Neutrals now do the quiet work — BG/PANEL separation plus a gray stroke delineate panels, and brightness steps in the widget fills communicate hover/press. Teal appears only where the user must look: what is selected, what is a link, what is actively pressed. The viewport follows the same rule: the textured game frame is the content, and its overlay glyphs drop from neon to muted slate so captions annotate instead of shouting.

5. Typography¶

• UI / proportional: Inter (fonts/Inter-Regular.ttf), 15 px body/buttons, 20 px headings, 12 px small — embedded via include_bytes!("../../fonts/…").
• Code / monospace: JetBrains Mono (fonts/JetBrainsMono-Regular.ttf), 14 px.
• Spacing: item 8×6, button padding 10×5, indent 20, scrollbar width 10, corner radii 8 (window) / 6 (widgets, menu).

6. Platform Integration and Visual Roadmap¶

1. Window and Desktop Icons:
   • Editor Application: Configured in pite-editor/src/app.rs via ViewportBuilder::with_icon loaded from assets/icon.png (256 px render of logo.svg) using eframe::icon_data::from_png_bytes. Replaces default egui icons across desktop taskbars, alt-tab switchers, and window borders.
   • Game Runtime Window: Configured in pite-runtime/src/lib.rs via .with_window_icon(...) from assets/icon.png, decoded during startup via the workspace image crate. The icon is gracefully optional: if absent or unreadable, the window initializes with system defaults.
   • System Tray: Dedicated assets (assets/tray-icon.svg and pre-rendered RGBA PNGs tray-icon-{16,22,24,32}.png) are staged for future system tray integrations.
2. Editor Header Branding:
   • The top menu bar (Panel::top("menu") in app.rs) is slated to display the white monochrome monogram (logo-white.svg rendered as an egui texture) adjacent to the playback transport controls.
3. Renderer Default Clear Color:
   • Align the default initial clear color in pite-render with the canonical dark background token #042F2E ([0.016, 0.184, 0.180]).
4. Light Theme Specifications:
   • The editor is currently dark-theme only. A future light mode will map tokens as follows: surface background #FFFFFF, brand mark logo.svg (#0b9387), accent highlights #2bd3bf, and primary text #111827.