Design System
Nestworth's token layer and component library. Built on shadcn/ui with a custom token system for real estate data visualization.
Colors
Semantic HSL tokens — all colors adapt to light and dark mode via CSS variables.
Core palette
background
--background
48 24% 96%
foreground
--foreground
240 10% 3.9%
card
--card
0 0% 100%
primary
--primary
240 5.9% 10%
secondary
--secondary
240 4.8% 95.9%
muted
--muted
240 4.8% 95.9%
muted-foreground
--muted-foreground
240 3.8% 46.1%
destructive
--destructive
0 84.2% 60.2%
border
--border
240 5.9% 90%
Chart palette
Green-anchored to align with real estate's growth-positive framing. Warm tones reserved for warnings.
chart-1
Growth / positive
160 84% 39%
chart-2
Secondary series
170 60% 40%
chart-3
Warning / neutral
30 80% 55%
chart-4
Special category
280 65% 60%
chart-5
Accent data
340 75% 55%
Typography
DM Sans for UI text. Roboto Mono for token values and data labels.
Display
text-4xl / bold
Heading
text-2xl / semibold
Subheading
text-lg / medium
Body
text-base / normal
Small
text-sm / normal
Caption
text-xs / semibold / wide
Mono
text-sm / mono
Border Radius
Single root variable --radius: 0.5rem. All variants derive from it.
Motion
Custom keyframes extending Tailwind's animation system. Click any card to replay.
bounce-playful
Micro-interactions, success states
roll-egg
Brand mascot hover effect
egg-loading
Loading screen idle bounce
ripple
Button press feedback
float-slow
Background decoration (20s)
float-slower
Background decoration (25s)
bounce-subtle
Idle attention cues
fade-in-delayed
Staggered content reveal
Icons
Animated icon set built on Motion. Hover to preview each animation.
CountingNumber
Spring-animated number primitive. Counts from 0 to target — triggers on viewport entry or immediately with inView prop.
0
Plain integer
$0
Currency
0.00
Decimal
SensitiveData
Privacy primitives for PostHog session recordings. Mask financial values, addresses, and personal info from replays.
These components add ph-mask for PostHog session recording privacy. Toggle below to simulate what the recorder sees.
SensitiveText
Inline financial values
SensitiveBlock
Entire card regions
SensitiveData
Via data attribute
LoadingScreen
Full-screen loading state. Uses the egg-loading bounce + staggered ripple rings. Pass fullScreen={false} for inline use.
Loading your portfolio…
Input
Rounded-xl, bold font weight — improves legibility of financial values like mortgage amounts.
Badge
Pill-shaped status indicators for property status, tags, and data labels.
Tabs
Animated underline indicator — used on property forms and detail views to switch between data panels.
Drawer — UnitCard
The actual unit cards from the app. Each card opens the real UnitDrawer with all its form fields: name, rent, status, lease dates, sq ft, bed/bath, amenity checkboxes, and notes.
Unit A
Monthly Rent
$1,850
Unit B
Monthly Rent
$2,200
Unit C
Monthly Rent
$1,400
DetailRow
Key-value row with bottom border. Used inside Cards to list property details, expenses, and form summaries.
MetricCard
Primary dashboard data container. Animated counting numbers, tooltip on hover (desktop) or tap (mobile).
Total Equity
+12.4% vs last year
Portfolio Value
3 properties
Monthly Cash Flow
After expenses
Total Debt
Outstanding balance