Patterns

Composed solutions

Primitives assembled into the recurring shapes of a product: panel tiers, the non-happy states, and the content patterns that carry them.

Panel tiers · earn the edge

Scale the treatment to how much the box matters. Most boxes are Tier 3.

.panel-spotlight
1 · SpotlightThe single feature/proof box that anchors a section. Max two side-by-side; never stacked.
.panel-frame
2b · BorderedStructural frames — code blocks, browser/app mockups, the live-demo window.
.panel-card
2 · CardA defined card, lit at the crown. The gradient-ring edge off the white ramp.
.panel-seamless
3 · SeamlessThe default. The bulk of content surfaces — depth from shadow, no border.
Empty, loading & error

Never ship a bare div. Each non-happy state is designed.

emptyNo case studies yet. Add your first to see it here.
loading
errorWe couldn’t reach the CRM. Check the API key, or retry.
Microcopy
don’tSubmit
doBook a call
Buttons name the action, not the mechanism.
don’tError: something went wrong.
doWe couldn’t reach the CRM. Retry, or check the API key.
Errors say what failed and what to do next.
don’tNo data.
doNo case studies yet. Add your first to see it here.
Empty states point to the next step.
Localisation · /in ↔ /ae

Currency, numbering, and phone formats are locale-aware. Dates stay day-month-year across both.

fielden-INen-AE
CurrencyRs. 1,50,000 / monthAED 6,500 / month
NumberingIndian (lakh, crore)Western grouping
Date14 March 202614 March 2026
Phone+91 98XXX XXXXX+971 5X XXX XXXX
Locale tagen-INen-AE