VAVAW AdminPattern kit reference
Design Pattern System

Civic editorial structure, portable across stacks.

This kit is backend-agnostic by design. It defines semantic tokens, typography roles, page archetypes, motion rules, and explicit form and status patterns so the visual language survives a framework change without becoming a component-library accident.

Open operations workspaceReview archetypes
Dark ink canvases

Operational products stay grounded in dark surfaces with warm paper contrast.

Editorial restraint

Display typography is reserved for public narrative moments, not routine admin chrome.

Semantic portability

Token names describe function, so another stack can swap values without rewriting structure.

Visual thesis

The art direction is civic editorial: dark ink-like canvases, warm paper and clay accents, serif display headlines for public moments, clean sans-serif UI text for operations, and restrained motion that clarifies hierarchy instead of adding noise.

Semantic tokens

Change values, not naming. `surface-raised` should stay a panel surface no matter which stack renders it.

Archetype-first pages

Start from a page behavior model such as campaign, library, event, or operations before composing components.

Low-noise motion

Use one entrance cue, one depth cue, and one affordance cue. Anything beyond that needs a stronger reason.

Token roles

The contract uses semantic naming so the visual language can move from Rails to Django, Phoenix, Rust templates, React, or static HTML without coupling the system to one implementation detail.

surface-base

Primary page canvas#11120f

surface-raised

Panels, overlays, forms, and data containersrgba(28, 24, 20, 0.88)

surface-soft

Quiet separators and low-emphasis layersrgba(255, 255, 255, 0.04)

text-strong

Primary readable text#f4ede3

text-muted

Metadata, descriptions, and guidance#b5a794

accent-primary

Primary action and urgent emphasis#d8613f

accent-support

Success, verification, and stable state#809d69

accent-highlight

Eyebrows, labels, and small emphasis#ddbe89

Implementation rule

If another brand needs different colors, swap the token values. Do not rename the contract or rebuild the archetypes around raw color literals.

Typography roles

One display face and one UI face are enough. The distinction is functional, not ornamental.

A civic headline carries weight without shouting.

Display role Use only for public-facing hero moments, campaign titles, and editorial emphasis.

Filters, forms, tables, and moderation state stay crisp in the UI face.

UI role Use for navigation, forms, labels, body copy, data rows, and metadata.

Live now · Verified · Draft

Metadata role Keep metadata short, uppercase or microcopy-style, and easy to scan.

Experience archetypes

The page model matters more than the component list. These four archetypes define what gets prominence, what stays quiet, and how information should be scanned.

Campaign Landing

Use when the page needs persuasion, momentum, and one clear action.Lead with a single story, not a dashboard. Proof comes after the opening conviction, not before it.
full-bleed heroone dominant visual planeone primary CTA

Resource Library

Use when the page is mostly browse and discovery.Optimize for scanning. Search, filters, metadata, and readable excerpts should do more work than decoration.
search firststrong categoriesexcerpt-driven lists

Event Stream

Use when time and place are the primary organizing signals.Event density is acceptable as long as chronology stays obvious and every action state is explicit.
date firstlocation secondaction third

Operations Workspace

Use for admin, moderation, and member tools.Operational surfaces should feel sober and legible. Avoid campaign rhetoric, novelty gestures, or decorative card clutter.
quiet chromevisible filtersexplicit state copy

Motion, status, and forms

Motion improves orientation, feedback, and depth. Form and status patterns must stay explicit enough for operational contexts where ambiguity wastes time.

Form pattern

Primary actionSecondary action

Status pattern

VerifiedStable stateUse support color for verification, success, or safe continuation.
Needs reviewAttention stateWarnings should suggest action, not merely indicate uncertainty.
BlockedAlert stateCritical states need text labels because color alone is never enough.

Portability and accessibility

Backends influence data shape, permissions, caching, and workflow. They should not dictate color roles, spacing rhythm, heading hierarchy, or interaction density.

Recommended reuse workflow

1. Copy the token contract.
2. Map tokens into the destination styling system.
3. Rebuild one of the page archetypes.
4. Replace demo content with product data.
5. Adjust token values only after the UX survives intact.

Guardrails

✓Copy the token contract first.
✓Map those tokens into the destination stack’s styling system.
✓Rebuild one of the page archetypes using the target renderer.
✓Only then adjust token values for brand mood.
✓Maintain strong contrast between text and surfaces.
✓Preserve visible focus states and touch-target size.
✓Do not encode status by color alone.
✓Keep heading order structural and copy concise.

This admin app now uses the operations-workspace archetype from the same token system, while the `/design-patterns` route keeps the portable visual contract documented in the product itself.