Live snapshot · as-built

Starwood Community — Design System Preview

A literal surface of the design system as implemented in the monorepo today — tokens from packages/shared/src/tokens.ts, primitives from packages/ui/src/*, and composed screens from the consumer-web, admin, and mobile apps. Classes and values are copied verbatim from source.

Foundations

packages/shared/src/tokens.ts

Color Tokens

primary

#2d72d2

primaryLight

#3f89f0

primaryDark

#1e57a9

primaryTint

rgba(45,114,210,.18)

primaryBorder

rgba(45,114,210,.16)

primaryText

#8fbaff

champagne

#caa76a

champagneLight

rgba(202,167,106,.14)

background

#070b12

surface

rgba(17,24,36,.82)

surfaceStrong

rgba(9,14,22,.86)

surfaceGhost

rgba(255,255,255,.045)

textPrimary

#edf4ff

textSecondary

#acb8cb

textMuted

#6f7c91

textPlaceholder

#758198

border

rgba(255,255,255,.12)

borderLight / divider

rgba(255,255,255,.07)

danger

#ff7e7e

dangerLight

rgba(255,126,126,.12)

dangerText

#ff9d9d

success

#3fd18e

successLight

rgba(63,209,142,.12)

successText

#6de0a8

warning

#f59e0b

warningLight

rgba(245,158,11,.12)

Typography

font-sans — Manrope

3xl · 30px · extrabold

Residents thrive here

2xl · 24px · bold

Section heading

xl · 20px · semibold

Card title

lg · 17px · semibold

Panel heading

base · 15px · regular

Body copy — default paragraph tone.

sm · 13px · regular

Secondary text / metadata

xs · 11px · semibold

Caption · tiny label

font-mono — IBM Plex Mono

Section label · uppercase tracking 0.24em

Input label · tracking 0.12em

Eyebrow · tracking 0.18em

const primary = "#2d72d2";

200 OK — 184ms

Spacing Scale

xs · 4px

sm · 8px

md · 12px

lg · 16px

xl · 20px

xxl · 24px

xxxl · 32px

Border Radius

sm · 10px

md · 14px

lg · 20px

xl · 24px

full · 9999px

Shadows

card

cardHover

elevated

glow

Components

packages/ui/src/*

Button — Button.tsx

Variants · size md

Sizes · primary

States · disabled · loading

Input / Textarea — Input.tsx

Unit — small size

Focus state

Password

Password must be at least 8 characters.

Bio — textarea

Card — Card.tsx + CardHeader/Body/Footer

Base Card

Welcome home

Surface gradient, inner catch-light overlay, 20px corner radius, xl backdrop blur, soft dual shadow.

CardFooterFooter action

Hover state

Lifts on hover

Border tints to primary/20, translates up 2px, shadow deepens to cardHover.

Elevated

Floating modal

Deep shadow reserved for modals, command palette, and overlays.

Badge — Badge.tsx — 9 colors × 2 variants

Soft variant (default)

gold / blue navy green · with dot red gray orange pink purple

Solid variant

gold / blue navy green red gray orange pink purple

CountBadge — champagne · primary

3 12 99+

Avatar — Avatar.tsx + AvatarGroup

Sizes · initials fallback gradient

AvatarGroup — overlapping with 2px dark ring

Toggle — Toggle.tsx

Show me in the resident directory

Neighbors can see your profile and send messages.

Show online status

A green dot on your avatar when active.

Size · sm (40×22)

Size · md (46×26)

StatCard — StatCard.tsx + Sparkline.tsx

Active Residents

248

↑ 6.4% vs last week

Event Revenue

$4,820

↓ 2.1% vs last month

Occupancy

94.2%

Tone tiles · Tooltip · Empty State · Panel Header

Tone tiles — danger · warning · primary · neutral

⚠

3 Urgent Work Orders

Respond now

5 Unassigned

Awaiting assignment

★

2 Events Today

7:00pm · Rooftop social

●

12 Unread

New messages

Recent Announcements

View all →

Hover the icon ? Tooltip content — contextual help shown on hover / focus.

📅

No upcoming events

Check back soon or create the first event for your community.

Reactions · Image Upload

ReactionButton · LikeButton (min-h 44 · min-w 44)

ImageUpload (empty state · drag/drop)

Event cover

Click to upload

or drag and drop

JPEG, PNG, WebP or GIF (max 5MB)

Logo — Logo.tsx — variants: community · admin

Starwood

Community

Starwood

Community

Starwood

Admin

Section Heading · Subtle Button · List Row

Property overview

Content under the section heading sits flush to the 16px bottom margin.

Panel action link

Amelia Moreno

Apt 408 · moved in 2024

→

Pascal Mendes

Apt 103 · primary resident

→

Consumer Web

apps/consumer-web — Next.js 15 · App Router

Auth · Login — AuthShell + form

Starwood

Community

Resident Portal

Welcome back

Need an invite? Contact your property

Home — /home — sidebar + stats + feed preview

Good afternoon, Pascal

Upcoming events

APR

Rooftop Spring Social

📍 Rooftop deck

6:30pm — 9:00pm

42/80 going Going

APR

Yoga in the Lounge

📍 Lounge · 8:00am

12/20 going

Waitlisted

MAY

Movie Night · Barbie

📍 Theater · 7:30pm

30/30 going

Full — Waitlist

Recent announcements

View all →

PM

Property ManagerAnnouncement· 2h ago

Elevator maintenance Thursday

Lobby elevator will be offline 8am–11am. Please plan accordingly.
SK

Sarah KimCommunity· 5h ago

Anyone want to join a Sunday morning run club starting this weekend? Aiming for an easy 5K loop around the park.

Residents

248

Active in your building

Posts this week

↑ 18%vs last week

Feed — /feed · post list

All Maintenance Safety Community Leasing General

Property Manager Announcement Important

2h ago · Marina Tower

Elevator maintenance Thursday 8–11am

The lobby elevator will be offline for scheduled maintenance. Service elevator remains available. Thanks for your patience.

Amelia Moreno · UX designer · Apt 408 Community

5h ago

Looking for a paddle partner for Tuesdays after 6pm — any takers? 🎾

Jordan Diaz Safety

Yesterday

Heads-up: the back gate latch is loose again. I reported it to maintenance but please double-check it’s closed when you pass through.

Event Detail — /events/[id]

Social Published

Rooftop Spring Social

📅 Sat, Apr 22 · 6:30–9:00pm · 📍 Rooftop deck

Hosted by Property Manager

Marina Tower community team

About this event

Join neighbors for drinks, music, and small bites on the rooftop deck. Complimentary for residents + 1 guest. RSVP by Friday — capacity is 80 and we’ll run a waitlist if we fill.

Attending · 42

+38

Messages — /messages · conversation list

Messages

Amelia Moreno8m

Sounds good — I’ll bring the chips 🥟2

Property Manager2h

📎 parking_permit.pdf · Attached

Sarah KimYesterday

Thanks again for covering my shift!

Admin

apps/admin — Next.js 15 · App Router · glass-dark chrome

Dashboard — / — morning check-in + KPIs

Dashboard

Welcome back, Pascal

Pascal W.

⚠ 2 of 4 setup steps remaining — finish onboarding your property

Morning check-in

Friday, April 17

⚠

Urgent WO

Unassigned

★

Events today

●

Unread

Property overview

Occupancy

94.2%

↑ 1.1%vs last month

🏠

Active residents

248

↑ 6.4%vs last week

👥

Event revenue

$4,820

↓ 2.1%vs last month

💰

Work Orders — /work-orders — status tiles + SLA + table

Avg Resolution

18h 42m

Avg Response

1h 08m

SLA Compliance

94%

Overdue

Resident	Title	Category	Status	Assigned	Urgency	Opened
Amelia Moreno · 408	Leaking faucet in kitchen	Plumbing	Submitted	—	Urgent	2h ago
Pascal Mendes · 103	AC unit not cooling	HVAC	In progress	Mike R.	Standard	Yesterday
Sarah Kim · 221	Broken dishwasher	Appliance	Completed	Team A	Standard	3d ago

Residents — /residents — searchable table

Residents

248 total · 232 active · 16 inactive

Name	Unit	Profession	Move-in	Status	Tags
AM Amelia Moreno	408	UX Designer	Mar 2024	Active	VIP
PM Pascal Mendes	103	Attorney	Jan 2022	Active	—
SK Sarah Kim	221	Product Manager	Sep 2023	Inactive	Late payment

Admin Events — /events — filter tabs + sortable table

Events

Title	Category	Date	RSVPs	Revenue	Status
Rooftop Spring Social	Social	Apr 22 · 6:30pm	42 / 80	$840.00	Published
Yoga in the Lounge	Fitness	Apr 25 · 8:00am	12 / 20	—	Published
Wine & Paint Night	Arts	May 09 · 7:00pm	0 / 25	—	Draft

Settings — /settings — tabbed form

Profile

Full name

Role

Feature flags

Enable resident polls

Allow creating polls in the feed.

Merchant perks

Show local merchant offers tab.

Waitlist on full events

Auto-queue RSVPs when capacity reached.

Mobile

apps/mobile — Expo · React Native · dark UI

Mobile uses React Native StyleSheet. These HTML mocks reproduce the exact colors, spacing, type scale, and layout of the native screens — but text renders in Manrope rather than the native system font. Dimensions reflect a standard 375-wide phone.

Home

🔔5

Community pulse