Bells & Pixels · design system

Design System

A distinctive, friendly system — warm cream & earthy tones, koi-pond accents, Phosphor duotone icons. Shared across Creator Studio and the Ike control plane.

Palette

Every colour is a CSS variable that flips with the theme — components reference the token, never a hex.

Typography

Lora — headings & titles

Plus Jakarta Sans — body, buttons & UI. The quick brown fox jumps over the lazy dog.

Source Code Pro — filenames, ids, code · 2026-06-08_CC_acnh_SpringFishing.mp4

Buttons

Primary · Secondary · Danger

Live action (icon + text, filled)

One language everywhere: an icon + a label. Primary fills sage; the live actions are bolder/uppercase.

Form controls

Badges & pills

filed unsorted verify mon CC SY Excellent

Panel header pattern

Content Library

Every slide-out panel: its command-button icon (sage) + title, a separator rule, consistent 700px width.

Icon set — Phosphor duotone, icons