/sleep-card-lab

Sleep Card

Hover any column · tooltip follows cursor · three variants

Live · shipped 2026-05-23

N2SleepCell · @iudofia2026/n2/cards

The full Sleep Card exactly as it renders in the Octa Tauri app, at dashboard width (340px → 7-day window). Hover any of the three top-row stats (Score, Duration, HRV) for an animated sparkline tooltip. Click any chart column to pin that day — top stat row, legend bar, and chart column all rebind; click the same column or anywhere outside the cell to unpin. All numeric values smooth-tween between pinned days. (Below 260px the cell auto-switches to a 3-day window — that's the dashboard's tablet/mobile fallback.)

Sleep

7-day · May 9–15

92

Score

8h 18m

Duration

114

HRV

12:36a8:50a

LightDeepREMAwake

Score band < 80 / < 60 · HRV band z > 1 / |z| ≤ 1 / z < -1 / z < -2 · Tooltip primitives: N2ScoreStat · N2DurationStat · N2HrvStat (all via shared N2HoverStat)

Current

as shipped in octa/desktop

Full data · sleep + HRV + load

FriMay 15·92

LIGHT

3h 47m42%

DEEP

2h 51m31%

REM

1h 40m18%

AWAKE

47m9%

Asleep8h 18m

YESTERDAY

Bike

12.7mi·1h 38m

Climb

4↑7·V4.2·2h 15m

No sleep · load only

TueMay 12

no sleep recorded

YESTERDAY

Bike

5.1mi·28m

Climb

6↑11·V3.4·2h

Lift45m

Back 6 · Bicep 4 · Core 3

Sleep · amber HRV · mixed load

WedMay 13·87

LIGHT

3h 24m43%

DEEP

2h 11m28%

REM

1h 46m23%

AWAKE

29m6%

Asleep7h 21m

YESTERDAY

Hoops

2 games·W1 L1·1h 30m

Stage legend · Deep (above lifetime)

Deep

Tonight2h 51m

7-day avg1h 58m

Lifetime avg1h 37m

vs lifetime+1h 14m

Stage legend · REM (below lifetime)

REM

Tonight25m

7-day avg1h 33m

Lifetime avg1h 17m

vs lifetime−52m

HRV training ring · above each sleep column

Center dot = HRV z-score signal (sole chromatic element, colorblind-safe).
Outer arcs = prior-day training load, brightness-stepped N2 structural palette.

NEUTRAL
no load

GREAT HRV
bike 20mi

AMBER HRV
mixed load

RED HRV
lift only

Arc brightness

Bike

Hoops

Climbing

Lifting

Proposed

Jobs/Ive · Sketch A refined · debate 2026-05-15

Stage label + delta in header · tonight hero 20px · two baselines one dim line, no labels

DEEP

1h 14m

2h 51m

1h 58m · 1h 37m

REM

52m

25m

1h 33m · 1h 17m

LIGHT

24m

3h 47m

4h 11m · 4h 11m

AWAKE

47m

49m · 49m

Full breakdown — stage rows with minutes + %, total footer

Sleep · 7-day · May 8–14

All variants — static preview

Default

FriMay 15·92

LIGHT

3h 47m42%

DEEP

2h 51m31%

REM

1h 40m18%

AWAKE

47m9%

Asleep8h 18m

YESTERDAY

Bike

12.7mi·1h 38m

Climb

4↑7·V4.2·2h 15m

Compact

FriMay 15·92

2h 51mDEEP

1h 40mREM

3h 47mLIGHT

47mAWAKE

9h 5m total

Minimal

FriMay 15

2h 51m

1h 40m

3h 47m

No data

TueMay 12

no sleep recorded

YESTERDAY

Bike

5.1mi·28m

Climb

6↑11·V3.4·2h

Lift45m

Back 6 · Bicep 4 · Core 3

Stage legend tooltips

Hover any label — tonight vs 7-day avg vs lifetime avg

LightDeepREMAwake

Deep

Tonight2h 51m

7-day avg1h 58m

Lifetime avg1h 37m

vs lifetime+1h 14m

REM

Tonight25m

7-day avg1h 33m

Lifetime avg1h 17m

vs lifetime−52m

Explorations

Jobs/Ive · 3 rounds · 7 sketches · May 15 2026

G is the winner. Blue outline marks it.

A — Text only

Prior winner. No visual.

DEEP▲ 1h 14m

2h 51m

1h 58m · 1h 37m

B — Donut side

Rejected: wrong frame, too wide (192px).

DEEP▲ 1h 14m

2h51m

DEEP 33%

LIGHT 50%

REM 20%

AWAKE 7%

1h 58m · 1h 37m

C — Donut centered

Rejected: 64px mass competes with number.

DEEP▲ 1h 14m

2h51m

1h 58m · 1h 37m

D — Invisible bar

Rejected: other stages #1f1f1f — invisible.

DEEP▲ 1h 14m

2h 51m

1h 58m · 1h 37m

E — 4px arch bar

Strong. Gaps add height. Narrowly lost to G.

DEEP▲ 1h 14m

2h 51m

1h 58m · 1h 37m

F — 2px divider

Rejected: ambiguous — divider or chart?

DEEP▲ 1h 14m

2h 51m

1h 58m · 1h 37m

G — WINNER — 3px bar flush

3px, no gaps, zero imports. Answers AWAKE edge case.

DEEP

1h 14m

2h 51m

1h 58m · 1h 37m