Work / Plate 02 of 06
Pebble
A tax-set-aside app should feel like handling a smooth stone, not filing a form, so every surface is soft, heavy and pressable.
- Year
- 2026
- Status
- Concept
- Brief
- Landing page for a fictional freelancer money app
- Medium
- Static HTML, CSS, vanilla JS
- Mobile speed
- Lighthouse 99, 260 KB
- Shown at
- hc-pebble-v2.pages.dev
- Palette
#F6EFE4#2A1B14#C9BFFF
Open the live preview Preview, noindex. A concept for a fictional product: no app, no waitlist, no data collected.
Plate 02. Pebble, first screen at 1440 pixelsWall painted in the work's own #F6EFE4
What was built
Art direction and sign-off: Angel. Concept, copy, build, imagery and QA: AI-agent pipeline, reviewed page by page.
A tactile consumer direction: flat saturated colour blocks, a soft variable serif and one signature moment, where marking an invoice paid sends a clay pebble into the tax jar.
- Single landing page, static HTML/CSS/JS, no framework
- Phone mock-up of the product drawn in code, with an autoplaying demo
- Clay-style renders generated with Codex image generation, then colour-matched to each flat block by a processing script
- Jar-maths calculator, nudge and toggle micro-interactions
- Demo form that is deliberately non-submitting
Stack Static HTML, CSS, vanilla JS, self-hosted fonts, Cloudflare Pages
Decisions, with the reasons.
Type
A variable serif with its softness turned all the way up
Display is Fraunces, a variable serif with SOFT and WONK axes. Headlines run SOFT 100 so the terminals read as rounded, tracked at -0.02em and set at line-height 1.14 (it was 1.04 until a descender collision between two heading lines was found in review). Body is Figtree. Both are self-hosted woff2 subsets, so there is no third-party font request.
Rejecteda geometric sans. It is what every fintech page already uses and gave the concept nothing to be remembered by.
Get paid. We'll set the tax aside.
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &?!
Fraunces 800, SOFT 100 / Figtree 400-700. Rendered live with the project's own self-hosted font files.
Colour
Four saturated blocks on cream, never gradients
Colour is applied as flat blocks of coral, butter, sage and lilac on a warm cream, with a dark brown ink instead of black. Each of the three habits owns one block, so colour carries meaning instead of decoration.
Rejectedscalloped section edges (as seen on one reference). They fought with the already round card radii.
- cream
#F6EFE4 - paper
#FFFBF4 - coral
#FF7A59 - butter
#FFD85C - sage
#A9D5B5 - lilac
#C9BFFF - ink
#2A1B14
Interaction
Signature interaction: mark paid, watch the pebble drop
In the phone demo, marking an invoice paid animates a clay pebble into the tax jar, updates the ring and the running total, and plays once on load. The jar-maths slider below lets a visitor move an invoice amount and watch the set-aside change. Illustrative arithmetic only, labelled as such on the page.
How it was started Seven reference sites were measured first (computed type scale, spacing, radius, motion timing) and the numbers drove the build: giant tight display type at line-height 0.85-0.9 on the references, 44-72px pill buttons, radius 24 and up, 0.15-0.35s eased transitions, 96-128px section padding.
Figures, captured live.
Screenshots I took from the running preview at 1440 and 390 pixels wide. They are not mock-ups.
Measured, not claimed.
- Largest contentful paint
- 2.3 s
- Layout shift
- 0
- Blocking time
- 0 ms
- Page weight
- 260 KB
- Fonts
- fraunces-latin-full-normal.woff2 119 KB
figtree-latin-wght-normal.woff2 20 KB
Lighthouse 12.8.2, simulated mobile, one run against hc-pebble-v2.pages.dev/ on 2026-10-02. Lab data, not field data. SEO 66: the failing audit is is-crawlable, because this preview is deliberately served noindex. Re-run before quoting these elsewhere.
Honest limits.
- The clay renders are AI-generated, four images in all, and were recoloured to sit on flat blocks. Hand-modelled 3D would be richer.
- Heading line-height was raised to 1.14 after a descender collision; it was checked at 1440, 390 and 360 pixels.
- A concept: no real product, so no conversion data exists.
Next plate
DraughtwellLaunch page for a fictional agent runtime
Want a redesign demo of your own site?
Free and private. You only pay if you want the full build.
Try the Redesign Lab- RequestYour site and consent
- AuditBy email, straight away
- Private demoAbout five days
- Optional buildOnly on payment
- Case studyOnly with your yes