Design System

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

Colors

The leather site uses one warm editorial palette (--leather-* tokens on [data-leather-site]) for marketing pages, configurator, and design system surfaces, plus shadcn semantic tokens on account and checkout flows.

Color families

Family	Value	Used for
Leather palette	--leather-* on [data-leather-site]	Marketing pages, sample kit, process, contact, configurator, design system, and experiments. Use Tailwind utilities such as text-leather-ink and border-leather-border.
Experiments accent	--leather-clay on [data-leather-experiments]	Manifesto phrase highlight and scroll-driven process timeline progress line on the experiments homepage only.
Shadcn tokens	bg-background, text-foreground, border-border	Configurator, quote flow, account, orders, and any surface that uses shadcn Card, Input, or Button primitives.
Semantic feedback	green-, red-, text-destructive	Savings lines, free shipping, success/error banners, and form validation. Never used for brand decoration.

Leather palette

Ink

#17130f

Primary headings, body text, filled CTAs, timeline markers, and footer link hover targets.

text-leather-ink / bg-leather-ink

Sample text on ink

Ink soft

#2a231d

Softer ink variant reserved for derived mixes and future secondary emphasis.

--leather-ink-soft

Sample text on ink soft

Paper light

#fbf9f6

Default marketing page background, design system shell, mobile preview bar, and CTA label text on ink buttons.

bg-leather-paper-light / text-leather-paper-light

Sample text on paper light

Paper

#f1ebe1

Warm placeholder fills, configurator preview mockups, and the experiments page base background.

bg-leather-paper

Sample text on paper

Paper 2

#e8e0d2

Secondary warm surface for experiments industries grid placeholders and muted image frames.

bg-leather-paper-2

Sample text on paper 2

Stone

#d8cebd

Quote preview canvas placeholder and neutral leather-tone mockup fills in design system demos.

bg-leather-stone

Sample text on stone

Border

#e8e4df

Editorial card borders, list dividers, design system tables, and configurator preview panel frames.

border-leather-border / divide-leather-border

Sample text on border

Muted

#6f6f6f

Supporting copy, section eyebrows, spec labels, and secondary descriptions on editorial surfaces.

text-leather-muted

Sample text on muted

Line

#17130f at 14%

Derived divider token: color-mix(in srgb, var(--leather-ink) 14%, transparent). Used for spec lists and FAQ dividers.

--leather-line

Sample text on line

White

#ffffff

Card and panel surfaces layered on warm paper backgrounds across marketing and configurator preview areas.

bg-white

Sample text on white

Experiments accent

Clay is the only palette token scoped to [data-leather-experiments]. All other leather colors are site-wide.

Clay

#5c3a24

Restrained accent for manifesto phrase highlight and scroll-driven process timeline progress line.

--leather-clay / bg-leather-clay

Sample text on clay

UI tokens (shadcn)

Background

oklch(1 0 0)

Default page and panel background on configurator, account, and checkout flows.

bg-background

Sample text on background

Foreground

oklch(0.145 0 0)

Primary UI text, selected option borders, and icon button labels in app flows.

text-foreground

Sample text on foreground

Card

oklch(1 0 0)

Checkout panels, quantity tier table, account cards, and nested form sections.

bg-card / border-border

Sample text on card

Muted

oklch(0.97 0 0)

Selected tier rows, footer background wash, about page section bands, and drag-drop zones.

bg-muted

Sample text on muted

Muted foreground

oklch(0.556 0 0)

Secondary labels, spec bullets, card descriptions, and helper text in app flows.

text-muted-foreground

Sample text on muted foreground

Border

oklch(0.922 0 0)

Input outlines, card edges, quantity tier dividers, and footer top rule.

border-border / divide-border

Sample text on border

Primary

oklch(0.205 0 0)

Shadcn default button fill on account and checkout when not using editorial ink CTAs.

bg-primary / text-primary-foreground

Sample text on primary

Destructive

oklch(0.577 0.245 27.325)

Required field asterisks, inline form errors, validation alerts, and delete hover states.

text-destructive / border-destructive

Sample text on destructive

Semantic & feedback

Success surface

#f0fdf4

Account feedback banners, quote flow confirmation notices, and default-address badges.

bg-green-50

Sample text on success surface

Success text

#15803d

Savings lines, free shipping callouts, tier discount amounts, and success message copy.

text-green-700 / text-green-800

Sample text on success text

Error surface

#fef2f2

Account and quote error banners when an action fails.

bg-red-50

Sample text on error surface

Error text

#991b1b

Error banner copy paired with bg-red-50 surfaces.

text-red-800

Sample text on error text

Success card

#f0fdf4 + #bbf7d0

Inline recommendation callouts in configurator help modals.

border-green-200 bg-green-50 text-green-800

Sample text on success card

Special surfaces

Closing band

#0a0a0a

Homepage closing CTA section with inverted white buttons on a near-black band.

bg-neutral-950 text-white

Sample text on closing band

Preview chrome

#f5f5f5

Configurator canvas preview frame and mail-sample placeholder backgrounds.

bg-neutral-100 / bg-neutral-200

Sample text on preview chrome

Feature placeholder

neutral gradient

Homepage capability tiles before photography is loaded.

from-neutral-200 to-neutral-300

Sample text on feature placeholder

Opacity variants

Name	Token	Used for
Faded ink	text-leather-ink/30	Editorial index numerals in sample kit and value prop lists.
Hover border	hover:border-leather-ink/25	Experiments capability cards and editorial interactive tiles on hover.
Soft border	border-leather-ink/20	Secondary editorial buttons and experiments timeline step rings.
Dashed connector	border-leather-ink/15	Process timeline dashed vertical connectors on about and experiments pages.
Tinted hover	hover:bg-leather-ink/5	Secondary editorial button hover fill.
Frosted bar	bg-leather-paper-light/95 backdrop-blur	Mobile configurator preview bar with translucent warm paper overlay.

Faded ink

Hover border

Soft border

Dashed connector

Connector

Tinted hover

Tinted hover fill

Frosted bar

Frosted overlay

Colors on the site

Surface	Route	Colors used
Homepage hero & sections	/	Paper light, Ink, Muted, Line, White
Homepage closing band	/	Neutral 950, White, Neutral 400
Experiments page shell	/experiments	leather-paper, leather-ink, leather-muted, leather-clay
Configurator	/configurator	Paper light, Ink, Line, White, UI tokens
Quote & checkout	/quote	UI tokens, Green 700, Destructive
Sample kit	/samples	Paper light, Ink, Muted, Line
Account & orders	/account	UI tokens, Green 50/700, Red 50/800
Global footer	global	Muted foreground, Border, Muted background
Design system reference	/design-system	Paper light, Ink, Muted, Line, White