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
Level 0 — page
Level 1 — card
Sprint 24
In progress.
Level 2 — section
Level 3 — selected
Level 4 — meta
Build status.
Level 0 (A)
Level 1 (B)
Sprint 24
In progress.
Level 2 (A)
Level 3 (B)
Level 4 (A)
Build status.
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.
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
Description
Add Google and GitHub OAuth providers. Token refresh should happen transparently without user intervention.
Completion
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.
| Situation | Model |
|---|---|
| Product UI, general case | Hybrid (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 depth | Continuous, capped at 3-4 levels — density is dominant |
| Focus-mode editors, single-concept screens | Single surface + spacing only — the most refined option |
| You want to add a third nested inline surface | Stop. Use spacing + label, or move to a sheet/route. A third surface is almost always a symptom. |