Polis civic circle logo Polis

Local UI system

A civic interface for real-world rooms.

Polis components stay bounded, accessible, and institutionally quiet: clear controls, no engagement mechanics, no infinite scroll, no profile theater.

Foundation

Tokens, type, color, spacing.

Token inventory

Every CSS custom property is listed with usage, contrast context, and component trace.

Open tokens

Contrast matrix

All approved foreground and background pairs clear WCAG 2.2 AA for their use.

Open color

8-point grid

Spacing tokens cover 4, 8, 12, 16, 24, 32, 48, and 88 with 760 / 1060 / 1180 containers.

Read token source

Commands

Button primitives.

Input

Form-field library.

Documented route

Labels, help, errors, optional states, keyboard behavior, and ARIA patterns are documented together.

Open form page

Surfaces

Cards, panels, chips, and role tags.

Next event

Saturday Symposium

5 citizens, one shared text, one bounded room.

Reflection

24-hour check

Plain reflection capture without public ranking.

Welcomer

Role-limited tag

Functional event duty, never a profile trophy.

Open card page

Temporary state

Modal, drawer, toast.

Drawer

Bounded secondary action surface for account workflows.

Persistent toast

Important state remains visible until a citizen dismisses it.

Symbols

Line icon sprite.

Home
Calendar
Trust
Exit

Assets

Illustration inventory.

Citizen answers intake questions that become constellation slots. Agora circle with a wooden speaking token in the center. Public evidence cards show build status without exposing private citizen data. A printable exit summary records final state and deletion choices.
Read illustration inventory

Access

Keyboard, focus, motion.

Skip link

First interactive element on each static HTML page.

Focus ring

3px visible outline on every focusable element.

Reduced motion

Motion is capped and disabled for reduced-motion preference.

Open accessibility page