// Civic Modern — individual content sections, pickable per page.
// Each section is a self-contained Band that can be dropped into any page layout.
const { useState: useSectionState } = React;
// ─────────────────── shared helpers ───────────────────
function TypeRow({ size, weight, family, letterSpacing = 0, lineHeight = 1.1, sample, role }) {
const t = window.tokens;
return (
{size}px · {weight}
{role}
{sample}
);
}
function Swatch({ name, hex, border, token }) {
const t = window.tokens;
return (
{name}
{token}
{hex.toUpperCase()}
);
}
// ─────────────────── COVER ───────────────────
function CoverSection() {
const t = window.tokens;
return (
Civic Modern · v0.1 · Figtree system
Plainly modern, for government.
The quiet confidence of contemporary software, translated for residents and municipal staff. White space does the talking; one orange does the pointing. This is the live spec sheet: tokens, type, color, and components in one place.
Canvas · White
Primary · Action Orange
Support · Blueprint
Type · Figtree + IBM Plex Mono
);
}
// ─────────────────── PRINCIPLES ───────────────────
function PrinciplesSection() {
const t = window.tokens;
return (
{[
{ n: '01', t: 'One action at a time', d: 'Orange is reserved for the single thing that needs a person. Everything else recedes.' },
{ n: '02', t: 'Plain verbs, no jargon', d: 'Write like you\'re talking to someone on the phone. No "endpoint," no "submit entity."' },
{ n: '03', t: 'Quiet by default', d: 'Soft backgrounds, thin hairlines, generous whitespace. Fidelity through restraint, not decoration.' },
].map((p) => (
{p.n}
{p.t}
{p.d}
))}
);
}
// ─────────────────── TYPOGRAPHY ───────────────────
function TypographySection() {
const t = window.tokens;
return (
Families
Figtree
Primary · Display + UI
Weights 400, 500. Medium for display and emphasis; Regular for everything else.
IBM Plex Mono
Accent · Labels + steps
Never voice. Only step numbers, eyebrows, microlabels, and timestamps.
Figtree Medium (500) for display and emphasis. Regular (400) for body and UI. No other weights.
);
}
// ─────────────────── COLOR ───────────────────
function ColorSection() {
const t = window.tokens;
return (
Surfaces + text
Text
Action · Primary
Status · Base
Status · Light · Backgrounds + fills
Action Orange (#D63600) only appears on the single thing that needs a person. Never for decoration, never for two things on the same screen. Status lights are for passive surfaces like pills, banner backgrounds, and timeline fills, not for calls to action.
);
}
// ─────────────────── SPACING + RADII ───────────────────
function SpacingSection() {
const t = window.tokens;
return (
);
}
// ─────────────────── COMPONENTS · BUTTONS ───────────────────
function ComponentsButtonsSection() {
const t = window.tokens;
const variants = [
{
key: 'primary',
name: 'Primary',
use: 'The single most important action on a screen. Reserved for the one thing that needs a person: submit, confirm, continue.',
rule: 'One per screen, maximum.',
},
{
key: 'secondary',
name: 'Secondary',
use: 'Supporting action next to a primary. Save for later, go back, view details. Outlined so it recedes.',
rule: 'Use when a primary is also on screen.',
},
{
key: 'tertiary',
name: 'Tertiary',
use: 'Low-emphasis action inside dense layouts, toolbars, and cards. No fill, no border, just a label.',
rule: 'Use for repeated or inline actions where buttons would otherwise crowd each other.',
},
{
key: 'destructive',
name: 'Destructive',
use: 'Irreversible or data-losing actions. Delete a request, revoke a license, cancel an application.',
rule: 'Always pair with a confirmation step. Never use for routine actions.',
},
{
key: 'link',
name: 'Link',
use: 'Inline navigation inside body copy or footnotes. Reads as text with an orange tint.',
rule: 'Use for cross-references, not for actions.',
},
];
return (
{variants.map((v) => (
{v.name}
variant="{v.key}"
{v.use}
{v.rule}
))}
Default
Hover
Focus
Hover darkens fills and background-tints ghost variants. Focus uses a 2px Action Orange ring with 2px offset — the same token as the primary button, so keyboard users see the brand as the focus signal.
Disabled states fade to 50% opacity. Only use when the action is temporarily unavailable, not as a way to hide it.
);
}
// ─────────────────── COMPONENTS · FORMS ───────────────────
function ComponentsFormsSection() {
const t = window.tokens;
const [checked, setChecked] = useSectionState(true);
const [radio, setRadio] = useSectionState('email');
const [on, setOn] = useSectionState(true);
const controls = [
{
key: 'input',
name: 'Text input',
use: 'Single-line typed entry. Names, addresses, reference numbers, short answers, anything that fits on one line.',
rule: 'Always pair with a Field label. Use help text for format hints, error text only when the value is rejected.',
sample: (
),
},
{
key: 'textarea',
name: 'Textarea',
use: 'Multi-line typed entry. Descriptions of an issue, explanations, longer-form answers.',
rule: 'Size the default height to the expected answer: 3 rows for a sentence, 6 for a paragraph.',
sample: (
),
},
{
key: 'select',
name: 'Select',
use: 'Pick one from a known, bounded list. Municipalities, departments, document types.',
rule: 'Use when the list is 4+ items or grows. For ≤3 fixed options, use Radio instead.',
sample: (
),
},
{
key: 'checkbox',
name: 'Checkbox',
use: 'Independent on/off choices. Toggle a preference, agree to terms, select several items from a list.',
rule: 'Each checkbox is its own answer. If the choices are mutually exclusive, use Radio.',
sample: setChecked(!checked)} label="Email me status updates" />,
},
{
key: 'radio',
name: 'Radio',
use: 'Pick exactly one from a small, visible set. Contact preference, payment method, yes/no/maybe.',
rule: 'Always show all options at once. For long lists, use Select. Always have a default selection unless truly optional.',
sample: (
setRadio('email')} label="Contact by email" />
setRadio('phone')} label="Contact by phone" />
),
},
{
key: 'switch',
name: 'Switch',
use: 'Turn a setting on or off with immediate effect. Notifications, data sharing, feature toggles.',
rule: 'Use when the change applies the moment it flips. If the choice is only saved on submit, use Checkbox.',
sample: setOn(!on)} label="Send me weekly digest" />,
},
];
const practices = [
{
title: 'No placeholder text by default',
body: 'Placeholder text disappears the moment the field is focused, takes focus away from the label, and is often mistaken for a pre-filled value. Put guidance in the label or helper text instead.',
exceptions: 'Date fields that show the expected format, and search fields where the placeholder invites interaction.',
},
];
return (
{controls.map((v) => (
{v.sample}
{v.name}
<{v.key}>
{v.use}
{v.rule}
))}
{/* ─── CHECKBOX STATES + SIZES ─── */}
Checkbox
States & sizes
Unselected
{}} label="Email me status updates" />
Selected
{}} label="Email me status updates" />
Disabled
Disabled · on
Default · md
{}} label="Email me status updates" />
Small · sm
{}} label="Email me status updates" />
Default (20px box / 15px label) is the everyday size. Use size="sm" (16px / 14px) only inside dense UI like tables, filter panels, and settings rows.
{/* ─── RADIO STATES + SIZES ─── */}
Radio
States & sizes
Unselected
{}} label="Contact by email" />
Selected
{}} label="Contact by email" />
Disabled
Disabled · on
Default · md
{}} label="Contact by email" />
Small · sm
{}} label="Contact by email" />
Match checkbox sizing. Default in forms and settings; small inside dense filter rows or multi-column tables.
{/* ─── INPUT · INVALID (kept as a tile since it's a state not a variant) ─── */}
The input border thickens to 2px and shifts to red. Error text appears below in red with a leading icon. Helper text stays put above the input. Use specific, human language. Never just "Invalid entry."
Label (15px, title case) sits 8px above helper text (12px, muted), which sits 8px above the input. Helper text always stays visible. Error text, when set, appears below the input in red.
{/* ─── BEST PRACTICES ─── */}
Best practices
Rules that apply to every field
{practices.map((p, i) => (
{String(i + 1).padStart(2, '0')}
{p.title}
{p.body}
{p.exceptions && (
Exceptions: {p.exceptions}
)}
))}
);
}
// ─────────────────── COMPONENTS · CONTAINERS ───────────────────
function ComponentsContainersSection() {
const t = window.tokens;
return (
Building permit
218 Maple Street · In review since April 18.
Final inspection
Thursday at 10:00 AM. Rick Cuffe.
Start a request}
/>
);
}
// ─────────────────── COMPONENTS · ALERTS ───────────────────
function ComponentsAlertsSection() {
const t = window.tokens;
const tones = [
{
key: 'info',
name: 'Info',
use: 'Passive context. Average wait times, process explanations, status without urgency.',
rule: 'Never demands action. If the reader must do something, use Action instead.',
sample: (
Average review time for Montclair is 7 business days.
),
},
{
key: 'action',
name: 'Action',
use: 'A person needs to do one specific thing before the process can move forward.',
rule: 'Always pair with a concrete action button. One Action alert per screen.',
sample: (
Upload}>
Upload it here and we'll send it to the Clerk's office.
),
},
{
key: 'ok',
name: 'Success',
use: 'Something completed cleanly. A renewal went through, a payment cleared, a form was accepted.',
rule: 'Confirms a past event. Does not ask for anything.',
sample: (
Expires April 22, 2027.
),
},
{
key: 'warn',
name: 'Warning',
use: 'Something changed that the reader should know about, but no immediate action is required.',
rule: 'Use for schedule changes, policy updates, weather disruptions. Escalate to Action if a response is needed.',
sample: (
Moved from Wed to Thu 10:00 AM due to weather.
),
},
];
return (
{tones.map((v) => (
{v.sample}
{v.name}
tone="{v.key}"
{v.use}
{v.rule}
))}
);
}
// ─────────────────── COMPONENTS · COMPOSER ───────────────────
function ComponentsComposerSection() {
const t = window.tokens;
const variants = [
{
key: 'full',
name: 'Full',
use: 'The signature entry point on the home page and at the top of each service hub. Invites a resident to describe what they need in their own words.',
rule: 'One per screen. Primary button reads "Get Started" on the home page and can shift to the specific next step on contextual pages.',
sample: ,
},
{
key: 'compact',
name: 'Compact',
use: 'A one-line composer for inline asks inside a flow: refining an in-progress request, asking a follow-up question on a record page, or replying to staff.',
rule: 'Single line only. No attach or voice affordances. Primary button reads "Send".',
sample: ,
},
];
return (
{variants.map((v) => (
{v.sample}
{v.name}
variant="{v.key}"
{v.use}
{v.rule}
))}
);
}
// ─────────────────── COMPONENTS · BREADCRUMBS ───────────────────
function ComponentsBreadcrumbsSection() {
const t = window.tokens;
return (
When to use
Show the path from the section home down to the current page, once the user is three or more levels deep. Residents need to know where they are and how to step back.
Rules
Every segment except the last is a link. The current page is plain text. Never use breadcrumbs as the only way to navigate up. Do not shorten or abbreviate segment names.
Switch between peer views of the same underlying data. Status filters on a request list, sections of a record detail page, or time ranges on a dashboard.
Rules
Two to six tabs. Never more. If the set grows, move to a filter or dropdown. The first tab is always selected by default. Tab labels are short nouns or noun phrases.
);
}
// ─────────────────── COMPONENTS · AVATAR ───────────────────
function ComponentsAvatarSection() {
const t = window.tokens;
const variants = [
{
key: 'initials',
name: 'Initials',
use: 'The default. Works when you have a name but no photo on file — which is most residents and most staff. Reads cleanly at every size.',
rule: 'Two letters, uppercase, drawn from the person\u2019s given and family name. Sizes follow the type scale: 24 / 28 / 32 / 40.',
sample: (
),
},
{
key: 'photo',
name: 'Photo',
use: 'When a real portrait is on file and identity matters: an inspector or clerk shown on a resident-facing status page, or a staff directory.',
rule: 'Square source, cropped to a circle. Never stretch. Fall back to initials when the image fails to load or is missing.',
sample: (
),
},
];
return (
{variants.map((v) => (
{v.sample}
{v.name}
{v.key === 'photo' ? 'src="…"' : 'initials="…"'}
{v.use}
{v.rule}
))}
);
}
// ─────────────────── COMPONENTS · PROGRESS ───────────────────
function ComponentsProgressSection() {
const t = window.tokens;
return (
When to use
Show how much of a known, bounded quantity is complete. Application completion, inspection coverage, payment reconciliation.
Rules
Always pair with a label and a numeric value. Only use when the denominator is known. For indeterminate or process-state progress, use a Stepper instead.
);
}
// ─────────────────── COMPONENTS · STEPPER ───────────────────
function ComponentsStepperSection() {
const t = window.tokens;
return (
When to use
Show where a resident is inside a multi-step flow: a permit application, a license renewal, an inspection booking. Each step is a discrete, named stage.
Rules
Three to six steps. Step labels are verbs or short nouns. A step is only marked complete when the user can no longer change it without going back. Never use a Stepper for percentage progress.
);
}
// ─────────────────── COMPONENTS · DATA TABLE ───────────────────
function ComponentsDataSection() {
const t = window.tokens;
return (
In review, when: 2 days ago },
{ title: 'Final inspection', where: '218 Maple Street', status: Scheduled · Thu, when: 5 days ago },
{ title: 'Business license', where: 'Maple & Orange LLC', status: Action needed, when: 6 days ago },
{ title: 'Dog license renewal', where: 'Household · Bowie', status: Completed, when: Apr 22 },
]}
/>
);
}
// ─────────────────── APPLIED · RESIDENT DASHBOARD ───────────────────
function ResidentDashboardSection() {
const t = window.tokens;
return (
State of New Jersey
ServicesTrack a requestHelp
Your requests
One thing needs you today.
Your building permit is ready for review, and your final inspection is on Thursday at 10:00 AM.
Upload W-9}>
Upload it here and we'll send it to the Clerk's office. Takes about a minute.
We use Microsoft's Fluent UI System Icons — a comprehensive, MIT-licensed library with thousands of glyphs drawn on consistent grids at 12, 16, 20, 24, 28, 32, and 48 px. Every icon comes in two weights: Regular (outlined) and Filled.
Icons are loaded live from unpkg, so the full library is available without checking anything into the repo. Use the <FluentIcon> component — never paste raw SVG.
MIT. Free for commercial and civic use. Attribution not required but appreciated. No design changes — we use glyphs as-drawn.
{/* ─── SIZES ─── */}
Sizes · Match the type scale
{[12, 16, 20, 24, 28, 32, 48].map((s) => (
{s}px
))}
Inline with body copy, help text, and table cells.
Paired with 15px body or 13px small. Default weight: regular.
Nav items, buttons, form controls.
The workhorse size. Use inside buttons, menu rows, pill leading glyphs.
Service card eyebrows.
For leading glyphs on cards, section headers, and empty states.
{/* ─── WEIGHTS ─── */}
Weights · Regular by default
The entire set is searchable at react.fluentui.dev → Icons Catalog. Each entry shows its name in Pascal Case (e.g. CalendarLtr24Regular).
To use that in our system, lowercase it and drop the size + weight suffix:
// from the catalog:
CalendarLtr24Regular
// in our code:
<FluentIcon name="calendar_ltr" size={'{24}'} />
Component API
<FluentIcon
name="home"// required, snake_case
size={'{20}'}// 12·16·20·24·28·32·48
weight="regular"// or "filled"
color={'{t.color.muted}'}// defaults to currentColor
title="Home"// for screen readers
/>
Icons inherit currentColor, so setting the parent's color tints the glyph. If a name 404s from the CDN, the component renders a dashed placeholder so layout holds.
{/* ─── RULES ─── */}
Rules
{[
{ t: 'Never paste raw SVG', d: 'Always use . Raw SVG drifts from our color and sizing tokens and bloats pages.' },
{ t: 'Match icon size to type size', d: '16 next to 13–15px text, 20 inside buttons and nav, 24 for card eyebrows. Never eyeball it.' },
{ t: 'Regular by default, Filled only for active states', d: 'The current nav item, the active step, the checked indicator. Never both weights of the same icon on one screen.' },
{ t: 'Don\u2019t mix icon families', d: 'No Material, no Feather, no emoji. Fluent only, so line weight and corner radius stay consistent.' },
{ t: 'Icon-only buttons need a label', d: 'Always pass title or aria-label on icon-only actions. Screen readers and tooltips both depend on it.' },
].map((r, i) => (
{String(i + 1).padStart(2, '0')}
{r.t}
{r.d}
))}
);
}
// ─────────────────── COMPONENTS · NAV ITEM ───────────────────
function ComponentsNavItemSection() {
const t = window.tokens;
const [active, setActive] = useSectionState('requests');
const variants = [
{
key: 'default',
name: 'Default',
use: 'Resting row. Leading Fluent icon in Regular weight, label in body color, transparent background.',
rule: 'Reserve active state for the one item the user is currently on. Never two active items in one menu.',
sample: (
),
},
{
key: 'active',
name: 'Active',
use: 'The current destination. Filled icon, Action Orange tint, soft orange background, medium weight label.',
rule: 'Exactly one per menu surface. The filled icon + orange tint is the signal — do not recreate with borders or underlines.',
sample: (
),
},
{
key: 'badge',
name: 'With badge',
use: 'Use when a count communicates something actionable: unread messages, items needing review, pending approvals.',
rule: 'Only integers. No "99+" styling — if the count exceeds 99 the problem is the inbox, not the label. Never use badges for decoration.',
sample: (
),
},
{
key: 'small',
name: 'Small · size="sm"',
use: 'Dense menus: account popover, secondary filter column, settings sub-pages.',
rule: 'Never mix sizes in the same group. A section is all default or all small.',
sample: (
<NavGroup> adds a mono eyebrow label and spacing. Click any row above to move the active state.
Default
Hover
Overview
Active
Hover tints the row with surfaceLo. Active fills with actionSoft and flips the icon to filled.
Sidebar navigation (like the one on your left), mobile drawers, account popovers, filter rails, stepper side panels. Anywhere you have a vertical list of destinations with leading glyphs.
);
}
// ─────────────────── FOOTER ───────────────────
function PageFooter() {
const t = window.tokens;
return (
GOVPILOT · CIVIC MODERN · v0.1LAST UPDATED · APR 2026