Style guide

Theme & components

A quick reference for the colors and building blocks already set up in this prototype. Use this as a reference, but it can change as needed.

Brand color

A generic default — swap it for the real target app's brand color once one is known.

Defined as CSS custom properties in styles.css — use as var(--brand-600), or the utility classes below.

Buttons

.btn .btn-primary / .btn-secondary / .btn-ghost

Badges

.badge .badge-brand / -success / -warning / -danger / -neutral

Inputs

.field

Cards

.card