Wondays · component kit v2 · dark is the default

The parts bin

One stylesheet is the source of truth — this catalogue and the app both link kit.css, so changing a component here changes it everywhere. The rule: if you cannot name the real object a component comes from, it does not belong in the kit.

The dark law

Dark is not a colour swap. Three things invert, and if they don't, the panel looks like a screenshot with the brightness pulled down.
What proves height

On light, a raised part is proved by the shadow under it. On dark the ground is already dark, so a shadow proves nothing — height comes from a 1px light rim on the top edge. Every raised part in the kit has one.

Which way text is cut

Legends are embossed on light (white shadow below) and engraved on dark (black shadow below). One token, --emboss, flips it everywhere.

Whether accents glow

On light they never do. On dark, amber and sun carry bloom — that is the only reason the panel reads at a glance instead of turning into grey soup.

What stays bright

The record. The machine is dark metal; what it prints is paper. K-23 keeps its cream stock in both skins and is lit from inside the case — which is also the answer to the editorial-vs-realism tension we've been carrying.

The whole machine · both skins live · the record →
WONDAYS ハビット
NO.01 · DAY RECORDER
days
scope
Palette · six working colours + fixings

bone · body

ink · housing

amber · act

sun · reward

grass · done

paper · record

teal · rare

steel · fixings

Hues never change between skins — only the ground under them and how hard they glow. That is what keeps it one brand in two finishes rather than two products.

Press anything on the unit. The flap ratchets, the bell rings on mark today, the lamps fill. Flip the switch bottom-right to see the same components in bone.

Where to find this language

The honest answer is that UI galleries are the wrong place to look — we are copying objects, not screens. Both lists matter, in this order.
Objects — the real source

teenage.engineering · their product pages are the reference for playful hardware, and the K.O. II is the direct ancestor of this dark skin. Braun / Dieter Rams archive — the ET66 calculator gave us the plate and keys. Sony Design archive · decades of catalogued products. Solari di Udine split-flap boards. Museum collections: MoMA, Design Museum, Vitra.

Shipped app screens

Mobbin — the largest library of real, shipped mobile UI and flows; the standard reference for how products actually solve a screen. Refero (what we already have wired in) for styles, screens and flows. Page Flows for journeys.

Curated visual discovery

Cosmos — a discovery engine built for designers; cleaner than Pinterest and far better signal. Are.na for channels other people have already curated on skeuomorphism and industrial design. Savee for image-led boards.

Skeuomorphic UI specifically

There is no single canonical gallery. Dribbble /tags/skeuomorphism and Behance are where the current work lives — treat both as raw ore, not finished references; most of it is renders that could never ship.

Craft, in code

Codrops for interaction technique. Josh Comeau on realistic shadow palettes and CSS 3D. Rive and Spline if we ever want motion or 3D beyond what CSS can carry.

Type & identity

Typewolf and Fonts In Use for pairings in the wild. Brand New for identity work.