PropertyFlow — Design System v1.0

✦ Foundations

Color Tokens

Violet-Indigo como acento principal. Diferenciado del teal (#00C9A7) de otros proyectos Flow. Mismo rigor de contraste WCAG AA, nueva identidad visual para el nicho real estate.

Accent Palette

#7C6EF5

Accent Dark

--accent

#9587F8

Accent Hover Dark

--accent-hover

#6352E8

Accent Light

--accent (light)

#5244D4

Accent Hover Light

--accent-hover

rgba dim

Accent Dim

--accent-dim

Semantic Colors

#22D06A

Success

--success

#F5A623

Warning

--warning

#FF5C6A

Danger

--danger

#4D9EFF

Info

--info

Background Scale (Dark)

#0D0F1A

Base

--bg-base

#131625

Surface

--bg-surface

#1A1E30

Elevated

--bg-elevated

#21263D

Overlay

--bg-overlay

✦ Typography

Type Scale

Syne para headlines y branding. DM Sans para UI. DM Mono para datos y código. Mismo sistema que los otros Flows — coherencia entre proyectos.

Inter 800 · 32px · page-hero

Property Management Dashboard

Inter 700 · 22px · page-title

All Properties

Inter 700 · 17px · card-metric

$12,400 /mo collected

Inter 600 · 14px · body-strong

2847 Blanco Rd, Unit 4 — Tenant: Carlos Reyes

Inter 400 · 13.5px · body

Lease expires March 31, 2026 · Security deposit $1,200 · Last payment Jan 1, 2026

DM Mono 400 · 12.5px · data / code

TXN-2026-00847 · $1,450.00 · 2026-01-01 09:14:32

Inter 500 · 11px uppercase · label

Maintenance Requests

✦ Components

Buttons

Variants

Sizes

✦ Components

Badges & Status

Occupied Vacant Maintenance Pending Review In Progress Archived

PAID LATE PENDING ACTIVE LEASE EXPIRED

✦ Components

Form Elements

Add Property

Property Address

Property Type

Monthly Rent

Notes Optional. Visible only to you.

Search & Filter

Search Tenants

Status Filter

Property Filter

Lease Expiry Show tenants expiring before this date

✦ Components

KPI / Metric Cards

12

Total Properties

9 occupied · 3 vacant

9

Active Tenants

2 leases expiring soon

$12,400

Collected This Month

+$850 vs last month

3

Overdue Payments

$3,200 outstanding

✦ Components

Data Tables

Tenant	Property	Amount	Due Date	Paid Date	Status
Carlos Reyes carlos@email.com	2847 Blanco Rd #4	$1,450.00	Jan 1, 2026	Jan 1, 2026	PAID
Maria Gonzalez maria@email.com	1104 N New Braunfels	$1,200.00	Jan 1, 2026	—	LATE
James Wilson james@email.com	4302 McCullough Ave	$1,750.00	Jan 5, 2026	—	PENDING
Ana Flores ana@email.com	822 Hildebrand Ave	$950.00	Jan 1, 2026	Dec 31, 2025	PAID

✦ Components

Property Cards

Occupied

2847 Blanco Rd, Unit 4

San Antonio, TX 78212

House

3 bed

2 bath

Vacant

1104 N New Braunfels

San Antonio, TX 78208

Apartment

2 bed

1 bath

Maintenance

4302 McCullough Ave

San Antonio, TX 78212

Duplex

4 bed

2 bath

✦ Components

Maintenance Requests

Burst pipe in kitchen — flooding

2847 Blanco Rd Carlos Reyes 2 hours ago

URGENT

HVAC not cooling — thermostat unresponsive

1104 N New Braunfels 1 day ago

HIGH

Replace bathroom light fixture

822 Hildebrand Ave 3 days ago

NORMAL

✦ AI Components

PropertyFlow AI Assistant

Powered by GPT-4.1 mini. Cinco módulos AI integrados: Lease Analyzer, Maintenance Triage, Communication Drafts, Rent Insights, Portfolio Summary.

PropertyFlow AI

Updated just now

3 overdue payments totaling $3,200

Maria Gonzalez (31 days), Robert Kim (18 days), Sarah Chen (5 days). Recommend sending formal notices to first two tenants.

Draft notice emails →

2 leases expiring in 45 days

2847 Blanco Rd (Mar 31) and 822 Hildebrand Ave (Apr 15). Now is the optimal time to send renewal offers — 60-day window.

Generate renewal letters →

Rent opportunity: 1104 N New Braunfels

Your vacant unit is priced at $1,200/mo. Market average for 2BR in 78208 is $1,340. Relisting at $1,280 is competitive and captures $80/mo more.

Update listing price →

Portfolio health: Strong

75% occupancy rate, $12,400 collected this month, 0 open urgent maintenance after today's pipe repair. Net margin tracking at 68%.

✦ Navigation

Sidebar Navigation

12

Properties

9

Tenants

$12.4k

This Month

3

Overdue

AI Insights

⚠️ 3 late payments · 2 leases expiring soon · Vacant unit priced below market

✦ Dual Theme

Dark vs Light

Mismo sistema de tokens semánticos, dos contextos. El toggle guarda preferencia en localStorage. Acento Violet-Indigo funciona en ambos modos con pleno contraste.

🌙 Dark Mode

$12.4k

Collected

75%

Occupancy

3

Overdue

☀️ Light Mode

$12.4k

Collected

75%

Occupancy

3

Overdue

✦ Implementation

CSS Tokens & Next.js Setup

globals.css — PropertyFlow Tokens

/* globals.css — PropertyFlow Design System v1.0 */ /* Accent: Violet-Indigo — diferenciado de teal (otros flows) */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&family=Inter:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap'); :root, [data-theme="dark"] { --bg-base: #0D0F1A; --bg-surface: #131625; --bg-elevated: #1A1E30; --bg-overlay: #21263D; --accent: #7C6EF5; --accent-hover: #9587F8; --accent-dim: rgba(124,110,245,0.12); --accent-glow: rgba(124,110,245,0.22); --text-primary: #EDF0F7; --text-secondary: #8B95A8; --text-muted: #4A5368; --success: #22D06A; --warning: #F5A623; --danger: #FF5C6A; --info: #4D9EFF; } [data-theme="light"] { --bg-base: #F4F5FA; --bg-surface: #FFFFFF; --bg-elevated: #EEEEF6; --bg-overlay: #E5E5F0; --accent: #6352E8; --accent-hover: #5244D4; --accent-dim: rgba(99,82,232,0.09); --accent-glow: rgba(99,82,232,0.18); --text-primary: #111827; --text-secondary: #4B5563; --text-muted: #9CA3AF; --success: #16A34A; --warning: #D97706; --danger: #DC2626; --info: #2563EB; }

hooks/useTheme.ts

import { useState, useEffect } from 'react' export function useTheme() { const [theme, setTheme] = useState<'dark' | 'light'>('dark') useEffect(() => { const saved = localStorage.getItem('pf-theme') as 'dark' | 'light' const preferred = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light' const initial = saved || preferred setTheme(initial) document.documentElement.setAttribute('data-theme', initial) }, []) const toggle = () => { const next = theme === 'dark' ? 'light' : 'dark' setTheme(next) document.documentElement.setAttribute('data-theme', next) localStorage.setItem('pf-theme', next) } return { theme, toggle } }