Roadless UI — Proposed Design System

What this proposes

A consolidated theme that promotes the de-facto hardcoded values used across the codebase into named Vuetify tokens, switches the body font from the Segoe UI fallback to the Bunny-loaded Inter (and uses Merriweather Sans for display headings), and renames the three paths from Fast / Informed / Champion to General / Informed / Learn with a single shared accent color until per-path differentiation is designed.

Color palette

Tokens are grouped by role. Promoted badges mark values that move from hardcoded usage into the theme; Updated marks an existing token whose value or alias is changing.

Brand greens

Three working greens collapsed to two: primary as the main action color, primary-dark for hovers and headings on tinted blocks, plus secondary for chrome and callouts.

Brand blues / chrome

Unchanged. Used for the dark navy site chrome, light-blue accent on dark backgrounds, and the teal accent.

Semantic

Cleaned up: success moves to a brighter green so it no longer reads as secondary; warning drops the alpha that was baked into the old hex.

Surfaces & structure

New tokens, promoted from hardcoded values that show up across many components. These primarily get consumed via CSS variables in scoped styles, not via the color prop.

Path accent

A single token shared by all three paths for now. When per-path differentiation is designed, this expands into path-general / path-informed / path-learn.

Migration map

What each currently-hardcoded value should become after the consolidation.

Live nuxt.config.ts theme block

As shipped in step 1. vuetify.ts is deleted; everything lives in nuxt.config.ts.

vuetify: {
  vuetifyOptions: {
    blueprint: md3,
    theme: {
      defaultTheme: 'light',
      themes: {
        light: {
          dark: false,
          colors: {
            // Brand greens
            primary:        '#1e6814',
            'primary-dark': '#2d5a27',
            secondary:      '#4a8c6e',

            // Brand blues / chrome
            header:         '#1a3a52',
            'header-light': '#9cc8dc',
            'header-dark':  '#1a3a52',
            accent:         '#5a9ab0',

            // Semantic
            success:        '#28a745',
            info:           '#5a9ab0',
            warning:        '#bd8908',
            error:          '#dc3545',

            // Surfaces & structure (promoted from hardcoded values)
            panel:          '#f8f9fa',
            border:         '#dee2e6',
            'step-tint':    '#f0fff4',
            'sidebar-tint': '#e8f5e8',

            // Path accent (single shared token; differentiate later)
            path:           '#4a8c6e'
          }
        }
      }
    },
    defaults: {
      VBtn: { rounded: 'xl' }
    },
    icons: { defaultSet: 'mdi' }
  },
  moduleOptions: { styles: true }
}

Path nomenclature & color

Renaming

Color

All three paths share the single path token (currently aliased to secondary = #4a8c6e) until we design distinct treatments. This replaces the brown #8b4513 that the dead path-themed CSS was reaching for, and removes the need for the unwired body.fast-path / informed-path / champion-path selectors entirely.

Typography — Bunny fonts now live

Step 4 has shipped: vuetify.scss and global.css body now use Inter (loaded via @nuxt/fonts / Bunny). Merriweather Sans is opt-in via the .display-heading utility class for hero / page-title use — kept in the sans family for visual consistency with Inter body copy. The legacy Segoe UI references in .briefcase-indicator and the comment-preview block in Engagement.vue were also updated in this step.

Proposed assignments

Live samples (using the loaded Bunny fonts)

CSS changes required

/* assets/styles/vuetify.scss — REMOVE these overrides */
- $body-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
- $heading-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

/* assets/styles/global.css — UPDATE body */
body {
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* New: display class for hero/h1 use only */
+ .display-heading {
+   font-family: 'Merriweather Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+   font-weight: 700;
+ }

Form input wrappers

Field semantics — type, autocomplete, inputmode, format-validation rules — are codified in thin wrapper components rather than left to call sites. Browsers and phone keyboards rely on these attributes for autofill and the right keyboard layout, and the audit found that today they're either missing or inconsistent across 18 input sites.

What each wrapper locks

Sanitization — what RoadlessTextInput strips

Every value emitted by the textarea is run through a small normalization pass before reaching the model. Users can't paste content that quietly corrupts downstream submission to Regulations.gov or the email backends.

API conventions

• v-model — every wrapper exposes modelValue: string and emits update:modelValue. Always returns a string (never undefined).
• variant="outlined" is locked. There is no escape hatch. The previously inconsistent variant="filled" ZIP becomes outlined under the wrapper.
• label and placeholder default to sensible values per field type but are overridable.
• :rules is additive — caller-supplied rules run after the built-in required and format rules, so step-specific validation composes cleanly.
• required, disabled, error pass through. Anything else lands on the inner v-text-field via v-bind="$attrs".

Live demo

Real wrappers, real behavior. Try invalid values to see the format rules fire; on a phone, watch the keyboard switch per field.

""

Migration: ContactFormPanel.vue

Proof-of-concept diff. The canonical contact form drops ~50 lines of inline rules + sanitize logic and gains four autocomplete tokens it was missing.

- <v-text-field
-   :model-value="modelValue.firstName"
-   label="First Name"
-   placeholder="Enter your first name"
-   required
-   variant="outlined"
-   :rules="[v => !!v?.trim() || 'First name is required']"
-   @update:model-value="update('firstName', $event ?? '')"
- />
+ <RoadlessNameField
+   :model-value="modelValue.firstName"
+   which="given"
+   required
+   @update:model-value="update('firstName', $event)"
+ />

- <v-text-field
-   :model-value="modelValue.email"
-   label="Email Address"
-   placeholder="your.email@example.com"
-   type="email"
-   required
-   variant="outlined"
-   :rules="[ ... ]"
-   :error="!!(modelValue.email && !isValidEmail(modelValue.email))"
-   @update:model-value="update('email', $event ?? '')"
- />
+ <RoadlessEmailField
+   :model-value="modelValue.email"
+   required
+   @update:model-value="update('email', $event)"
+ />

- <v-text-field
-   :model-value="modelValue.zip"
-   label="ZIP Code"
-   placeholder="12345"
-   required
-   variant="filled"
-   maxlength="5"
-   :rules="[ ... ]"
-   :error="!!(modelValue.zip && !isValidZip(modelValue.zip))"
-   @input="onZipInput"
- />
+ <RoadlessZipField
+   :model-value="modelValue.zip"
+   required
+   @update:model-value="update('zip', $event)"
+ />

  // The local isValidEmail / isValidZip / onZipInput helpers and the
  // hasIncomplete computed can be deleted — rules now live in the wrappers,
  // and inline error checklist can read directly from validation state.

Migration status

Text fields — done where production-relevant:

• ✅ components/steps/panels/ContactFormPanel.vue — 4 fields (canonical)
• ✅ pages/contact-representatives.vue — ZIP migrated (datetime field unchanged; out of wrapper scope)
• ✅ pages/mypostcard/contact.vue — phone + email migrated
• ✅ pages/whats-coming.vue:140 — raw <input> got autocomplete="email" + inputmode="email" (kept as raw input — embedded in custom flex layout that the wrapper would break)
• ⏭ components/Engagement.vue — ZIP allows ZIP+4 (/^\d{5}(-\d{4})?$/), which RoadlessZipField doesn't support. Either extend the wrapper with an allowExtended prop or accept 5-digit-only behavior.
• ⏭ components/townhall/TownhallContactInfo.vue, components/demo/DemoContactInfo.vue — self-flagged "safe to delete" with the demo cleanup. Skipped.

Textareas — done:

• ✅ components/steps/panels/PersonalStoryPanel.vue
• ✅ components/steps/panels/PersonalConnectionPanel.vue
• ✅ components/steps/panels/ConcernPickerPanel.vue
• ✅ components/steps/panels/StatementPanel.vue
• ✅ components/steps/panels/OpeningStatementsPanel.vue
• ✅ components/steps/panels/CommentReviewPanel.vue
• ✅ pages/townhall/admin/index.vue
• ⏭ pages/test-engagement.vue:33 — test page; skipped intentionally

Preview — step pattern with proposed tokens

Same canonical step layout as /design-system, but rendered with the proposed token values inline so we can sanity-check the look before migrating component files.

What's next

Once colors, fonts, and path naming land, the next sections to consolidate (in suggested order):

1. Spacing & layout. Delete the legacy .mt-* / .mb-* utilities in global.css:519–529 that conflict with Vuetify's scale. Pick a canonical container width per page archetype.
2. Buttons. Document and enforce the canonical Next/Back pair. Replace style="background:#1e6814;..." inline patterns in Engagement.vue with color="primary".
3. Cards & panels. Move the step-header tint consumer to color="step-tint"; same for sidebars.
4. Modals. Codify the header-bar / close-button / action-row skeleton; either ship a wrapper component or a docs snippet.
5. Forms — migrate the 18 input sites. Wrappers ship in components/inputs/; the Form wrappers section above lists every site to swap. ContactFormPanel.vue is the canonical first migration.
6. Path differentiation (later). When the time comes, replace the single path token with three: path-general, path-informed, path-learn.