TesselGUI

A futuristic, minimal interface standard for desktop software of any kind: dark charcoal, one deep Carmine accent, a fine grid, in dark and light.

· Live demo · Category layouts · Contrast checker · Quick reference · Docs CC BY 4.0 · Code and tokens MIT

Note

Tessel is for engineers and designers building desktop-class editors, data tools, media tools, monitors, utilities, communication apps, CAD tools and system settings. It specifies the tokens, regions, density and behavior needed for long sessions in high-density interfaces.

Contents · Revision 3 · Six rules · See it · Any category · Adopt Tessel · Open questions

Revision 3

A futuristic, minimal standard inspired by Tron Legacy and The Matrix. Dark charcoal, near-black surfaces (editor background #1B1B1D, panels #232326), soft off-white text, and one deep, restrained Carmine accent (#960018) used sparingly: the primary action fill, a thin underline on the active tab, a thin edge on selected text and rows, a small indicator in the near-black status bar, and a thin focus outline. Syntax is muted — teal keywords, sage strings, warm-gray numbers — and a fine square grid (#28282B) shows in empty areas and fades behind code. The interface is compact with minimal padding, set in a clean modern sans-serif with a classic monospace for code. Carmine is restrained by design, so it is never the only cue; the trade-off and the measured values are stated in the materials guide. The revision 2 GitHub scheme survives as the GitHub preset. See the changelog and migration notes.

Six rules

1. One dominant region per view, 55–70% wide. Supporting regions 20–35%.
2. One accent element per region: primary action, selection marker, or active-region rule.
3. Edges build structure. A 1px edge between compartments. Fills mark hover and selection.
4. Density follows the component. Rows, trees and toolbars Compact. Forms, dialogs and navigation Comfortable.
5. Keyboard first. Every task has a path, shortcuts are visible, Ctrl/⌘+K opens commands.
6. Static and honest. No ambient motion. Real status, real cancel, text with every color.

One-page quick reference · Full guidelines

See it

Screenshot of the running reference workspace, dark theme.

Any category

Screenshot of the category demo. The same tokens and rules cover data and records, editors, media, monitoring, wizards, communication, CAD and system tools. Only the dominant region changes. See category layouts.

Applied to different programs

Slideshow of the mockups below, 3 seconds each. Click any entry to open its full-size image. All programs, names and data are fictional.

Program type	What the design does	Mockup
Spreadsheet	Dominant grid with row and column gridlines, frozen headers, tabular figures, formula bar, one accent Save	View
File and folder compare	Two synchronized panes, a state list, a differences table, markers that do not rely on color alone, one accent Merge	View
Music production	Browser, arrangement with clips, mixer with segmented meters, value controls, one accent Record	View
Image editor	Neutral viewport around the canvas, tool rail, layers, adjustments, history, one accent Export	View
Video editor	Media bin, preview, inspector, multi-track timeline with a playhead, one accent Export	View
Code editor	Explorer, editor, symbols, problems table and terminal, status with icon and text, one accent Run	View
Program manager	Gridded list of installed programs, filters, details, one accent Uninstall	View
Monitoring console	Metric tiles, a chart with a table alternative, events, a node table, one accent Acknowledge	View

Every mockup follows the same rules: regions fill their space, data lists are gridded, one accent element per region, edges for structure, a single active-region rule per window.

Light theme

The same eight programs in the light theme, 3 seconds each. Full-size images are in assets/mockups/light.

Graphite preset for color-critical work

Image and video tools use the Graphite preset so no tinted chrome sits next to the work. The primary action, selection marker and focus ring are neutral, and the viewport surround stays neutral gray.

Image editor	Video editor

Creative and multi-mode tools

See workspace patterns for modes, panels, value controls, timelines and meters.

Cross-cutting rules: motion, typography, shortcuts and the command palette, feedback patterns, focus rings, tabs, trees and breadcrumbs, status bar, empty, loading and error states, command palette registry, layouts and docking, infinite canvas and undo and inline feedback.

Design decisions

Principle	Decision
Density has rhythm	6 CSS px minimum between distinct grouped controls, 8 default, 12–16 between groups, 24 between sections
Density is per component	Compact rows (28) and controls (32) for repeated work. Comfortable (36/40) for forms and dialogs. Touch (48). Density
The current task fits	Windows, dialogs, forms and wizard pages fit without scrollbars. Data containers scroll inside their own bounded viewport. The main window never scrolls
The accent is scarce	Primary action Carmine #960018 with a white label and a border rim. Deep Carmine only for large tinted regions with a marker. Accent roles
Edges carry structure	Three dark-charcoal surface levels mark state. A 1px edge (#43434A) separates compartments
The grid has a job	A fine 24 px grid visible in empty areas and fading behind code, ten-segment progress, and a 2px active-region rule. Grid signature
Presets recolor the whole accent	Carmine is the default. GitHub, Crimson, Blue, Teal and the neutral Graphite change the primary action, selection, focus and deep accent together
Keyboard access starts at the surface	Logical Tab order, visible focus, Commands on Ctrl/⌘+K

Tessel targets WCAG 2.2 AA, including 4.5:1 contrast for normal text. The 44 × 44 CSS px touch policy is separate from AA's 24 × 24 target-size criterion. Consult the verification record for the checks run and their limits. Static images and unit tests do not replace keyboard, screen-reader and reduced-motion testing in your application.

Adopt Tessel

• Start with the quick reference, then the design guidelines and component usage.
• Pick a layout in category layouts. For multi-mode creative tools, add workspaces and review against the polish checklist.
• Use the CSS custom properties or JSON tokens. Choose states with the materials guide.
• Adopting the standard in a project: adoption guide.
• Native apps: take a generated export from dist/: DTCG JSON, WinUI 3, WPF dark/light, Rust, Slint and Godot. Also WPF High Contrast, the npm package and the Rust crate. All are generated from docs/tokens.json by node tools/build-tokens.mjs. Updating from an earlier release: migration notes.
• Use the compact workflow recipes for forms, review paging, progress and recovery, or try the PortableForge reference.
• Run the demos with the local setup.
• Read the changelog, audit, contribution guide, credits and attribution.

For the maintainer's projects, plan adoption for the next scheduled release and show project-specific mockups for review before implementation.

Open questions

• How well do the Carmine primary and selection and their supporting text or shape hold up for users with color-vision deficiencies? A simulator pass is pending.
• Where should the density rhythm change on tablets and other touch hardware?
• Does the grid motif need a variant for very high-contrast or monochrome displays?

Repository · Docs · Live demo · Interaction reference