AionAion

Your code isthe deepest thingon the screen.

Gold marks where you are. Every colour is solved, never chosen.

registry.ts — aion
epoch.ts
registry.ts
theme.json
1 // Every colour below is solved, never chosen.
2 import { solveLightness, contrastEmitted } from '@sltsh/aion-tokens';
3  
4 export async function loadEpoch(id: string): Promise<Epoch> {
5 // resolve the age from the registry
6 const FLOOR = 4.5; // the floor every body text pair must clear
7 const entry = await registry.get(id);
8 if (!entry) throw new NotFoundError(`no epoch ${id}\n`);
9  
10 return {
−11 label: entry.name,
+12 label: entry.label ?? id,
13 span: 1_440 * 365,
14 ratio: contrastEmitted(fg, bg),
15 eternal: true,
16 };
17 }
entry 2 of 5
loadEpoch(id: string)

Resolves an age from the registry. Throws when the identifier is unknown.

async core
Problems 2 Terminal Output Ports
aion git:(main) npm run verify
> aion@0.1.0 verify — packages/tokens
✓ states 559 reading states
✓ contrast 12564 pass, 0 fail, 5 exempt
! vsix SAMPLE — an invented warning
main* ↻ 0↓ 2↑ 2 5 Ln 13, Col 34 Spaces: 2 UTF-8 TypeScript
AionAion Light
The proof

Six claims. Each one measured.

01 Depth

Your code is the deepest thing on the screen.

VS Code’s defaults put the sidebar below the editor. Aion reverses that: the editor is the darkest surface, and every bar, panel and widget steps up from it by a measured amount, so your code sits at the bottom of the stack.In Aion Light the editor is the lightest surface, and every bar, panel and widget steps down from it by a measured amount. Either way your code sits on the extreme surface, and everything else stands back from it.

  • editor1.00:11.00:1
    • panel1.03:11.06:1
      • panel1.03:11.06:1
    • bars1.06:11.06:1
      • title bar1.06:11.06:1
      • activity bar1.06:11.06:1
      • sidebar1.06:11.06:1
      • tabs1.06:11.06:1
      • status bar1.06:11.06:1
    • widgets1.15:11.13:1
      • find widget1.15:11.13:1
      • hover card1.15:11.13:1
    02 Solved

    Every colour is solved, never chosen.

    Each accent is solved against the worst surface it can land on. Pick one and drag it until it fails.

    Passes on its worst surface, find match: 6.77:1Passes on its worst surface, selection: 5.19:1

    Epocheditor10.44:1
    Epochcurrent line8.87:1
    Epochselection7.79:1
    Epochword highlight8.78:1
    Epochselection + word highlight7.10:1
    Epochhover widget9.09:1
    Epochfind match6.77:1
    Epocheditor6.80:1
    Epochcurrent line6.28:1
    Epochselection5.19:1
    Epochword highlight6.09:1
    Epochselection + word highlight5.29:1
    Epochhover widget5.99:1
    Epochfind match6.36:1
    #e4c058 on find match#6c5400 on selection
    1:13:14.5:17:112:1 floor 4.5:1 shipped 6.77:1 +2.271:13:14.5:17:112:1 floor 4.5:1 shipped 5.19:1 +0.69

    Measured from emitted bytes over seven surfaces: editor, current line, selection, word highlight, selection with word highlight, hover widget and find match.

    03 Rounded

    Your screen shows a rounded colour. Aion measures that one.

    1. Designed exactly. Each colour starts as a precise value, with as many decimals as it needs.
    2. Sent rounded. Your display only takes three whole numbers from 0 to 255, so every channel is rounded.
    3. Measured as sent. Rounding can turn a pass into a fail. The gate reads the rounded colour, the one you see.
    R118.84rounds up119
    G126.30rounds down126
    B140.91rounds up141
    exact4.500:1passes
    gap−0.011
    on your screen4.489:1fails

    The exact colour passes and the one on your screen fails. A gate that read the exact value would ship this.

    R112.32rounds down112
    G114.79rounds up115
    B119.60rounds up120
    exact4.500:1passes
    gap−0.021
    on your screen4.479:1fails

    The exact colour passes and the one on your screen fails. A gate that read the exact value would ship this.

    An example colour at the comment’s hue, near the floor, on the current scheme’s editor.

    04 States

    Code remains legible with things on top of it.

    Select, search or diff. Stack the states VS Code can draw and watch each colour stay above the floor.

    // read from cache
    const entry = cache.get(id);
    entry = cache.get(next);
    entry = cache.get(prev);
    <<<<<<< current
    return local;
    ||||||| common
    return base;
    =======
    return remote;
    >>>>>>> incoming
    comment
    6.95:1
    lowest
    keyword
    7.58:1
    variable
    6.96:1
    operator
    9.58:1
    punctuation
    8.04:1
    function
    8.35:1
    drawn backgrounds #11151c
    // read from cache
    const entry = cache.get(id);
    entry = cache.get(next);
    entry = cache.get(prev);
    <<<<<<< current
    return local;
    ||||||| common
    return base;
    =======
    return remote;
    >>>>>>> incoming
    comment
    6.33:1
    lowest
    keyword
    6.72:1
    variable
    6.73:1
    operator
    6.72:1
    punctuation
    7.28:1
    function
    6.72:1
    drawn backgrounds #f6f8fd

    Nothing on. Turn on reading states at their positions in the sample.

    These controls cover a named set of reading states, not every combination an editor can produce.

    05 Terminal

    Sixteen slots, measured on both backgrounds.

    The same colours in a standalone terminal and a VS Code panel. Each slot is measured wherever it ships.

    16 × 2 slots × measured backgrounds

    standalone #11151c
    ~/tidal main $ git status
    On branch main
    modified: src/tide.ts
    new file: test/tide.test.ts
    ~/tidal $ node --test
    ✔ predicts the next high water (2.1ms)
    ⚠ 1 test skipped · tests 5 · pass 5 · fail 0
    vscodePanel #14181f
    ~/tidal main $ git status
    On branch main
    modified: src/tide.ts
    new file: test/tide.test.ts
    ~/tidal $ node --test
    ✔ predicts the next high water (2.1ms)
    ⚠ 1 test skipped · tests 5 · pass 5 · fail 0
    0 blackstandalone 1.21:1vscodePanel 1.17:1exempt as text
    1 redstandalone 5.55:1vscodePanel 5.39:1
    2 greenstandalone 7.72:1vscodePanel 7.50:1
    3 yellowstandalone 8.51:1vscodePanel 8.28:1
    4 bluestandalone 6.69:1vscodePanel 6.51:1
    5 magentastandalone 6.07:1vscodePanel 5.91:1
    6 cyanstandalone 7.71:1vscodePanel 7.50:1
    7 whitestandalone 8.04:1vscodePanel 7.82:1
    8 bright-blackstandalone 5.71:1vscodePanel 5.55:1
    9 bright-redstandalone 6.96:1vscodePanel 6.77:1
    10 bright-greenstandalone 9.61:1vscodePanel 9.34:1
    11 bright-yellowstandalone 10.44:1vscodePanel 10.15:1
    12 bright-bluestandalone 8.35:1vscodePanel 8.12:1
    13 bright-magentastandalone 7.58:1vscodePanel 7.37:1
    14 bright-cyanstandalone 9.58:1vscodePanel 9.31:1
    15 bright-whitestandalone 14.87:1vscodePanel 14.46:1

    Slot 0 is exempt as a text colour. SGR 30 selects slot 0, so programs can still print hard-to-read text in it: a real limitation. Its guarantee is text printed on top of it.

    The Light slots are measured on the panel and its terminal selection. No Light standalone scheme ships.

    16 × 2 slots × measured backgrounds

    light panel #eff2f7
    ~/tidal main $ git status
    On branch main
    modified: src/tide.ts
    new file: test/tide.test.ts
    ~/tidal $ node --test
    ✔ predicts the next high water (2.1ms)
    ⚠ 1 test skipped · tests 5 · pass 5 · fail 0
    light terminal selection #e7eaef
    ~/tidal main $ git status
    On branch main
    modified: src/tide.ts
    new file: test/tide.test.ts
    ~/tidal $ node --test
    ✔ predicts the next high water (2.1ms)
    ⚠ 1 test skipped · tests 5 · pass 5 · fail 0
    0 blacklight panel 16.45:1light terminal selection 15.30:1
    1 redlight panel 8.24:1light terminal selection 7.67:1
    2 greenlight panel 8.30:1light terminal selection 7.73:1
    3 yellowlight panel 8.22:1light terminal selection 7.65:1
    4 bluelight panel 8.19:1light terminal selection 7.62:1
    5 magentalight panel 8.23:1light terminal selection 7.66:1
    6 cyanlight panel 8.21:1light terminal selection 7.64:1
    7 whitelight panel 10.47:1light terminal selection 9.74:1
    8 bright-blacklight panel 5.22:1light terminal selection 4.86:1
    9 bright-redlight panel 6.38:1light terminal selection 5.93:1
    10 bright-greenlight panel 6.40:1light terminal selection 5.95:1
    11 bright-yellowlight panel 6.44:1light terminal selection 5.99:1
    12 bright-bluelight panel 6.36:1light terminal selection 5.92:1
    13 bright-magentalight panel 6.36:1light terminal selection 5.92:1
    14 bright-cyanlight panel 6.36:1light terminal selection 5.92:1
    15 bright-whitelight panel 15.84:1light terminal selection 14.74:1

    No slot is exempt. Every slot reads as text on both measured backgrounds, the lowest at 4.86:1.

    06 Palette

    Eight colours. One file.

    Each colour sits at its measured contrast against the editor. Point at a colour to see where it is used.

    floor 4.5:1
    async
    keyword7.58:15 in the file
    solve
    function8.35:12 in the file
    Epoch
    type10.44:11 in the file
    'utf8'
    string9.61:11 in the file
    4.5
    number7.81:12 in the file
    entry
    variable6.96:15 in the file
    =>
    operator9.58:13 in the file
    // why
    comment6.95:11 in the file
    floor 4.5:1
    async
    keyword6.72:15 in the file
    solve
    function6.72:12 in the file
    Epoch
    type6.80:11 in the file
    'utf8'
    string6.75:11 in the file
    4.5
    number6.75:12 in the file
    entry
    variable6.73:15 in the file
    =>
    operator6.72:13 in the file
    // why
    comment6.33:11 in the file
    src/tide.ts
    // predict the next high water
    async function predict(entry: Epoch) {
    const floor = 4.5;
    const next = await solve(entry, 'utf8');
    return next ?? 0;
    }
    Install

    Install Aion

    Five places to read code, one set of tokens. Every target passes the same contrast gate.

    VS Code

    Install the extension, then select Aion.

    code --install-extension sltsh.aion-theme

    Obsidian

    Find Aion in Community themes.

    Settings / Appearance / Themes / Aion

    Cursor, Windsurf, VSCodium

    Install from the Open VSX registry.

    Search the extensions view for Aion

    Windows Terminal

    Save aion.json in this folder. Restart Terminal and select Aion.

    %LOCALAPPDATA%\Microsoft\Windows Terminal\Fragments\sltsh

    CSS / Tailwind

    Use the emitted CSS custom properties.

    npm install @sltsh/aion-css