Xentto Design System

Reference for colors, typography, and components during development.

Color palette

All UI uses these Tailwind tokens (no hardcoded hex in components). Icons and accents use primary (gold); outline buttons use secondary (graphite) for visibility.

Primary Accent

primary · #FFCD40

Vibrant Gold – buttons, key CTAs

Primary Foreground

primary-foreground · #B8860B

Darker gold – text on light backgrounds (readable)

On Primary

on-primary · #2F2F2F

Text on primary (buttons)

Primary Neutral

secondary · #2F2F2F

Almost Black Graphite – headings, body text

Mid-Tone Gray

accent · #7D7D7D

Medium gray – text/details, icons

Accent Light

accent-light · #FFF8E6

Light gold tint – highlight surfaces

Light Neutral

background · #F5F5F5

Off-White – main background

Background Alt

background-alt · #EBEBEB

Alternating sections

Dark Neutral

dark · #3d3d3d

Charcoal – footer, dark sections, icon/value backgrounds

On Dark

on-dark · #ffffff

Text on dark (footer, modals)

Typography

Font stack: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif

Heading 1

Your Business Just Got a New Voice Team

text-4xl font-bold text-secondary

Heading 2

Is Your Team Drowning in Calls?

text-3xl font-bold text-secondary

Heading 3

Tell us your story

text-xl font-semibold text-secondary

Body large

Xentto's AI voice agents handle customer conversations.

text-lg text-secondary/80

Body

Reduce call center costs by 40% while improving satisfaction.

text-base text-secondary/80

Small

Starts at less than one full-time employee.

text-sm text-secondary/80

Buttons

Primary: gold fill. Outline (e.g. Try Free Trial): primary neutral (graphite) border and text. Use btn-3d for lift + shadow on hover/active.

3D depth

Layered shadows and hover lift for cards and surfaces. Tokens: shadow-depth-sm, shadow-depth-md, shadow-depth-lg, shadow-depth-xl, shadow-depth-2xl, shadow-float. Cards: card-3d (resting depth + hover lift).

depth-sm

depth-md

card-3d (hover)

Surfaces

Card on background

border-secondary/10, bg-background

Card on alt

bg-background-alt/50

Highlight (Guarantee)

border-accent (mid gray), bg-accent-light (gold tint)

Dark (Footer)

bg-dark, text-on-dark

Animations

animate-fade-in

animate-slide-up

Rich options (design-system page only)

3D, animations, and effects for reference. Tell me which you want applied to the app.

3D & perspective

3D tilt (hover)

perspective + rotateX/Y

Isometric

rotateX 8deg

Float 3D

lift + shadow on hover

Animations (hover or loop)

Bounce

Pulse

Spin slow

Float

Shake (hover)

Scale in

Effects

Glassmorphism

blur + semi-transparent

Glow (hover)

box-shadow primary

Gradient border

gold → gray

Soft inner glow

inset shadow

Buttons (rich variants)

Spacing (sections)

Common: px-4 py-16 sm:px-6 sm:py-24 lg:px-8

Gap between cards: gap-8 or gap-4

Max width container: max-w-7xl, max-w-3xl (narrow)

← Back to home