Dayshaper

Design system

A day you can hold. The sky follows the real sun; a single orb holds the time and takes on the material of whatever you are doing; around it, the day is a ring you can press and push like clay. This page is built from the same files the app uses — styles/tokens.css, src/sky.js, src/types.js, src/icons.js — so it cannot drift.

How the aesthetic works

Read from the mood board, then made into rules. The first version read the board as a list of parts (orbs, gradients, clouds) and put them all on one screen. The board is really about restraint.

One screen, one momentThe whole screen is a single atmosphere for this minute — never a map of day and night side by side.
The orb is the heroA large soft sphere holds the time in the thinnest type on screen. Everything else steps back.
The orb becomes what you doPorcelain when you're free, a glowing sun at golden hour, night glass after dark — and the clay of the block you're in, gently breathing.
Plain, specific words"Focus · Until 12:30 PM." "Time to wind down." "Dawn is 2h 15m away." The day you shaped speaks back to you.
Light, not greySkies blend in OKLab, so dusk passes through violet and rose instead of mud. Ink is chosen by contrast, never blended.
Clay you can pushBlocks are soft, rounded, and yield to each other. The day moves as little as possible to make room.
Thin line, no emojiIcons are drawn for the app at 1.5 px on a 24 grid. Emoji render differently everywhere and shout over pastels.
Springs for the hand, slow light for the skyTouch answers in ~200 ms with a little overshoot; the sky crossfades over seconds and is never still.

A day in nine moments

The mood board, live: each frame is the real app, frozen at a time with ?preview&at=HH:MM. The sun is fixed (sunrise 6:06, sunset 6:21) so the frames are repeatable.

Ten moments of sky

Each moment is a whole atmosphere — gradient, ridges, stars, clouds, ink, and the orb's material — anchored to the sun rather than the clock. Offsets shrink on very short days or nights so the order never tangles.

Five clays

A lit face and a shaded face for the ring, and a matching material the orb takes on while you're inside the block. Light orbs carry deep ink; deep orbs carry pale ink — at least 3:1 either way (tested).

Line icons

One sprite, <use href="#i-name"> everywhere, colour from currentColor.

Type

Inter, variable, with optical sizing. Hierarchy comes from weight and space; the thinnest text on screen is the most important.

Clock · 20007:42
Title · 360 / 24Golden hour
Subtitle · 400 / 14The light is soft and warm.
Reading · 450 / 146:21 PM
Label · 600 / 10, trackedWORK

Primitives

Soft glass pills and circles. Their tone follows the words they carry: dark words ride pale glass, pale words ride deep glass.

Laws

Almost no forms. Every edit is touch on clay (or arrows on a focused block). The one thing you ever type is a block's name.

The day is a ring. Blocks may cross midnight; sleep from 11:30 PM to 7:00 AM is one block.

Blocks never pass through each other on the ring. They push, and spring back when the hand retreats. To reorder, lift one off the ring: in the hand it is a stone again.

Free time is never drawn. It is the dotted track showing through.

Everything can be undone. Every change offers Undo; the history holds sixty steps.

The sky is never static and never a pie chart. It is the one moment you are in.

Text reads on its sky. 3:1 at least, for every moment and every minute between them (tested).

Nothing shouts. No hard shadows, no borders darker than the glass, no bold weights above 650.

Five clays, any names. The palette stays five materials so the screen stays calm; what you call a block is yours.

The sky is the real one. The sun from your latitude, tonight's moon in its true phase, and weather only from where you actually are — never guessed.