The design system, proved on one page.
Every token, control and motion primitive the site is built from. The contrast figures below are measured from styles/tokens.css when this page is built, so they cannot drift from the values components actually use.
Type scale
Nothing here was made in a hurry.
Nothing here was made in a hurry.
Nothing here was made in a hurry.
Nothing here was made in a hurry.
Nothing here was made in a hurry.
Nothing here was made in a hurry.
Nothing here was made in a hurry.
Curtle
Colour
The brief’s palette
- #0d3b3e — Dark surfaces, footer, nav on scroll
- #14514f — Hovers, borders on dark
- #efe4d0 — The page background. Our "white"
- #e2d3b8 — Decorative dividers, card edges
- #d8af5c — Rules, seals, focus rings. Never small type on sand
- #e07a5f — Sale tags, low stock. Once per screen
- #7fa8a0 — Captions on dark
- #171614 — Body text. Not pure black
- #4a463f — Secondary text
- #f7f1e6 — Raised cards on sand
Added to meet AA
Six additions, each fixing a measured failure rather than expanding the palette. Gold on sand is 1.63:1 — it fails body text and the 3:1 large-text floor alike, so gold type on a light ground needed a darker cut. Gold on --deep-shell was always fine at 5.96:1.
- #7a5518 — Gold as TYPE on light ground
- #a83a1e — Error copy on light ground
- #f09b82 — Error copy on dark ground
- #10464a — Raised cards in dark mode
- #8a7f66 — Interactive borders (WCAG 1.4.11)
- #8fb6ae — Captions on raised dark cards
| Pair | Measured | Required |
|---|---|---|
| Body text on the page | 14.36:1 pass | 4.5:1 |
| Secondary text | 7.45:1 pass | 4.5:1 |
| Gold type on the page | 5.31:1 pass | 4.5:1 |
| Error copy | 5.07:1 pass | 4.5:1 |
| Body text on a card | 16.09:1 pass | 4.5:1 |
| Text on a dark band | 9.74:1 pass | 4.5:1 |
| Captions on a dark band | 4.68:1 pass | 4.5:1 |
| Gold type on a dark band | 5.96:1 pass | 4.5:1 |
| Control borders | 3.14:1 pass | 3:1 |
| Focus ring edge | 14.36:1 pass | 3:1 |
| Pair | Measured | Required |
|---|---|---|
| Body text on the page | 9.74:1 pass | 4.5:1 |
| Secondary text | 5.53:1 pass | 4.5:1 |
| Gold type on the page | 5.96:1 pass | 4.5:1 |
| Error copy | 5.67:1 pass | 4.5:1 |
| Body text on a card | 8.35:1 pass | 4.5:1 |
| Text on a dark band | 14.36:1 pass | 4.5:1 |
| Captions on a dark band | 7.45:1 pass | 4.5:1 |
| Gold type on a dark band | 5.31:1 pass | 4.5:1 |
| Control borders | 4.68:1 pass | 3:1 |
| Focus ring edge | 9.74:1 pass | 3:1 |
The mark
Drawn from the sandakada pahana, the carved moonstone at the entrance of Sri Lankan temples. A turtle shell to a visitor; heritage to anyone who knows the island.
Controls
Buttons say what happens. Tab to any of these — the focus ring is a gold band wrapped in a dark edge, because gold alone is invisible on sand.
That card was declined. Try another, or pay with PayPal.
Optional in Sri Lanka.
Materials & dimensions
Care
Shipping
Motion
Durations 120 / 240 / 400 / 700 / 1200ms, three curves, 60ms stagger capped at eight. Reveals fire once at 15% visibility and never re-run on scroll-up. Turn on Reduce Motion and everything below lands in its final state instantly.
This heading revealed on scroll.
- Shoreline
- Deepwater
- Hatchling
- Numbered