Principles

Five rules, then shape language — small (chips) → medium (cards) → big (sections).

Golden rules

  1. 1

    Semantic color only. UI uses bg-surface, text-foreground, border-border, bg-accent — never raw neutrals or hex in components.

  2. 2

    One icon system. @tabler/icons-react everywhere. Sized by tier (size-3–size-8), stroke 2, currentColor.

  3. 3

    Shared components first. Buttons, inputs, dialogs from @wisihe/ui-react. No one-off copies of the same pattern.

  4. 4

    Accessible by default. Icon-only controls get aria-label on the button. Decorative SVGs get aria-hidden. Respect prefers-reduced-motion.

  5. 5

    Honest, direct copy. Say what happened and what to do next. No hype, no blame-the-user jokes.

Shape language

Nest outward: small inside medium inside big. Child corners stay equal or tighter than the parent. Layout tokens →

Small

Example chip

Nested content block

Small

rounded-md · rounded-lg · rounded-full · p-2 · p-3 · gap-1.5 · gap-2

Micro UI — subtle corners. Full radius only for pills and circles, not card-sized boxes.

Medium

Example chip

Nested content block

Medium

rounded-lg · rounded-xl · p-4 · p-5 · gap-3 · gap-4

Default for interactive blocks — rounded-xl, border-border, p-4.

Big

Example chip

Nested content block

Big

rounded-2xl · rounded-3xl · p-6 · p-8 · py-10 · gap-6 · gap-8 · space-y-8

Page regions — once or twice per viewport. Nest medium inside big; never bigger radius on a child.