Quietly composed.

Six ways Lumos lays content out and holds its place while it loads — lists, code, shimmer, faces, and a gentle horizontal scroll. Accent rests until the moment a row is chosen.

Listvariant · density

Unordered · L1 → L2

Confirm crew availability
- Lead esthetician
- Front-desk cover
Stock treatment room
Send the intake form

Ordered · compact

Cleanse & tone
1. Patch test
2. Warm compress
Apply mask
Final massage

Typographic <ul>/<ol> with native markers. variant unordered/ordered; density comfortable/compact tunes row gap only. ListItem asChild lets a link own its accent.

Structured Listcondensed · flush · selectable

Label / value · semantic table

SettingValue

Regionus-east-1

PlanStudio · annual

Members12 seats

Selectable · radiogroup

North studioOpen · 9–6

Harbor studioOpen · 10–7

Annex roomBy appt.

Borderless label/value rows, hairline separators, no outer box (flush). condensed trims padding; selectable makes a radiogroup. Selected row = glyph fill + accent tint + 2px accent-strong edge bar.

Code Snippettype · size · copy

Inline + single

Run npm install @tarva/ui to start.

npm install @tarva/ui @tarva/ui-tokens

Multi · expanded · copied

import { Button } from '@tarva/ui'
export const App = () =>

type inline/single/multi, size sm/default. The copy button swaps Copy→Check (shape, not color alone); multi adds a Show more / Show less toggle that clamps to ~4 rows.

Skeletonshape · lines · size

Content-shaped shimmer placeholder. shape text/circle/rect/pill, lines stacks text rows, size sm/md/lg sizes the circle. Skeleton.Group wraps an aria-busy region; pulse honors reduced-motion.

Avatar Stackmax · size · stackOrder

md · max 4 · +N overflow

AL JM KP RT +3

sm · stackOrder end

+2 RT KP JM

Overlapping Avatars with a +N overflow tile past max. size xs–xl sizes the whole row; stackOrder start/end picks which face sits in front. Overflow tile uses neutral ink, never accent.

Carouselorientation · prev / next

Hydrafacial

Deep-clean & resurface · 50 min

Gua sha

Lift & sculpt ritual · 35 min

Lymph

Drainage · 40 min

Embla-backed slider. orientation horizontal/vertical; CarouselContent / CarouselItem hold the track. CarouselPrevious / CarouselNext are outline · icon Buttons — disabled (dimmed) at each end.

Rotate your phone for a larger view. Tap the slide to open it full size and zoom.

8.5 × 11 · Portrait