01 · Identity
The pixel-slab Face is the house mark; each live app carries its own glyph, icon, and banner in its own accent.
Face
App glyphs
App icons
'%3e%3crect%20x='98'%20y='70'%20width='40'%20height='40'%20transform='rotate(-1.2%20118%2090)'%3e%3c/rect%3e%3crect%20x='136'%20y='50'%20width='40'%20height='40'%20transform='rotate(1.4%20156%2070)'%3e%3c/rect%3e%3crect%20x='174'%20y='70'%20width='40'%20height='40'%20transform='rotate(-0.8%20194%2090)'%3e%3c/rect%3e%3crect%20x='298'%20y='70'%20width='40'%20height='40'%20transform='rotate(-0.8%20318%2090)'%3e%3c/rect%3e%3crect%20x='336'%20y='50'%20width='40'%20height='40'%20transform='rotate(1.0%20356%2070)'%3e%3c/rect%3e%3crect%20x='374'%20y='70'%20width='40'%20height='40'%20transform='rotate(-0.4%20394%2090)'%3e%3c/rect%3e%3cpath%20d='M%2098%20152%20Q%20256%20148%20414%20152%20L%20414%20178%20Q%20256%20174%2098%20178%20Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e)
dreem'%3e%3c/path%3e%3cpath%20d='M%20112%20240%20C%20133%20138%20219%20138%20240%20240%20C%20261%20342%20347%20342%20368%20240'%20fill='none'%20stroke='%2306150d'%20stroke-width='40'%3e%3c/path%3e%3c/svg%3e)
pitch'/%3e%3crect%20x='88'%20y='262'%20width='304'%20height='10'%20transform='rotate(-0.3%20240%20267)'/%3e%3crect%20x='88'%20y='206'%20width='304'%20height='10'%20transform='rotate(-0.3%20240%20211)'/%3e%3crect%20x='88'%20y='150'%20width='304'%20height='10'%20transform='rotate(-0.3%20240%20155)'/%3e%3c/g%3e%3cg%20fill='%23121110'%3e%3ccircle%20cx='144'%20cy='328'%20r='24'/%3e%3ccircle%20cx='192'%20cy='272'%20r='24'/%3e%3ccircle%20cx='240'%20cy='216'%20r='24'/%3e%3ccircle%20cx='288'%20cy='160'%20r='24'/%3e%3ccircle%20cx='336'%20cy='216'%20r='24'/%3e%3c/g%3e%3c/svg%3e)
scales
grooveFavicons
%20--%3e%3cstyle%3e%20.face%20{%20fill:%20%23EDEDEA;%20}%20@media%20(prefers-color-scheme:%20light)%20{%20.face%20{%20fill:%20%231A1814;%20}%20}%20%3c/style%3e%3cg%20class='face'%20transform='translate(240%20240)%20scale(1.51899)%20translate(-256%20-240)'%3e%3cg%20transform='translate(0%20126)'%3e%3crect%20x='98'%20y='70'%20width='40'%20height='40'%20transform='rotate(-1.2%20118%2090)'/%3e%3crect%20x='136'%20y='50'%20width='40'%20height='40'%20transform='rotate(1.4%20156%2070)'/%3e%3crect%20x='174'%20y='70'%20width='40'%20height='40'%20transform='rotate(-0.8%20194%2090)'/%3e%3crect%20x='298'%20y='70'%20width='40'%20height='40'%20transform='rotate(-0.8%20318%2090)'/%3e%3crect%20x='336'%20y='50'%20width='40'%20height='40'%20transform='rotate(1.0%20356%2070)'/%3e%3crect%20x='374'%20y='70'%20width='40'%20height='40'%20transform='rotate(-0.4%20394%2090)'/%3e%3cpath%20d='M%2098%20152%20Q%20256%20148%20414%20152%20L%20414%20178%20Q%20256%20174%2098%20178%20Z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
dreem%20scale(1.51899)%20translate(-256%20-240)'%3e%3cg%20transform='translate(0%20126)'%3e%3crect%20x='98'%20y='70'%20width='40'%20height='40'%20transform='rotate(-1.2%20118%2090)'/%3e%3crect%20x='136'%20y='50'%20width='40'%20height='40'%20transform='rotate(1.4%20156%2070)'/%3e%3crect%20x='174'%20y='70'%20width='40'%20height='40'%20transform='rotate(-0.8%20194%2090)'/%3e%3crect%20x='298'%20y='70'%20width='40'%20height='40'%20transform='rotate(-0.8%20318%2090)'/%3e%3crect%20x='336'%20y='50'%20width='40'%20height='40'%20transform='rotate(1.0%20356%2070)'/%3e%3crect%20x='374'%20y='70'%20width='40'%20height='40'%20transform='rotate(-0.4%20394%2090)'/%3e%3cpath%20d='M%2098%20152%20Q%20256%20148%20414%20152%20L%20414%20178%20Q%20256%20174%2098%20178%20Z'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
dev%20+%20stroke%20(40)%20fills%20480%20—%20avoids%20edge%20clip%20--%3e%3cg%20transform='translate(240%20240)%20scale(1.62162)%20translate(-240%20-240)'%3e%3cpath%20d='M%20112%20240%20C%20133%20138%20219%20138%20240%20240%20C%20261%20342%20347%20342%20368%20240'%20fill='none'%20stroke='%231FB85A'%20stroke-width='40'%20/%3e%3c/g%3e%3c/svg%3e)
pitch
scales%20--%3e%3cg%20fill='%23FF5A2C'%3e%3crect%20x='0'%20y='0'%20width='144'%20height='144'%20rx='20'/%3e%3crect%20x='168'%20y='0'%20width='144'%20height='144'%20rx='20'/%3e%3crect%20x='336'%20y='0'%20width='144'%20height='144'%20rx='20'/%3e%3crect%20x='0'%20y='168'%20width='144'%20height='144'%20rx='20'%20fill-opacity='0.28'/%3e%3crect%20x='168'%20y='168'%20width='144'%20height='144'%20rx='20'%20fill-opacity='0.28'/%3e%3crect%20x='336'%20y='168'%20width='144'%20height='144'%20rx='20'/%3e%3crect%20x='0'%20y='336'%20width='144'%20height='144'%20rx='20'/%3e%3crect%20x='168'%20y='336'%20width='144'%20height='144'%20rx='20'%20fill-opacity='0.28'/%3e%3crect%20x='336'%20y='336'%20width='144'%20height='144'%20rx='20'%20fill-opacity='0.28'/%3e%3c/g%3e%3c/svg%3e)
grooveBanners
02 · Tokens
Every surface reads the same CSS variables — one set of names, six accents, both themes.
Colors
App accents
Backgrounds
spring-damped accent glow that slowly chases the cursor — exported as DreemBackground, mounted behind every app (not this page — it stays plain); `contained` scopes it to a box and tracks the cursor within it
Typography
Radii
Sizing
Sizes are curves, not steps. scaleAt(w, a, b, c) pins a value at three calibration widths — 375 / 900 / 2200 — and interpolates linearly between them, so the UI scales continuously instead of snapping at breakpoints. The hero letter goes further: useTitleFit measures the real title box and fits the letter's ink to it.
03 · Controls
The form primitives every app shares — field-toned, hairline-bordered, accent-lit when active.
Dropdown
Button Group
Stepper
Interactive Stepper
Slider
Toggle
PlayBtn
Button
Glass caps
The rule that keeps these consistent: the face is FLAT. Depth is one hairline pair — a thin shadow on the top inner edge, a thin light on the bottom — and nothing more. Give that top shadow blur and the resting button reads as being held DOWN; real travel belongs to :active / .is-down, which sinks the cap and lights the accent bloom. Separation from a surface is an OUTER hairline, never an inset dark ring: inset reads as a bevel, which is the same trick that makes something look recessed.
Icon buttons
Button Toggle
Text field
Text area
Field · settings
04 · Motion
Collapses animate to natural size with the grid 0fr↔1fr trick — no measuring, no jank.
HCollapse
VCollapse
05 · Overlay
ModalShell — a glass dialog on desktop, a drag-to-dismiss bottom sheet under 640px.
ModalShell
Dialog
448px, centered, ✕ in the header — desktop and wide windows
Drawer
full-width, drag handle above the header, no ✕ — phones under 640px
07 · Chrome
Transient UI that floats above the page — toasts, not nav.
Toast
08 · Surfaces
dreem.ing studio-site patterns — cards, spec lists, site CTAs, and the app preview frame. Separate register from app bg-tile demos above.
Vertical card
Horizontal card
Every board above.Shared bezels, shared feet, one hardware kit — configured for the 40s, the 60s, the pads. MODULAR SYSTEM
App card
pitchLIVEAn ear-training game. Ten rounds, one note at a time, identify it by sound alone.pitch.dreem.ing Numbered list
- 0110 ROUNDS PER SESSION
- 02TRACKED STATS · LOCAL ONLY
- 03HONEST SCORES — PERFECT EAR TO EARLY DAYS
Site buttons
Separate from app Button / IconButton — site uses rounded-[4px], leading-arrow solid CTAs, and outline store chips.
Links
Hover → cyan on the live site
Browser frame
Which note is this?
01 / 10 · playing