nelsoki

Palette

Every swatch is one step of a scale, from 50 (lightest) to 950 (darkest). Each family has the same 13 steps Flexoki has, and the 400 step is the one that carries the color on the black ground. Click a swatch to copy its hex value.

Ground and ink

The ground is neutral black. The ink runs from white down to base-950, and none of it has chroma, so the only color on a page comes from the accents.

Accents

Roles

Roles name a job, as Flexoki's do. The palette is built for the black ground, and the text roles are checked against it, each needing 4.5:1 or more for normal text.

Light mode

The editor themes add a light mode, Nelsoki Light, on the white end of the same scale. Its ground steps are Flexoki's light ones. Its text roles sit darker than a mirror of the dark ones, because base-500 is too light to read on white, and its accents take the 700 step, the first at which every family clears 4.5:1 on white.

Accents

The 400 step of each family is the one for color on the ground. The hue column shows where each family sits now, beside its place in Flexoki. Green is the anchor, and cyan and blue moved away from it.

Red's 400 is 4.4:1 on the ground, just under the 4.5:1 that normal text needs, so red text that has to meet AA takes red-300 at 6.3:1.

Mappings

The variable names match Flexoki's, so a port written against those names needs only nelsoki's values swapped in. Punctuation and operators use tx-2, and comments use tx-3.

Sample

Each token takes the color that its role names in the mappings above.

// Each swatch name pairs with a step count.
const ANCHOR = '#7fb3a2';

export function swatch(name, steps = 13) {
  return Array.from({ length: steps }, (_, i) => name + '-' + i);
}

Editors

Two themes for each editor, Nelsoki on the black ground and Nelsoki Light on the white one, with the syntax colors in the mappings above and the interface on the ground and ink steps. Nelsoki Light sets its text on base-950, base-700, and base-600 and its accents on the 700 step, the first at which every family clears 4.5:1 on white.

Why

Flexoki was made for its author's own site. Its aim is a palette for reading and writing on digital screens, distinctive yet familiar, calibrated for legibility and perceptual balance across devices. Nelsoki keeps that aim.

Its lightness steps are Flexoki's, except green, which is remapped so its 400 step is the anchor. Each family keeps its own shape from 50 to 950. The text roles sit at 11.9:1, 7.1:1, and 5.2:1 on the ground, so all three clear 4.5:1 for normal text.

The ground and ink are neutral. Flexoki's paper and black both carry a warm tint that suits its ink, and nelsoki drops that tint, so the accents are the only color on the page.

The anchor is #7fb3a2, the flat green disc of the wetland.io mark. Flexoki's olive green sat at hue 119, close to its cyan at 187, and the anchor sits at 172. So cyan moved to 214, blue moved to 258, and yellow leaned toward olive to take part of the room that olive left. Red, orange, purple, and magenta did not move.

Tokens

The palette as CSS custom properties and as JSON, which also carries the role references for both modes and the accent letters. The variable names match Flexoki's, so a port written against those names needs only these values swapped in.

Version 1.1, 2026-11-09. Built from the Flexoki v2.0 values with a neutral black ground, the wetland green (#7fb3a2) as the anchor, cyan, blue, and yellow moved, and the text roles set on base-200, base-400, and base-500. Version 1.1 added the light mode that Nelsoki Light uses.

Credit

Nelsoki is based on Flexoki by Steph Ango (kepano), Copyright (c) 2023 Steph Ango, released under the MIT License, and its changes are released under the same license. Nelsoki is not made by or endorsed by Steph Ango.