Patient10x Design System
Brand Style Guide — v1.0
This is the living style guide for the Patient10x Client Hub. It documents every color token, typographic scale, spacing convention, and component pattern used across the platform. Use this as the reference for any new designs, slide decks, or marketing materials that need to match this aesthetic.
All colors use OKLCH color space for perceptual uniformity. Click any swatch to copy the hex value.
Core Brand
Backgrounds & Surfaces
Text
Status & Semantic
Data Visualization
Inter is the primary typeface across all surfaces. Use font-black for hero numbers, font-bold for headings, font-medium for labels, font-normal for body.
Display / Hero
Patient10x
text-5xl font-black tracking-tight — Hero numbers, big stats
Heading 1
Grow Your Practice
text-3xl font-bold — Page titles, section headers
Heading 2
SEO Performance Report
text-xl font-semibold — Card titles, module headers
Heading 3
Organic Traffic Growth
text-base font-bold — Sub-section labels, article titles
Body
Your website is your most important marketing asset. We help healthcare practices attract more patients, build trust, and convert visitors into booked appointments.
text-sm leading-relaxed — Body copy, descriptions
Caption / Meta
Updated March 2026 · 15+ years of healthcare marketing
text-xs text-muted-foreground — Timestamps, footnotes, helper text
Monospace / Code
--primary: oklch(0.55 0.22 255)
font-mono text-primary — Code snippets, token values, IDs
Accent / Highlight
$324,000
text-2xl font-black text-primary — Key metrics, CTAs, emphasis numbers
Consistent spacing creates visual rhythm. Border radius follows a graduated scale.
Border Radius Scale
--radius-sm
Small inputs, tight chips
--radius-md
Buttons, form fields
--radius-lg / --radius
Cards, panels, modals
--radius-xl
Large containers, hero cards
rounded-full
Badges, avatars, pills
Spacing Conventions
Component padding
Card inner padding
Section gap
Between cards in a column
Grid gap
Between grid columns
Icon + label
Inline icon-text pairs
Section margin
Between major sections
Page padding
Outer page container
Signature effects that define the Patient10x aesthetic.
Glass Card
.glass-card
Semi-transparent dark surface with backdrop blur. Used for all primary content cards.
background: oklch(0.16 0.025 240 / 0.85)
backdrop-filter: blur(12px)
border: 1px solid oklch(0.30 0.03 240 / 0.5)
Blue Glow
.blue-glow
Soft primary-colored outer glow. Used on hero elements, featured cards, and CTAs to draw attention.
box-shadow: 0 0 30px primary/15,
0 0 60px primary/08
Dot Grid
.dot-grid
Subtle dot pattern on page backgrounds. Creates depth without distraction. Applied to the body/page wrapper.
radial-gradient dots
28px × 28px grid
opacity: 35%
Skeleton Loading
.skeleton
Shimmer animation for loading states.
Fade In Up
.animate-fade-in-up
Entrance animation for cards and sections. 0.4s ease, 16px upward travel. Stagger with animationDelay inline style.
animation: fadeInUp 0.4s ease forwards
style animationDelay: "0.1s"
All buttons use shadcn/ui Button component. Prefer default (primary) for main CTAs, ghost for secondary actions.
Used for content status, module labels, and categorical tags.
The glass-card is the primary surface. Combine with colored borders and glow for emphasis.
4,821
Organic Sessions
$28,800
Annual Revenue Leak
4.9
Google Rating
Use shadcn Card for structured content with a header and body. Pair with CardHeader, CardTitle, CardContent.
Featured / CTA Card
Use blue-glow + primary border for high-priority cards like CTAs, featured metrics, or key callouts.
All form inputs use shadcn/ui components with the dark theme applied automatically.
Lucide React icons throughout. Use w-4 h-4 for inline, w-5 h-5 for standalone, w-8+ for decorative. Always pair with a semantic color.
Growth
Loss
Rating
Patients
Revenue
Analytics
Trust
Speed
Structural conventions used across the platform.
Two-Column Pitch Layout
Main Content (2/3 width)
Sidebar (1/3 width)
grid-cols-3 — col-span-2 main + col-span-1 sidebar
Stats Strip
15+
Years
50+
Practices
5-Star
Rated
grid-cols-3 — equal-width stat cells
The personality behind the design — how Patient10x communicates.
Brand Personality
Clinical Authority
Data-driven, precise, credible. Never vague or fluffy.
Direct & Confident
No hedging. State the value clearly and boldly.
Premium but Accessible
Sophisticated design, plain language.
Results-Oriented
Always anchor to outcomes: patients, revenue, rankings.
Writing Conventions
No em dashes
Use commas or periods instead of — dashes
Numbers over words
"15+ years" not "over a decade"
Active voice
"We grow practices" not "Practices are grown"
Specific over generic
"$28,800/yr" not "significant revenue"
Sentence case headings
"Organic traffic growth" not "Organic Traffic Growth"
Patient10x Design System · Built for the Patient10x Client Hub · Anthony M. Ezidro II
Share this URL with any designer or AI assistant to replicate this aesthetic.