Design System

Internal reference for SENTIENT Custom Leather UI patterns, typography, and components.

Typography

The leather site pairs Butler serif display type with Geist Sans for UI and body copy. Editorial pages use the shared --leather-* ink and muted tokens.

Typefaces

Display

Butler

Token: .leather-display-font
Stack: "Butler", Georgia, "Times New Roman", serif

Self-hosted serif for headlines, section titles, price figures, and the mobile menu. Applied via the leather-display-font utility class.

UI & body

Geist Sans

Token: font-sans (default)
Stack: var(--font-geist-sans), ui-sans-serif, system-ui, sans-serif

Default sans-serif for paragraphs, labels, navigation, forms, and buttons across the leather site.

Headings

Hero display

Primary page heroes on homepage, process, configurator, and experiments.

Classes

leather-display-font text-balance text-4xl font-light leading-[0.95] tracking-tight sm:text-5xl md:text-6xl text-leather-ink

Sample

Custom leather, any color.

Page title

Secondary page titles on legal, about, and design system pages.

Classes

leather-display-font text-4xl font-light tracking-tight sm:text-5xl text-leather-ink

Sample

Section heading

Editorial section titles across homepage, process, and sample kit pages.

Classes

leather-display-font text-3xl font-light tracking-tight sm:text-4xl text-leather-ink

Sample

Built for specification.

Section heading (large)

Experiments homepage and industries marquee sections.

Classes

leather-display-font text-3xl font-light tracking-tight sm:text-4xl md:text-5xl text-leather-ink

Sample

Industries we supply.

Subsection heading

Configurator steps, quote flow steps, and account section titles.

Classes

leather-display-font text-2xl font-light tracking-tight md:text-3xl text-leather-ink

Sample

Choose your quantity

Card title

Industry tiles, spec rows, and compact content blocks.

Classes

leather-display-font text-xl font-light tracking-tight sm:text-2xl text-leather-ink

Sample

Hospitality upholstery

Modal heading

Help dialogs, media spotlight modals, and checkout overlays.

Classes

leather-display-font text-3xl font-light tracking-tight sm:text-4xl text-leather-ink

Sample

Need help choosing texture?

Paragraph text

Body

Default paragraph copy on editorial pages and marketing sections.

Classes

text-sm leading-relaxed text-leather-muted sm:text-base

Sample

Specify color, texture, sheen, softness, and thickness. Sample before production.

Body (UI)

Paragraph copy inside configurator, account, checkout, and form flows.

Classes

text-sm leading-relaxed text-muted-foreground sm:text-base

Sample

Review your specification before requesting a quote.

Lead

Intro paragraphs under headings, modal descriptions, and featured section openers.

Classes

text-base leading-relaxed text-leather-muted

Sample

Contract-grade leather programs for high-traffic hospitality interiors.

Fine print

Footnotes, helper text, privacy notices, and secondary disclaimers.

Classes

text-xs leading-relaxed text-leather-muted

Sample

Shipping calculated at checkout. Samples ship within 5 business days.

Supporting text

Eyebrow

Section labels, dialog categories, and kicker text above headings.

Classes

text-xs font-medium uppercase tracking-[0.18em] text-leather-muted

Sample

Configurator

UI label

Form field labels and compact metadata rows.

Classes

text-sm font-medium text-leather-ink

Sample

Email address

Price display

Configurator price preview, sample kit pricing, and tabular totals.

Classes

leather-display-font text-4xl font-light tabular-nums tracking-tight text-leather-ink sm:text-5xl

Sample

$1,248.00

Type colors

Name	Token	Used for
Ink	text-leather-ink / bg-leather-ink	Primary headings, body text, and primary buttons on editorial surfaces.
Muted	text-leather-muted	Supporting copy, eyebrows, and secondary descriptions.
Foreground	text-foreground	Default shadcn foreground on configurator, account, and checkout flows.
Muted foreground	text-muted-foreground	Secondary UI copy where shadcn tokens are used instead of leather palette tokens.