Internal reference for SENTIENT Custom Leather UI patterns, typography, and components.
Reusable card shells on the leather site: shadcn token cards (bg-card, border-border) for account and checkout flows, and editorial white-surface cards with leather-border dividers on configurator and design system pages. Homepage-only marketing tiles are intentionally excluded.
| Pattern | Value | Used for |
|---|---|---|
| UI card surface | bg-card + border | Account, quote, checkout, and order detail sections inside the app shell. |
| Editorial card surface | bg-white + border-leather-border | Configurator preview panels and design system reference blocks on leather-paper-light backgrounds. |
| Corner radius | rounded-2xl / rounded-3xl | rounded-2xl for content blocks and tables; rounded-3xl for major form sections. |
| Padding scale | p-4 → p-7 | Nested cards use p-4. Section cards scale from p-5 on mobile to p-7 on sm+ breakpoints. |
| Interactive cards | hover + selected states | Path selection cards in checkout change border and background on hover or selection. |
Primary wrapper for account profile, checkout contact/shipping, and sign-in panels.
Classes
rounded-3xl border bg-card p-5 sm:p-7Sample
Used for account and checkout sections with a title, body copy, and form fields.
Order review tables, pay summaries, and order detail blocks.
Classes
overflow-hidden rounded-2xl border bg-cardSample
Custom leather specification
Qty 25 hides · Tier discount applied
Inline address editor and saved shipping address rows inside a section card.
Classes
rounded-2xl border bg-background/60 p-4Sample
Studio shipping address
123 Greenpoint Ave, Brooklyn, NY 11222
Sticky sidebar preview on quote/checkout with canvas render and spec summary.
Classes
rounded-2xl bg-card p-5 ring-1 ring-borderSample
Configurator mobile preview panel and other white cards on warm paper backgrounds.
Classes
border border-leather-border bg-white p-5 sm:p-6Sample
Live preview
Texture · Sheen · Softness
Quote path picker cards for color sample vs production with selected and hover states.
Classes
rounded-2xl border p-5 text-left transition-colors border-border bg-card hover:bg-muted/40 data-[selected=true]:border-foreground data-[selected=true]:bg-mutedSample
Positive confirmation banners such as the signed-in badge during checkout.
Classes
rounded-2xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-800Sample
Compact status pills for account orders, saved projects, default addresses, and tax exemption state.
Classes
Sample
Empty states, help dialog recommendations, and preview disclaimers.
Classes
rounded-2xl border border-dashed border-border bg-muted/30 p-5Sample
Recommendation callout or empty-state guidance goes inside dashed cards.
| Card | Route | Component | Classes |
|---|---|---|---|
| Account section cards | /account | ProfileSection, ShippingAddressesSection, TaxExemptionSection | rounded-3xl border bg-card p-5 sm:p-7 |
| Account access card | /account | LeatherAccountAccessForm | rounded-3xl border bg-card p-5 sm:p-7 |
| Checkout section cards | /quote | PaymentStep | rounded-3xl border bg-card p-5 sm:p-7 |
| Order review card | /quote | BillingStep, PayStep | overflow-hidden rounded-2xl border bg-card |
| Quote preview panel | /quote | QuotePreviewPanel | rounded-2xl bg-card p-5 ring-1 ring-border |
| Path selection cards | /quote | FinalizedStep | rounded-2xl border bg-card p-5 |
| Order detail cards | /orders/:id | LeatherOrderDetailPage | rounded-2xl border bg-card p-6 |
| Configurator preview card | /configurator | LeatherConfigurator | border border-leather-border bg-white p-5 sm:p-6 |
| Quantity tiers table card | /quote | LeatherQuantityTiers | overflow-hidden rounded-2xl border border-border bg-card |
| Help option cards | /configurator | LeatherOptionHelpDialog | rounded-2xl border border-border bg-card |