Cozy Home — Design System

The component pattern sheet for the migration. Every phase styles its components to match these primitives. Tokens here mirror what now lives in src/app.css — change them there and the whole app follows.

Color tokens
backgroundcream #fdf8f2
card#fffdfa
primaryterracotta · tunable
foregroundwarm ink
muted#f3ecde
border#ece2d3
room · terra
room · peach
room · butter
room · sage
room · sky
room · lav
Typography — Fraunces (display) · Figtree (body)

Good evening, Alexei

Your favorites

Jellyfin

Body copy is Figtree — friendly, legible, rounded. It carries descriptions, hints, and plain-language status like “a bit slow” or “asleep”.

Buttons
Form fields
Shown on the card and in search.
Status pills & room tags
Online A bit slow Asleep Media Network Git
Tabs
Overview
Activity
Settings
App card
🎬

Jellyfin

Movies & shows
Online99.9%
Dialog

Remove Deluge?

This deletes the app and its uptime history. This can’t be undone.

Table (admin)
User Role Status Last seen
Alexei Admin Active just now
Guest Viewer Idle 2h ago
Empty state

No apps yet

Add your first service and it’ll show up here with live status.

Cozy Home design system · mirrors src/app.css · use as the pattern for every migrated component