CivicDirect · Foundation

CivicComms Design Tokens

Every surface, status and role color in the system, rendered from the semantic token layer for the active theme — with live computed values.

Switch between Light, Dark and Dusk to read that theme's real values: every swatch and value on this page is computed from the live data-theme layer, including Dusk.

Already following your OS

Active theme: light — from the default theme

Typography roles

Mayor's daily briefing

.type-page-title

clamp(22px, 4vw, 28px) · 740 · -0.02em

Section heading

.type-section

15.5px · 600 · 1.3

Body copy

.type-body

14px · 1.5

Small copy

.type-small

13px · 1.45

Extra small

.type-xs

12.5px · 1.4

Micro eyebrow

.type-micro

11px · 600 · uppercase · 0.06em

Brand components

What is actually shipped in the product today. Both are theme-aware and consume tokens or currentColor — neither carries a hardcoded color.

BrandMark

Inherits currentColor. Used in the AppShell header and the auth card.

CivicDirectLockup

variant="black" — light surfaces

variant="white" — dark surfaces and the BrandPanel

variant="auto" — follows the active theme

Native aspect ratio 1349×218. The red accent is baked into the artwork and is never recolored.

Photography in the product

Every image below is in use today, at the surface named. Atlanta imagery is demonstration-tenant material and is labeled as such where it appears.

atlanta-skyline.jpg
Shared BrandPanel — /auth and the landing page /
Behind the CivicComms headline, under a navy scrim so the white lockup stays legible.

beltline-trail.jpg
Event detail /events/$id
Rendered only for the Westside Community Recreation Center event — venue-gated, never generic.

flag-sky.jpg
Mayor dashboard /mayor
Header banner on the executive-consumption view.

empty-notebook.jpg
StateBlock kind="empty" (all dashboards)
Decorative thumbnail inside empty states only; hidden from assistive tech.

Presentation-status primitives

These labels distinguish working product surfaces from external boundaries and illustrative records. They supplement workflow status; they never replace it.

Operational

Reads or writes a real persistent record through role-governed access.

Pending Integration

A durable internal boundary exists, but no external delivery is claimed.

Demonstration Content

Illustrative Atlanta scenario content, not a verified civic fact.

Workflow status remains separate

In reviewApprovedPending integration

Collaboration components

Both components read and write the same persistent event-request lineage. Role-aware presentation mirrors the database and private-file access boundary; it does not replace it.

AttachmentsCard

Operational

Private files on one event-request lineage and stage

Role boundary: Director, Scheduler and Event Lead upload; Mayor reads only
Honest states: Loading, empty, upload progress, validation error, stored file and signed open link

CommentThread

Operational

Organization-scoped discussion retained on the event lineage

Role boundary: Director, Scheduler and Event Lead post; Mayor reads only
Honest states: Loading, empty, ordered thread, post error and read-only notice

CivicCue urgency and tone

Cues are derived from real requests, approvals, lifecycle rows and assigned tasks. They are sorted Decision → Action → Review and always link to the record where the work is completed.

Operational

Decision

A governed approval or participation decision is waiting on this role.

border-crit-border · bg-crit-bg · text-crit

Action

A stage, calendar commitment or assigned task needs operational work.

border-warn-border · bg-warn-bg · text-warn

Review

A prepared record is ready for executive consumption or acknowledgment.

border-border · bg-surface-2 · text-text-2

CivicStory handoff payload

Pending Integration

civiccomms.civicstory.handoff v1 is a durable JSON snapshot prepared inside CivicComms. A handed_off package is ready for a future integration; it is not proof that anything was transmitted or publicly published.

Identity: Schema + version + stable idempotency key
Transition: handed_off_at + audit action civicstory_handoff_ready
Delivery truth: pending_integration, attempts, delivered_at and delivery_error

Lineage sections

request
participation_decision
event
discovery
civic_advance
civic_brief
briefing_packet
event_day
post_event
approvals
attachments

Envelope metadata also records source, tenant, story, handoff, delivery, demonstration status and generated time.

Brand

cd-blue

--cd-blue

—

cd-blue-hover

--cd-blue-hover

—

cd-navy

--cd-navy

—

Surfaces

--bg

—

surface

--surface

—

surface-2

--surface-2

—

surface-3

--surface-3

—

sunken

--sunken

—

border

--border

—

border-strong

--border-strong

—

Text

text

--text

—

text-2

--text-2

—

text-3

--text-3

—

Status

--ok

—

ok-bg

--ok-bg

—

ok-border

--ok-border

—

warn

--warn

—

warn-bg

--warn-bg

—

warn-border

--warn-border

—

risk

--risk

—

risk-bg

--risk-bg

—

risk-border

--risk-border

—

crit

--crit

—

crit-bg

--crit-bg

—

crit-border

--crit-border

—

info

--info

—

info-bg

--info-bg

—

info-border

--info-border

—

accent

--accent

—

accent-bg

--accent-bg

—

accent-border

--accent-border

—

neutral

--neutral

—

neutral-bg

--neutral-bg

—

neutral-border

--neutral-border

—

Roles

ally

--ally

—

mode-mayor

--mode-mayor

—

mode-control

--mode-control

—

Radii

--r-sm

—

--r-md

—

--r-lg

—

--r-xl

—

Elevation

--shadow-sm

—

--shadow-lg

—