One voice, every surface.
Lisa's direction is elementary-inspired: restrained typography, quiet color, humane defaults, one visual voice (recorded in docs/notes/design-direction.md). Tokens first — a single token source is the design language; the shell CSS, GTK4/Adwaita, and Qt surfaces all read from it.
The violet ramp
Everything brand-colored derives from the Lisa violet, #6D45C9 — the same seed the GDM greeter, the wordmark accents, and every generated token sheet use. The three brand steps branding/tokens.json sanctions — every surface, this site included, resolves to these:
| Step | Value |
|---|---|
lisa-700 | #4F378B |
lisa-500 | #6D45C9 |
lisa-300 | #9B7BE8 |
Editorial tokens
The portal and the marketing site share one editorial system — paper and ink, a violet accent, amber reserved for a single meaning. Light is the default; dark inverts by token, never ad hoc.
remote.* Ledger kinds) and rendered in the dedicated egress color — #E66100 with CSS class leaves-hardware (ADR-0010). Settings shows an amber "leaves your hardware" badge per cloud provider. This site's amber tokens are the editorial rendering of the same rule: amber is never decoration.Type: Rubik
Rubik is the UI face — shipped in the OS image as the system font (gschema override). It is deliberately not bundled with any toolkit: the family name resolves against the OS-installed font and falls back to the platform default sans when absent. Monospace surfaces (code, dates, ledger entries) use the platform mono stack with tabular numerals.
The lisa_ui widget kit — parked
This is not how you build a Lisa app. libs/lisa_ui is the Flutter kit ADR-0014 designed, and ADR-0047 parked it: unshipped, unproven on hardware, not the default. Every shipped surface is GJS + GTK4/Adwaita. The kit is kept, not deleted, and the name is reserved for the shared GJS library ADR-0047 §6 asks for. Recorded here because the token vocabulary below is the same one every surface reads. From lisa_ui.dart:
| Export | What it is |
|---|---|
lisaSeedColor | The violet seed every Lisa theme derives from: Color(0xFF6D45C9). |
lisaTheme(brightness) | Builds the Lisa ThemeData: Material 3, ColorScheme.fromSeed on the violet, Rubik, and tokens mapped into component shapes (card/dialog/input radius). |
LisaTokens / LisaTheme | The design-token set (background, surface, text, accent, danger, radius, spacing, fontSize) with inherited-widget access. LisaTokens.fallback mirrors the design-direction note until the system theme file lands — consumers read tokens, never hardcode. |
LisaApp | The root widget every Lisa app starts with: a MaterialApp pre-wired to Lisa theming, light + dark, following the OS mode. |
LisaScaffold | A Scaffold with Lisa defaults: an AppBar when a title is set, body inset by SafeArea. |
LisaCard | A Card padded by the spacing token; corner radius from the radius token. |
LisaStreamText | Streaming model output: accumulates token deltas, shows a stop affordance while streaming, reserves the footnote row for provenance chips. |
ConsentChip | The consent affordance for a scope request: states the scope plainly, offers allow / deny, never dark-patterns. |
lisa forge targets GJS. To build an app, read Building apps and run lisa dev check.Principles
- Tokens first. One token source is the design language — shell CSS, GTK4/libadwaita, and Qt all read it (ADR-0038). One voice across every surface.
- Identity where freedom is total. First-party apps carry the look first — our widgets, our rules; the GNOME base is kept for portal maturity.
- Restraint. Quiet color, hairline rules, generous whitespace; the violet earns emphasis by being scarce.
- Honesty in chrome. Egress is amber, always; consent is a plain question; streaming output shows a stop affordance and its provenance.