Design

Design

Orbit's windows, dialogs and website follow a small design system built from published guidance. Everything lives in one place: Theme.xaml holds the colours, type and control styles, and every window uses it.

Principles and where they came from

Principle	How Orbit applies it	Source
Group settings into short categories	Settings has a side navigation (General, Appearance, Privacy and security, Downloads, Updates, About) so each page shows only a few choices.	Laws of UX: Hick's law, proximity, SetProduct: settings UI
Show system status	Toggles say On or Off in words; changes show a short confirmation ("History cleared"); downloads and updates show progress bars.	NN/g: 10 usability heuristics, Cieden: toggle UX
Prevent errors, allow recovery	Destructive actions (clear history, cookies, cache) ask first, name the action on the button ("Clear history", not "OK") and default to Cancel. The custom search address explains what's missing instead of failing silently.	NN/g heuristics 3, 5 and 9
Helpful empty states	An empty history, bookmarks or downloads list says what the area is for and what to do next, with a button where one helps.	NN/g: empty states
8-point spacing grid	Spacing and sizes are multiples of 8 (4 for small gaps): 24 px window padding, 16 px between cards, 8 px between buttons, 32 px controls, 56 px setting rows.	Breakdance: the 8-point grid, Microsoft: layout and spacing
One typeface, a clear type ramp	Segoe UI Variable throughout; 12 px caption, 14 px body, 20 px subtitle, 28 px title; regular and semibold only; sentence case; left-aligned.	Microsoft: typography in Windows, Fluent 2 typography
Controls on the right, labels on the left	Each setting is a row: title and description on the left, the control right-aligned.	Microsoft: layout and spacing
Dark grey, not black; depth from lighter surfaces	Window #202124, cards one step lighter, no heavy shadows.	Google Design: Material dark theme, Uxcel: 12 dark mode principles
Soft, desaturated colour	The accent is a calm blue (#8AB4F8); the history avatars use muted tones; red is reserved for destructive actions.	Uxcel: dark mode principles
Readable contrast	Body text is about 13:1, secondary text about 6:1 (minimum 4.5:1). Text on the accent button is about 9:1. The website's button uses dark text because white on orange is only 2.3:1.	W3C: WCAG 2.2 overview
Controls you can see	Input borders, switches and radio buttons are at least 3:1 against their background.	W3C: non-text contrast
Visible keyboard focus	Every control shows a 2 px accent ring when reached by keyboard; history and bookmarks work with the keyboard alone (arrows, Enter, Delete, F2).	W3C: WCAG 2.2 focus criteria
Big enough targets	Buttons and fields are 32 px tall; tab buttons 24 px (WCAG's minimum).	W3C: target size (minimum)
Familiar patterns	Standard Windows layout: side navigation and cards; Esc cancels a dialog and Enter confirms it.	Laws of UX: Jakob's law

Colour tokens

Token	Value	Used for
Background	#202124	Window surface
Surface	#292A2D	Cards
Primary text	#E8EAED	Titles and body
Secondary text	#9AA0A6	Descriptions, captions
Accent	#8AB4F8	Primary buttons, focus ring, selection
Border (controls)	#80868B	Inputs, switches (3:1 or better)
Danger	#F28B82	Destructive actions

Changing the look

Edit Theme.xaml: the tokens at the top and the control styles below it apply to every window.