The design
Indigo, dipped again and again.
Night is Tokyo Night, Tatami's palette, and its indigos carry their old dye names. Day is a nod to IRIX. High Contrast is Night with stronger edges and text, for low vision. Every colour and size on this page, and on this whole site, is read from Aizome's own theme when the site is built, so the two can't drift apart.
The mark
A window's amber tab over three dips of indigo.
The mark is four modules square: the tab, two modules by one, at the top left in kohaku amber, over three stripes, one module each, pale (kamenozoki), mid (hanada) and deep (ai). Its amber is fixed: it doesn't follow your focus colour. The Toolchest's button carries it.
Beside the word, 藍染 stands vertically like a seal.
The dyes
The indigos from lightest to darkest, and the amber: the names they carry in the theme, and on the calendar, the weather and the rings of Kura.
- kamenozoki甕覗
#a9c4ff - hanada縹
#7aa2f7 - ai藍
#3d59a1 - kon紺
#24283b - kachi褐
#16161e - kohaku琥珀
#e0af68
Focus colours
The focused window's tab and rail, focus rings, and whatever is current. Kohaku amber is the default; Settei offers three more. Each has a Night and a Day value.
- amber
#e0af68#f5c542 - cyan
#7dcfff#8fd8f7 - rose
#f7768e#ffa3b6 - lime
#9ece6a#b8e07a
The palette
Every colour a surface of Aizome uses, in Night, Day and High Contrast, with what the theme says it's for. This site is dressed in the same colours: its menu bar is bar, its windows surface, their tabs focus and tab-idle.
| Colour | Night | Day | High Contrast |
|---|---|---|---|
barGlobal menu bar and the Deskbar header. | #1c1e2c | #d6d9e8 | #0b0c12 |
surfaceWindow content. | #1a1b26 | #f4f5fa | #0f1018 |
chromeToolbars, the Deskbar, window chrome. | #222436 | #dde0ec | #14151f |
raisedMenus, torn-off palettes, stacked tabs. | #2a2e44 | #fbfbfe | #1c1e2c |
sunkWells: notification previews, sidebars. | #16161e | #e8eaf2 | #08080c |
lineDividers and menu rules. | #2f334d | #b8bdd6 | #7a83b0 |
line2Control borders. | #3b4261 | #9aa0c2 | #a9b1d6 |
bevel-hi1pt top highlight on frames, bars and tabs. | rgb(255 255 255 / 0.07) | #ffffff | rgb(255 255 255 / 0.25) |
bevel-lo1pt outer edge of frames, tabs and menus. | #0b0c12 | #6f7598 | #c0caf5 |
slabThe hard 3pt offset shadow: a solid fill, never blurred. | rgb(0 0 0 / 0.5) | rgb(40 44 80 / 0.32) | #000000 |
text | #c0caf5 | #1a1b26 | #ffffff |
text2 | #a9b1d6 | #2e3452 | #dfe4ff |
text3Tertiary text, shortcuts, labels. | #939aba | #50577a | #c0caf5 |
faintDecoration only (disabled, line numbers); under 4.5:1. | #565f89 | #8990b3 | #939aba |
tab-idleTabs of windows without focus. | #2f334d | #c4c8dc | #2f334d |
tab-idle-text | #a9b1d6 | #2e3452 | #ffffff |
selectionSelected rows and text: ai, the indigo. | #3d59a1 | #3d59a1 | #4a67b3 |
on-selection | #eef1ff | #ffffff | #ffffff |
menu-titleTitle strip of NeXT-style menus and palettes. | #0b0c12 | #1a1b26 | #000000 |
on-menu-title | #c0caf5 | #f4f5fa | #ffffff |
desktop-labelChip behind desktop icon labels. | rgb(10 10 16 / 0.62) | rgb(255 255 255 / 0.78) | rgb(0 0 0 / 0.85) |
focusThe focused window's tab, and focus rings. | #e0af68 | #f5c542 | #ffc777 |
on-focus | #1a1b26 | #1a1b26 | #000000 |
blue | #7aa2f7 | #2e5fd0 | #a9c4ff |
cyan | #7dcfff | #0b6f9c | #a4e2ff |
green | #9ece6a | #4f7a28 | #c3e88d |
red | #f7768e | #c4314b | #ff98a8 |
violet | #bb9af7 | #7247c9 | #d7c2ff |
amber | #e0af68 | #9a6a12 | #ffc777 |
desktopThe desktop behind everything when no wallpaper shows. | #16161e | #c9cde0 | #000000 |
Contrast
Aizome's theme holds its text to 7:1 and its secondary text, selections and focus to 4.5:1. These are the pairs this site sets, measured when it was built; the build stops if one falls short.
| Text, on | Night | Day | High Contrast |
|---|---|---|---|
Body texttext on surface, at least 7:1 | 10.6:1 | 15.7:1 | 19.0:1 |
Text on the desktoptext on desktop, at least 7:1 | 11.1:1 | 10.8:1 | 21.0:1 |
The Deskbartext on chrome, at least 7:1 | 9.5:1 | 13.0:1 | 18.2:1 |
Codetext on sunk, at least 7:1 | 11.1:1 | 14.2:1 | 20.0:1 |
Secondary texttext2 on surface, at least 4.5:1 | 8.1:1 | 11.2:1 | 15.1:1 |
The footertext2 on bar, at least 4.5:1 | 7.8:1 | 8.6:1 | 15.5:1 |
Captions and notestext3 on surface, at least 4.5:1 | 6.2:1 | 6.5:1 | 11.7:1 |
Notes in the Deskbartext3 on chrome, at least 4.5:1 | 5.5:1 | 5.3:1 | 11.2:1 |
Notes on a highlighted rowtext3 on raised, at least 4.5:1 | 4.8:1 | 6.8:1 | 10.2:1 |
Notes in a welltext3 on sunk, at least 4.5:1 | 6.5:1 | 5.9:1 | 12.4:1 |
Notes in the menu bartext3 on bar, at least 4.5:1 | 6.0:1 | 5.0:1 | 12.1:1 |
Linksblue on surface, at least 4.5:1 | 6.8:1 | 5.3:1 | 10.9:1 |
Links on a highlighted rowblue on raised, at least 4.5:1 | 5.3:1 | 5.5:1 | 9.5:1 |
The menu bartext on bar, at least 7:1 | 10.2:1 | 12.2:1 | 19.5:1 |
The focused window's tabon-focus on focus, at least 4.5:1 | 8.5:1 | 10.5:1 | 13.7:1 |
Other windows' tabstab-idle-text on tab-idle, at least 4.5:1 | 5.8:1 | 7.3:1 | 12.3:1 |
The current page, buttonson-selection on selection, at least 4.5:1 | 5.9:1 | 6.7:1 | 5.4:1 |
Type
Every window wears a tab only as wide as its title.
architecture.md
00:03:19 ControlSuperUp
藍染 甕覗 縹 藍 紺 褐 琥珀
Shortcuts print their modifiers as glyphs, in the order ⌃ ⌥ ⇧ ❖, from Noto Sans Symbols 2. Every clock and meter uses tabular digits, so nothing shifts as numbers change.
Frames, tabs and effects
Frames are square, with a 1pt bevel and a hard shadow three points right and down: a solid fill, never blurred, whole pixels at every integer scale. Everything sits on a 4pt grid, and no pointer target is smaller than 24 points.
bar-height- 24pt The global menu bar.
tab-height- 22pt A window's title tab.
tab-pad- 10pt Horizontal padding inside a tab, each side of the title.
tab-min-width- 64pt The narrowest a tab gets (for a short or empty title).
menu-row- 24pt A row in a menu.
target- 24pt The smallest pointer target anywhere.
frame-edge- 1pt A window frame's edge.
bevel- 1pt
focus-rail- 2pt The rail along the top of a focused frame, in the focus colour.
shadow- 3pt The hard shadow's offset, right and down.
deskbar-width- 232pt The Deskbar's width.
grid- 4pt Everything sits on a 4pt grid.
resize-reach- 6pt How far outside a frame its edges can still be grabbed to resize.
Three effects tiers, and Aizome must look finished in all of them. Lean, the default: hard shadows and 80 ms of motion, no frost. Full: translucent, frosted menus, panels and Deskbar, and 120 ms of motion. Austere: no shadows, no motion, nothing see-through, the least to draw. Motion moves layers and never repaints; reduced motion means none.
Fast by construction
A 4 ms budget, from an event to its frame, for every part of the desktop.
Integer scales first, 1×, 2× and 3×, with a Size control that changes layout, not pixels. Every surface declares what it covers opaquely, so nothing under it is drawn. Only what changed is redrawn: a clock tick repaints the clock, moving a window composites without drawing anything again, and an idle desktop draws no frames at all.
The compositor composites on the GPU with GLES, and falls back to software by itself when there's no usable GPU. The shell and apps draw on the processor in Sukumo's render thread, damage-tracked, so they look and perform the same either way.
| What | Median | 95th |
|---|---|---|
| The compositor moving a window (GPU) | 0.46 | 0.61 |
| The compositor moving a window (software) | 0.45 | 0.69 |
| Switching Desks (GPU) | 0.45 | 0.75 |
| The clock's tick in the menu bar and Deskbar | 0.11 | 0.13 |
| A key typed in the palette | 0.74 | 1.80 |
| A character typed in a 2,000-line editor | 0.29 | 0.51 |
| Scrolling a 10,000-row list a notch | 0.15 | 0.20 |
| Settei: flipping a switch | 0.20 | 0.23 |
| Hako: ↓ in a column of 10,000 files | 2.28 | 2.44 |
| Myaku: a new reading of 600 processes | 2.61 | 2.99 |
| The login screen: typing a password | 0.06 | 0.07 |