Solid surface
Project information
Readable text, a restrained shadow and consistent internal spacing. Media keeps its own natural proportions.
01 / Actions
The same action, everywhere.
44px targets. Softly squared 10px corners. A single 18px icon scale. Use Tab to inspect the focus treatment.
Labelled actions
Try a control. Its state appears here.
Icon actions
Preview is paused.
Icons name their action for assistive technology. Disabled controls stay visible; selected controls retain the same size.
02 / Controls
State you can see and change.
Labels stay next to their controls. Related choices form one group; independent actions stay separate.
Choose a view
Arrival view selected.
03 / Typography
A small, readable type scale.
Project title
Rift House
Section title
Model, section and assembly
Body / 16px
A crescent of timber and metal opens toward the landscape. Images establish the atmosphere; the model explains the geometry.
Label / 14px
Explore the courtyard
Caption / 12px
Rift House / Concept study / Iceland
04 / Surfaces
White, with room to breathe.
Elevation follows the original composer shadow. Controls use 10px corners; image cards use 16px; larger content surfaces use 24px.
Frosted surface
Controls above a scene
A translucent white layer holds the same controls above imagery. Focus, hover and selected states remain consistent.
05 / Project strip
One project. One horizontal strip.
The same row at every screen size. Swipe, scroll or use the arrows to reach each view. Portrait and landscape images retain their proportions.
06 / Foundations
One source for each decision.
Canvas
#FAFAFASurface
#FFFFFFInk
#242622Focus
#466051| Role | Value | Use |
|---|---|---|
| Control | 44px / 10px radius | Buttons, icons, choices |
| Icon | 18px / 1.75 stroke | Lucide actions |
| Card / surface | 16px / 24px radius | Media / content |
| Spacing | 4, 8, 12, 16, 24, 32, 48, 64px | One shared rhythm |
| Focus | 2px / 4px offset | Keyboard interaction |