Design system
Pastel techno-retrofuturism for Sister Software and its products. Make abstraction feel physical: windows with credible chrome, navigation that looks like pressable keys, and editorial type that stays serious while the surroundings do not.
The tokens on these pages are read straight from design-system/tokens.json. Run yarn tokens after changing it to regenerate src/css/tokens.css.
Three modes, one family
Pick the mode before picking a component. Never mix all three on one screen.
| Mode | Where | Ground | Signature |
|---|---|---|---|
| Desktop | The home page, corporate pages | color-paper-pink wallpaper with watermark | Window, StickyNote, Launcher |
| Documentation | These docs, product docs | color-paper article, pink left rail | Mint keys, cream TOC panel, framed code, callouts |
| Editorial | Talk posts, launches | editorial-teal field, editorial-aqua frame | EditorialHero, MetaStrip |
Each page gets one quiet foundation (paper, cream or pink), one secondary surface family, and one or two energized accents.
Voice
- Dry technical humour over precise facts. The chrome may joke; the content may not exaggerate. Status: Chronically Online is fine in a system card; invented customers, metrics, or telemetry are not.
- Fiction is labelled as fiction. A system card prints which of its figures are decorative.
- Sentence case for headings and buttons. ALL CAPS only for system-card section labels.
- No emoji in UI chrome. A code sample may print one if the program does.
States and accessibility
- Focus: 2px solid
color-focusoutline at a 2px offset on every interactive element. - Hover underlines. Press collapses the hard shadow and moves the key down. The current item gets
color-lavender-deep, an underline, andaria-current— never colour alone. - Window controls render only when they work.
- Light theme only, until a dark theme can keep the palette and code contrast.
prefers-reduced-motionturns off press translations.