Elevation Philosophy

Continuous (5 tokens) vs Alternating (2 tokens) vs Hybrid (2 surfaces + spacing) — the recommended nqui model.

Continuous — 5 tokens

Alternating — 2 tokens (×N levels)

Hybrid — 2 surfaces + spacingrecommended

+ spacing & type weight for depth ≥3

Continuous

5 surfaces

Level 0 — page

Level 1 — card

Sprint 24

In progress.

Level 2 — section

Level 3 — selected

Level 4 — meta

Build status.

Levels 2-4 collapse visually. Five tokens to maintain.

Alternating

2 surfaces ×N

Level 0 (A)

Level 1 (B)

Sprint 24

In progress.

Level 2 (A)

Level 3 (B)

Level 4 (A)

Build status.

Every adjacent pair stays distinct. But past level 2, alternation reads as a pattern, not depth.

Hybridnqui rule

2 surfaces · cap

Level 0 (A) — page

Level 1 (B) — card

Sprint 24

In progress.

Section

Selected issue lives here.

Selected

Expanded inline.

Build status

12 of 14 passing.

Calmest. 2 surfaces total. Depth ≥3 carried by spacing rhythm, uppercase labels, type weight, and one optional indent rule. No surface inflation.

A realistic issue detail — hybrid applied

One card on one page. Internal hierarchy via spacing rhythm + uppercase labels + one Separator + type weight. No third surface anywhere.

NQ-412

Implement OAuth 2.0 login flow

In progress High priority Alina Torres Due Friday

Description

Add Google and GitHub OAuth providers. Token refresh should happen transparently without user intervention.

Completion

68%

Build health · last 14 days

What's doing the work: surface A (page) → surface B (card) — the only flip · section gaps of 24/32 px · uppercase `label-section` per block · one horizontal Separator between header and body · type weight contrast (`label-tag` muted vs `h-big` bold). Five visible "sections." Zero nested surfaces.

When to use which

Situation Model
Product UI, general caseHybrid (2 surfaces + spacing) — the nqui default
Stacked modals (modal opening from a modal)Continuous — each layer must feel physically above the previous
Bloomberg/observability dashboards with genuine semantic depthContinuous, capped at 3-4 levels — density is dominant
Focus-mode editors, single-concept screensSingle surface + spacing only — the most refined option
You want to add a third nested inline surfaceStop. Use spacing + label, or move to a sheet/route. A third surface is almost always a symptom.