Design System · 1959–1984 Edition
A design system rooted in mid-century mod florals — bold orange blooms, deep teal greens, and warm golden hues drawn from a treasured family composition book.
Explore the System ✿01 — Palette
02 — Typography
Easter Breakfast, Scioli Clan
Mod Florals, Bold & Free
The flowers bloom every spring, without fail.
Family Gathering · Traditions · Community
A vibrant mix of orange, teal, and gold — the palette of the 1960s and '70s feels as alive today as it did then. These colors carry warmth, optimism, and a handmade spirit that no trend can erode.
Volume I · 1959–1984 · Handwritten on lined composition paper. A record of twenty-five years of Easter mornings, family recipes, and shared memory.
var(--orange) → #E8512A
03 — Spacing & Radius
05 — Cards
A beloved tradition from the Scioli Easter breakfast table, passed down through generations.
Twelve cousins, a folding table, and a tablecloth with daisies. Some things stay the same forever.
Sweet, golden, and citrus-forward. First served on Easter Sunday, 1979, and never missed since.
06 — Badges
08 — Forms
09 — Alerts
10 — Avatars
11 — Progress
12 — Data Tables
| Name | Year | Category | Occasion |
|---|---|---|---|
| Grandma Rosa's Deviled Eggs | 1963 | Recipe | Easter Breakfast |
| The Backyard Table | 1971 | Memory | Summer Reunion |
| Honey Cake with Citrus Glaze | 1979 | Recipe | Easter Breakfast |
| Twelve Cousins | 1984 | Memory | Final Volume |
13 — Design Tokens
| Token | Value | Use |
|---|---|---|
--orange | #E8512A | Primary action, CTA, key accent |
--orange-light | #F2714A | Hover states, highlights |
--orange-dark | #C03D1C | Active/pressed states, shadows |
--teal | #2E6B58 | Surfaces, cards, mid-tone |
--teal-light | #3D8A70 | Secondary button, interactive teal |
--teal-dark | #1B4A3C | Page background, deep canvas |
--gold | #B8963E | Labels, monospace, tertiary accent |
--gold-light | #D4B060 | Highlighted gold, code color |
--cream | #F0EBD8 | Primary text on dark surfaces |
--cream-dark | #D9CEB0 | Body text, muted labels |
--white | #FAF8F2 | Headings, maximum contrast |
--ink | #1A1A14 | Hard shadows, text on light bg |
| Fonts | ||
--font-display | Syne — headings, UI, labels | |
--font-serif | DM Serif Display — editorial, display | |
--font-mono | Syne Mono — code, metadata, tags | |