Internal reference for SENTIENT Custom Leather UI patterns, typography, and components.
Editorial pages use hard-coded ink CTAs. Configurator, account, and checkout flows use shadcn Button primitives normalized to 44px height site-wide.
| Rule | Value | Used for |
|---|---|---|
| Touch target height | 44px (2.75rem) | All shadcn Button components inside the leather layout are normalized via [data-leather-site] CSS, regardless of size prop. |
| Border radius | rounded-md (0.375rem) | Shared by editorial CTAs and shadcn buttons. |
| Label size | text-sm font-medium | Default button copy scale across editorial and UI surfaces. |
| Hover | opacity-90 or subtle fill | Primary editorial buttons fade to 90% opacity. Secondary buttons gain a light ink wash. shadcn buttons use variant hover tokens. |
| Disabled | disabled + opacity-50 | Native primary buttons and form submits reduce opacity and ignore pointer events. |
| Focus | focus-visible ring | shadcn buttons use ring-ring/50. Editorial buttons can show a soft ink ring for keyboard focus. |
| Loading | Loader2 + label change | Submit buttons disable during async work, show a spinning icon, and swap copy to a progress label such as Sending... |
Configurator, sample kit, and other editorial marketing CTAs on leather-paper-light surfaces.
Classes
inline-flex items-center justify-center rounded-md bg-leather-ink px-6 py-3 text-sm font-medium text-leather-paper-light transition-opacity hover:opacity-90 disabled:opacity-50States
Default
Hover
Disabled
Focus
Loading
Experiments homepage, process page, inquiry form, and sign-in modal on shadcn surfaces.
Classes
inline-flex items-center justify-center rounded-md bg-foreground px-6 py-3 text-sm font-medium text-background transition-opacity hover:opacity-90 disabled:opacity-50States
Default
Hover
Disabled
Focus
Loading
Modal footers, dismiss actions, and paired secondary CTAs on editorial surfaces.
Classes
inline-flex items-center justify-center rounded-md border border-leather-ink/20 px-6 py-3 text-sm font-medium text-leather-ink transition-colors hover:bg-leather-ink/5States
Default
Hover
Disabled
Focus
Loading
Primary actions in quote, checkout, and account flows.
Classes
Button variant="default"States
Default
Hover
Disabled
Focus
Loading
Back navigation, edit/cancel actions, and secondary actions in forms.
Classes
Button variant="outline"States
Default
Hover
Disabled
Focus
Header account control and low-emphasis icon actions.
Classes
Button variant="ghost" size="icon"States
Default
Hover
Disabled
Focus
Mobile form submits and modal single-action CTAs.
Classes
w-full inline-flex items-center justify-center rounded-md bg-leather-ink px-6 py-3 text-sm font-medium text-leather-paper-light transition-opacity hover:opacity-90 disabled:opacity-50States
Default
Hover
Disabled
Focus
Loading
Icons come from lucide-react. Editorial CTAs usually add a trailing ChevronRight. Icon-only controls use shadcn ghost buttons or native buttons with an explicit aria-label.
| Rule | Value | Used for |
|---|---|---|
| Icon library | lucide-react | All customer-facing leather icons import from lucide-react. |
| Decorative icons | aria-hidden="true" | Trailing chevrons and other visual-only icons are hidden from screen readers because the button label already conveys the action. |
| Icon sizing | h-4 w-4 (16px) | Default icon size inside text buttons. shadcn Button also normalizes nested SVGs to 16px. |
| Trailing spacing | ml-1 on icon | ChevronRight sits after the label with a 4px left margin on editorial CTAs and modal actions. |
| Icon-only buttons | aria-label required | Header account, mobile menu toggle, and modal close buttons must expose an accessible name when no visible text is present. |
Default forward-action treatment on editorial primary CTAs across configurator, samples, homepage, process, and modal actions.
Classes
inline-flex items-center justify-center rounded-md bg-leather-ink px-6 py-3 text-sm font-medium text-leather-paper-light transition-opacity hover:opacity-90ChevronRight className="ml-1 h-4 w-4" aria-hiddenStates
Default
Hover
Disabled
Focus
Loading
Inline icon before label on grouped CTAs such as the header account control and experiments hero button.
Classes
inline-flex items-center justify-center gap-2 rounded-md bg-foreground px-6 py-3 text-sm font-medium text-background transition-opacity hover:opacity-90UserRound className="h-4 w-4" aria-hiddenStates
Default
Hover
Disabled
Focus
Loading
Experiments hero CTA uses a trailing ArrowRight with a subtle hover translate on the icon.
Classes
group inline-flex items-center justify-center gap-2 rounded-md bg-white px-7 py-3.5 text-sm font-medium text-neutral-950 transition-transform hover:-translate-y-0.5ArrowRight className="h-4 w-4 transition-transform duration-300 group-hover:translate-x-0.5" aria-hiddenStates
Default
Hover
Disabled
Focus
Loading
Low-emphasis controls such as the header account icon button and compact toolbar actions.
Classes
Button variant="ghost" size="icon"UserRound className="h-5 w-5" aria-hiddenStates
Default
Hover
Disabled
Focus
Modal dismiss and mobile menu close controls using a native button wrapper.
Classes
inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foregroundX className="h-4 w-4" aria-hiddenStates
Default
Hover
Disabled
Focus
Text buttons that open an external resource, such as the Pantone education dialog link.
Classes
inline-flex items-center gap-1 text-sm font-medium text-foreground underline underline-offset-4 hover:opacity-80ExternalLink className="h-3.5 w-3.5" aria-hiddenStates
Default
Hover
Disabled
Focus
Loading
Homepage feature-tile carousel navigation on bordered editorial surfaces.
Classes
inline-flex h-9 w-9 items-center justify-center rounded-full border bg-background text-foreground transition-colors hover:bg-mutedChevronRight className="h-4 w-4" aria-hiddenStates
Default
Hover
Disabled
Focus
Sample kit gallery navigation layered on top of photography.
Classes
inline-flex h-10 w-10 items-center justify-center rounded-full border border-white/70 bg-black/35 text-white backdrop-blur-sm transition-colors hover:bg-black/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80ChevronRight className="h-5 w-5" aria-hiddenStates
Default
Hover
Disabled
Focus
Header and footer links use distinct treatments from CTA buttons. Desktop header links pair a full-height hover fill with the `.leather-link-underline` hairline defined in globals.css.
Desktop header primary navigation. Full-height rectangle with grey hover/focus fill and animated underline on the label span.
Classes
flex h-full items-center px-4 text-sm font-medium tracking-wide text-foreground/80 transition-colors hover:bg-foreground/5 hover:text-foreground focus-visible:bg-foreground/5 focus-visible:text-foreground focus-visible:outline-nonespan className="leather-link-underline"States
Default
Hover
Active page
Focus
Desktop sign-in and account control with a leading UserRound icon and the same underline label treatment.
Classes
flex h-full items-center gap-1.5 px-4 text-sm font-medium tracking-wide text-foreground/80 transition-colors hover:bg-foreground/5 hover:text-foreground focus-visible:bg-foreground/5 focus-visible:text-foreground focus-visible:outline-nonespan className="leather-link-underline"States
Default
Hover
Active page
Focus
Footer explore links and legal links with a simple color transition on hover.
Classes
text-foreground/80 transition-colors hover:text-foregroundStates
Default
Hover
Active page
Focus
Hamburger and close icon button in the header on viewports below md.
Classes
-ml-2 inline-flex h-10 w-10 items-center justify-center rounded-md text-muted-foreground hover:text-foregroundStates
Default
Hover
Active page
Focus