Direction 01 · Claymorphism
Accounting is dreaded work. This direction makes the tool feel like something you can pick up and press. Extruded forms with real light behaviour, one warm accent, and a putty ground that never goes to white.
The same circle split by a perforation, extruded. The solid half is a raised body, the outline half is a pressed groove, and the perforation is the seam between them. It reads as a physical token with a tear line, which is exactly what a counterfoil is.
Putty carries almost everything. Persimmon is the only bright, and it is rationed to actions. Pine holds the stub. Butter appears once, on the seal. There is no pure white anywhere and no pure black.
Contrast: Ink on Putty 12.9:1. Ink 2 on Putty 5.2:1. White on Persimmon 3.3:1, so persimmon carries button labels at 15px semibold and above only, never body text. Pine on Surface 6.1:1.
Bricolage Grotesque for display. It has a real width axis, so headlines can be compressed to hold a line without squeezing them in CSS, and its slightly irregular curves match the hand-formed feel. Instrument Sans for reading. DM Mono for every number.
A pressed token rather than an ink stamp. It sits proud of the document with a real contact shadow, so it reads as something applied rather than printed.
Rotation fixed at -6 degrees. It lands on the perforation, half on the invoice and half on the stub.
Fields
Buttons
Read the chain
Download PDF
Press states are physical. On active the button sinks into its own shadow rather than changing colour. 160ms, spring easing.
States
One raised body, one dotted tear line, one sunk stub in pine.
| Description | Qty | Rate | Amount |
|---|---|---|---|
| Brand system, phase 2 | 1 | 8,400.00 | 8,400.00 |
| Interface design, 6 surfaces | 6 | 640.00 | 3,840.00 |
| Motion direction | 1 | 1,200.00 | 1,200.00 |
Clay implies mass. Every move obeys weight, and nothing floats without a reason.
The press
Buttons and fields sink into their own inner shadow on active, 160ms, cubic-bezier(.2,.9,.3,1.2). No colour change, only depth.
The drop
The seal falls from 1.3 scale with a short overshoot and one shadow bloom, 240ms. Fires once on verification.
The tear
The stub detaches 8px along the dotted line and settles, 260ms. No fade, no blur.
Risk to manage: claymorphism becomes a costume if every element is puffed. The rule here is that only interactive things are extruded. Text, rules and tables stay flat.