> lvl0/ui
The shared visual style for lvl0 projects. This page is built with the package it documents, so it breaks visibly if the package does. Read the values here rather than from another project.
[SOURCE]
|
npm i git+ssh://git@forge.lvl0.xyz:2222/lvl0/ui.git#v0.1.0
> Palette
Click a value to copy. Use token names, never raw red-* steps.
House red. Text, active borders, focus, glow source.
Secondary. Dividers, resting borders, recessed chrome.
Near-black page ground.
Raised surface.
Muted surface.
Muted text.
Destructive actions.
Chart colours
--radius: 0 — square corners throughout.
> Glows
The part a values table cannot convey. All four against the real background.
Box-shadow bloom in primary, brightening on :hover and
:focus. For bordered elements that are active or focusable.
Two-layer text-shadow. Use this on text —
.glow-red haloes the element's box, which smudges around a
borderless heading instead of tracing the letters.
Softer bloom for bordeaux-bordered elements. Emits
primary-tinted light, not bordeaux — bordeaux at
oklch(25.8%) is too dark to bloom against a near-black ground,
so a bordeaux halo is invisible. Dim element, brighter glow, as CRT
phosphor behaves.
.glow-bordeaux-line — a single wide shadow on a hairline has no
box to hug and just fades out. This uses a tight core plus a wider spill so a
2px rule reads as lit.
> Font
.font-digital — 7-Segment by
Jan Bobrowski,
SIL OFL 1.1. fonts/OFL.txt must ship wherever the font does.
Numerals only. Letters render badly — the face has no strokes for most of them:
> Primary or bordeaux?
Primary
- > All text
- > Focused input borders
- > Borders of clickable things
- > Filled button backgrounds on hover
- > The source colour of every glow
Bordeaux
- > Dividers and rules
- > Resting input borders
- > Panel outlines
- > Row separators
- > Scrollbar thumbs
The contrast is full red against bordeaux — never two brightnesses of red. An element commonly moves from bordeaux to primary on focus, with its glow rising at the same time, so the state change is signalled twice.
> Worked example
The anagram-finder form and results panel — the whole system in one screen.