LCARS Rules

LCARS RULES · Anatomy of the Frame

Every LCARS frame in this app is a body: a spine runs down the edge, turns
through an elbow into an arm across the top, and the arm articulates through a
wrist into a hand and fingers. The concave joints have names too — the
elbow pit (the curved inner bend of one piece) and the armpit (the square joint
where a separate arm butts the spine). Use these names in comments, commits and audits.

The Assembly

The Parts

Elbow

the load-bearing corner

Where a horizontal run turns into a vertical run through one continuous 90° sweep.
The outer curve takes the full radius R, picked from the ladder
(44 / 40 / 30 / 25…). Elbows come one-piece, or composite — an arm + spine
butt-joined at an armpit, capped so they read as one.

HERE: .twist-container::before (R25) ·
audio-mixer master .am-rail (R44) · super-pool spine (R40) ·
.twist-group > summary gang elbow · the composite
.program-title + .program-row::after frame (R30)

Elbow Pit

the inner bend — always R/2

The concave curve inside the bend of a one-piece elbow — where the shape tucks back
into the frame. The Corner Law (LCARS.md §1.1) fixes it at exactly
half the elbow’s outer radius. Get the pit wrong and the corner reads as
“a rounded rectangle”, not LCARS. Never eyeball it — halve it.

HERE: super-pool 40→20 · audio-mixer 44→22 ·
program frame 30→15 · monitor tile 16→8 (the §1.4 radius table)

Arm

the horizontal rail

The horizontal run leaving the elbow. Its long top and bottom edges are dead
straight; both short ends stay square wherever they butt-join a neighbour
across a seam. The arm carries the furniture: title text, stats, fold controls
all ride on (or hang from) an arm.

HERE: .twist-container::after (the 20px twist top rail) ·
.program-title (the production name bar) ·
the .twist-group summary bar · the .auth-dock band

Armpit

the square arm-to-spine joint

Where a separate arm piece butt-joins the spine’s inner edge: the joint is
square, radius 0 (LCARS.md §1.2), so the two pieces tile into one silhouette.
Not the same as the elbow pit — the pit is the curved inner bend of ONE piece;
the armpit is the square seam between TWO. Composite elbows are an arm and a
spine meeting at an armpit, with the curve worn on the outside only.

HERE: .program-title‘s bottom-right corner (radius 0)
where it caps .program-row::after — “bottom-right stays square (inner edge)”

Wrist

the step before the end

The joint near the end of an arm: a black seam plus (often) a step-down in height
or width, where the rail hands off to its terminal segments. Both sides of the
joint stay square — the step articulates, it never curves. A rail that changes
weight mid-run does it at a wrist, never with a taper.

HERE: the seam where the twist top rail hands off to
.twist-lip · the monitor-twist step-down (45→26px bar, radius 25→16,
Corner Law re-derived at the new size)

Hand

the terminal cap

The cap that closes a run: rounded only on the terminating end (full R),
square on the side that joins the wrist. A segment rounded on both ends is
not a hand — it’s a free-standing pill (the folded super-pool, the credit
pill), which belongs to no arm.

HERE: .lcars-tab‘s pill end
(border-radius: 0 999px 999px 0) · .program-title‘s 14px
leading cap · the twist rail’s 10px cap · .lcp-cap

Finger

the working segments

The short, independently-coloured, usually interactive segments at the end of
a run — tab stacks, fold lips, toggles. Fingers come in rows separated by seams;
each one rounds only its outer end and stays square against its neighbours.
If the user clicks it, it’s probably a finger.

HERE: the footer tab stacks
(.lcars-group-tabs .lcars-tab) · the .twist-lip fold
control · .twist-foldbar

Spine & Foot

the vertical run and its end

The vertical run the elbow feeds. Stacked spine segments meet on square seams
(§1.2 — verticals square their tops and bottoms); only the last segment terminates,
through a foot: the outer bottom corner takes the full R while the inner edge
stays square against the content.

HERE: .program-row::after (45px spine,
border-radius: 0 30px 30px 30px) · the super-pool spine block ·
.am-rail-foot (the audio-mixer literally names it)

Seam

the black gap — the articulation

The black gap between segments. It is not empty space — it’s the joint itself, the
thing that makes a run read as articulated LCARS instead of one smeared bar. Seams
are a few pixels, constant along a run, and both segments arrive at them square.

HERE: the 10px gap between .twist-container::before
(ends at 100px) and ::after (starts at 110px) · every gap in the
footer tab rows

The Corner Law, restated

From LCARS.md §1 — the two rules that make a shape read as LCARS.
The pit is not a style choice; it is derived.

Pit = R/2. The elbow pit is always exactly half the elbow’s outer radius.
44→22 · 40→20 · 30→15 · 16→8. Halve it, never eyeball it.
Joints are square. Armpits, wrists and seams are radius 0 — a shape rounds
only the corners that terminate into open space. Verticals square their tops and
bottoms; horizontals square their long edges and round their ends.
Radii come off the ladder. 44 / 40 / 30 / 25 / 16 / 15 / 12 / 10 / 8.
A new part picks the nearest rung, then derives its pit.
Chirality mirrors the skeleton, never the text. On a hand-flip
(html[data-chirality]), elbows curl the other way, hands cap the other
end, spines swap edges — but labels, data and spatial canvases
(.chir-exempt) never mirror.
Name the part. CSS comments, audits and commit messages use this
vocabulary: “the arm’s trailing hand”, “square at the armpit”,
“wrist steps 45→26”, “three fingers on the footer group”.

Audit — where each part lives in this codebase

Part	Instance	Where	Geometry
Elbow	Twist frame elbow (one-piece: spine head + arm root)	`lcars.css · .twist-container::before`	45px spine border, 20px arm border, outer R25 (monitor tiles R16)
Elbow	Production frame (composite: title arm caps the spine)	`lcars.css · .program-title + .program-row::after`	R30 outer cap; title `14px 30px 0 14px`
Elbow	Audio-mixer master elbow — largest in the app	`src/editors/audio-mixer · .am-rail`	R44 → pit 22; mirrored rule for chirality
Elbow	Super-pool category spine	`lcars.css · super-pool block (~1228)`	R40 → pit 20; folded pool tightens to R15 pill
Elbow	Gang-row elbow — the summary IS the arm	`lcars.css · .twist-group > summary (~1447)`	outer cap top-left, terminating pill right, square armpit bottom-left
Elbow pit	Every inner bend	derived, `LCARS.md §1.1 + §1.4`	always R/2: 44→22 · 40→20 · 30→15 · 16→8
Arm	Twist top rail	`lcars.css · .twist-container::after`	20px tall, square left (seam to elbow), 10px hand right
Arm	Production title bar	`lcars.css · .program-title`	full-width, butts flush into the spine at the armpit
Arm	EDIT-LAYOUT band seated on the title rail	`src/ui/console/authoring.ts · .auth-dock`	seated at y=44, h=35 — keep in sync with the frame paddings
Armpit	Title-bar ↔ spine joint	`lcars.css · .program-title (bottom-right)`	radius 0 — “bottom-right stays square (inner edge)”
Wrist	Rail hand-off to the fold lip	`lcars.css · .twist-lip (~914)`	seam + same-height segment overlaying the rail end
Wrist	Monitor-tile step-down	`lcars.css · .monitor-twist::before (~289)`	bar 45→26px, radius re-derived 25→16 at the new weight
Hand	Footer tab cap	`src/ui/console/footer.ts · .lcars-tab`	`border-radius: 0 999px 999px 0` — full pill cap, square butt
Hand	Chat-dock caps	`lcars.css · .lcp-cap (~377)`	R11, mirrored to face inward per chirality
Finger	Footer group tab stacks	`lcars.css · .lcars-group-tabs .lcars-tab`	stacked column, seam-separated, outer end caps only
Finger	Fold lip + fold bar on the twist rail	`lcars.css · .twist-lip / .twist-foldbar`	interactive; chevron rotates .2s (LCARS.md §5)
Spine	Production right spine	`lcars.css · .program-row::after`	45px wide, `0 30px 30px 30px` — square where it meets the arm
Foot	Spine terminus	`lcars.css · .am-rail-foot / .program-row::after bottom`	outer corner R, inner square; the mixer names it literally
Seam	Elbow ↔ arm gap on every twist	`lcars.css · ::before ends 100px / ::after starts 110px`	10px black; constant along the run

TWISTROUTING · LCARS-RULES.html — companion to LCARS.md · palette per §2
(video lilac · audio tomato · program blue bell) · all diagram geometry on this page
obeys the Corner Law it documents.

i@like.audio

Anthony P. Kuzub

LCARS Rules — Anatomy of the Frame