Style Guide
A visual reference for all colors, typography, components, and UI patterns used across the app.
Color System
Brand / Primary
Teal 500
Emerald 500
Emerald 600
Emerald 700
Semantic
Amber 500 (Landlord)
Blue 600 (Action)
Red 500 (Error)
Purple 500 (Special)
Neutrals
Gray 50
Gray 100
Gray 300
Gray 700
Gray 900
CSS Tokens (theme-aware)
background
foreground
muted
primary
Typography
text-5xl / font-extrabold
The Gold Standard.
text-4xl / font-bold
Verified Rental Reviews
text-2xl / font-semibold
Section Heading
text-xl / font-medium
Card Title or Subheading
text-base / normal
Body text used throughout the app. Readable, accessible, and comfortable at standard line height.
text-sm / muted-foreground
Secondary or descriptive text, dates, labels, hints.
text-xs / uppercase / tracking-widest
Section Label / Category
Buttons
Variants
Sizes
Brand Gradients
States
Badges & Status
Verification Badges
Star Ratings
Cards
Standard card used for content sections, dashboards, and panels.
Used for verified rental relationships. Green left border + subtle gradient.
Used for pending verifications and awaiting-action states.
Used for disputes, errors, and actions requiring attention.
Form Elements
Gradients & Backgrounds
RenTrust Style Guide · Generated from live codebase · /style-guide