Cosmic*

A small system for our family software, named for the apple. Cool dusk canvas, one decisive Cosmic Crisp red, sequoia bark for earth-toned depth, juniper teal for calm signals, amber for warm-card moments. Built so a chore tracker, a meal plan, and a fridge note all feel like the same house.

Color

01 · OKLCH
Dusk
--bg · 94% 0.014 260
Storm ink
--fg · 22% 0.025 260
Ash
--muted · 50% 0.022 260
Mist line
--border · 86% 0.018 260
Cosmic Crisp
--accent · 48% 0.16 22
Sequoia bark
--sequoia · 42% 0.06 50
Juniper
--juniper · 55% 0.075 190
Amber (stars)
--amber · 74% 0.11 65

Typography

02 · SF + NEW YORK
Display · New York
Good evening, Braden family.
Headline · SF Pro
Tonight: tacos al pastor, 6:30 pm.
Body · SF Pro Text
Three chores left today. Cher is cooking; Sequoia is on cilantro duty; Juniper warms the tortillas. Dishwasher empty by 8.
Caption · SF Pro Text
Streak: 4 days of finishing chores before bedtime.
Numeric · SF Mono
42 stars · 6:30 pm · 68° · +5 pts

Family avatars

03 · MEMBERS
R C J S

Buttons

04 · ACTIONS

Status pills

05 · SIGNALS
Done In progress Pending Overdue

Warm card

06 · ONE-PER-SCREEN
Tonight · 6:30 pm

Tacos al pastor with charred pineapple

Cher cooking. Sequoia on cilantro duty. Juniper warming tortillas. Rich on grill.

Using Cosmic

07 · INSTALL

Add one line to any HTML page:

<link rel="stylesheet" href="https://cosmic-family-os.pages.dev/css/main.css">

Then use the component classes:

<body class="cosmic">
  <span class="cosmic-wordmark">
    <span>Braden</span><span class="cosmic-wordmark__dot"></span>
    <span class="cosmic-wordmark__tag">Cosmic</span>
  </span>

  <button class="cosmic-btn cosmic-btn--accent">Mark complete</button>
</body>

Or pull just the variables — link /css/tokens.css and write your own CSS against --bg, --accent, --juniper, etc.