Hub specs
Design system
The Hub ships five light and five dark themes on every platform. Users choose Appearance (Light · Dark · Match system) and, independently, a light theme and a dark theme in Settings › Appearance. Status colours, danger red, the logo and avatars are never themed.
The actual HTML mockup, rendered with the theme selected in the header. Use the cards below to try each palette.
The wordmark's teal on cool, barely-tinted greys. Calm and closest to the current mockups.
background#F3F6F6sidebar#EAF0F0surface#F6F9F9raised#FFFFFFtext#10272Atext-secondary#56686Aseparator#D9E2E2accent#137C7Aaccent-strong#0E5F5Daccent-subtle#DDF0EEon-accent#FFFFFFAccent text 5.01:1 · Body 14.36:1 · Secondary 5.86:1
The mark's root indigo with lavender-tinted neutrals taken from the icon surface.
background#F4F4FAsidebar#EBEBF5surface#F7F7FCraised#FFFFFFtext#1A1838text-secondary#5D5B78separator#DEDEEBaccent#3D3BB8accent-strong#2C2A8Faccent-subtle#E6E6FAon-accent#FFFFFFAccent text 8.35:1 · Body 15.56:1 · Secondary 6.5:1
A deepened lime (moss) on warm paper. Earthy, the most 'substrate' of the five.
background#F5F4EEsidebar#EDECE3surface#F9F8F3raised#FFFFFEtext#22261Atext-secondary#5F6455separator#E1DFD2accent#4A7322accent-strong#375719accent-subtle#E6EFD8on-accent#FFFFFFAccent text 5.58:1 · Body 14.01:1 · Secondary 6.1:1
The bracket coral, darkened for text contrast, on warm clay neutrals.
background#F9F5F2sidebar#F1EBE6surface#FBF8F6raised#FFFFFFtext#2A1D17text-secondary#6E5D55separator#EAE0D8accent#B44529accent-strong#90361Faccent-subtle#F7E3DBon-accent#FFFFFFAccent text 5.49:1 · Body 15.06:1 · Secondary 6.25:1
The cap pink, deepened to raspberry, on faintly rosy neutrals. The boldest light option.
background#F9F6F8sidebar#F2ECF0surface#FBF8FAraised#FFFFFFtext#2A1622text-secondary#6E5A66separator#EADFE5accent#B3285Baccent-strong#8F1F48accent-subtle#F7E0E9on-accent#FFFFFFAccent text 6.23:1 · Body 15.83:1 · Secondary 6.33:1
The icon's night indigo as the base, periwinkle accent. Matches the dark app icon exactly.
background#15132Esidebar#1B1938surface#211F42raised#25234Btext#ECEBFAtext-secondary#A6A4C8separator#34325Caccent#8E8CFFaccent-strong#B4B3FFaccent-subtle#2C2A63on-accent#15132EAccent text 6.31:1 · Body 15.31:1 · Secondary 6.17:1
Blue-green depths with the wordmark's light teal. Continuous with Teal Ledger.
background#0D1819sidebar#122021surface#162729raised#1A2E30text#E3F1F0text-secondary#93ADACseparator#26403Faccent#55CFC9accent-strong#8BE3DEaccent-subtle#133C3Bon-accent#062423Accent text 8.69:1 · Body 15.58:1 · Secondary 5.97:1
Neutral graphite, so the OS chrome feels native, with the cap pink as a single bright accent.
background#161618sidebar#1D1D20surface#222226raised#28282Ctext#F1EFF1text-secondary#A3A0A7separator#34343Aaccent#FF86AEaccent-strong#FFB0CAaccent-subtle#3E2030on-accent#3A0A1EAccent text 7.47:1 · Body 15.8:1 · Secondary 5.69:1
Green-black soil with a lime accent. Pairs with Moss Paper.
background#10150Fsidebar#151C14surface#1A2219raised#1F291Etext#E8EFE2text-secondary#9DAA95separator#2C3929accent#B8E26Aaccent-strong#D3F09Aaccent-subtle#2C3B19on-accent#1A2608Accent text 10.66:1 · Body 15.73:1 · Secondary 6.18:1
Warm charcoal with the light coral accent. Pairs with Coral Clay.
background#191412sidebar#201916surface#261E1Araised#2C231Ftext#F4ECE8text-secondary#B3A39Bseparator#3B302Baccent#FF9A80accent-strong#FFBCA9accent-subtle#44261Don-accent#3D1206Accent text 7.91:1 · Body 15.66:1 · Secondary 6.31:1
Every platform implements the same roles. Names come from themes.json.
| Role | Used for | L1 | L2 | L3 | L4 | L5 | D1 | D2 | D3 | D4 | D5 |
|---|---|---|---|---|---|---|---|---|---|---|---|
background | window / grouped background | ||||||||||
sidebar | sidebar, navigation rail | ||||||||||
surface | subtle cards, group backgrounds, tiles | ||||||||||
raised | content panes, cells, text fields, dialogs, menus | ||||||||||
text | primary text and icons | ||||||||||
text-secondary | secondary text, captions | ||||||||||
text-tertiary | placeholders, disabled text (never for content) | ||||||||||
separator | hairlines, borders | ||||||||||
accent | primary buttons, selection, switches, focus, links in dark | ||||||||||
accent-strong | pressed / hover accent, links on light where accent < 4.5:1 | ||||||||||
on-accent | text and icons on accent fills | ||||||||||
accent-subtle | selected rows, info banners, chips | ||||||||||
link | link text | ||||||||||
selection | selected list/table rows (non-macOS) | ||||||||||
control-fill | secondary buttons, search fields, segmented track | ||||||||||
control-fill-strong | progress tracks, pressed secondary | ||||||||||
focus-ring | keyboard focus ring | ||||||||||
scrim | modal scrim colour (with scrim-opacity) |
Checked for every theme. In forced-colors / high-contrast modes the Substratal theme is turned off and system colours apply.
| Theme | on-accent/accent | link/raised | text/background | text-secondary/raised | text-secondary/background | accent/background |
|---|---|---|---|---|---|---|
| L1 Teal Ledger | 5.01:1 | 5.01:1 | 14.36:1 | 5.86:1 | 5.39:1 | 4.61:1 |
| L2 Indigo Root | 8.35:1 | 8.35:1 | 15.56:1 | 6.5:1 | 5.93:1 | 7.62:1 |
| L3 Moss Paper | 5.58:1 | 5.57:1 | 14.01:1 | 6.1:1 | 5.54:1 | 5.06:1 |
| L4 Coral Clay | 5.49:1 | 5.49:1 | 15.06:1 | 6.25:1 | 5.77:1 | 5.07:1 |
| L5 Spore Pink | 6.23:1 | 6.23:1 | 15.83:1 | 6.33:1 | 5.9:1 | 5.8:1 |
| D1 Night Soil | 6.31:1 | 5.17:1 | 15.31:1 | 6.17:1 | 7.53:1 | 6.31:1 |
| D2 Deep Teal | 8.69:1 | 7.55:1 | 15.58:1 | 5.97:1 | 7.59:1 | 9.6:1 |
| D3 Graphite Spore | 7.47:1 | 6.48:1 | 15.8:1 | 5.69:1 | 7.01:1 | 7.98:1 |
| D4 Forest Floor | 10.66:1 | 10.13:1 | 15.73:1 | 6.18:1 | 7.58:1 | 12.43:1 |
| D5 Ember Clay | 7.91:1 | 7.45:1 | 15.66:1 | 6.31:1 | 7.5:1 | 8.86:1 |
ThemeStore (@Observable) supplies \.palette and .tint from .substratalTheme(store).
Theme dictionaries override SystemAccentColor*, text, fill and stroke resources; ThemeService swaps them.
Ten Material 3 ColorSchemes; SubstratalTheme(mode, light, dark) picks one. Dynamic colour is off.
Redefines libadwaita named colours via one Gtk.CssProvider that reloads on notify::dark.
--sub-* custom properties keyed by data-scheme, data-light-theme, data-dark-theme on <html>.
