The recognizable Jeff Franzen system

Calm operational craft, carried through everything.

White and cool-gray surfaces. Charcoal and navy ink. Restrained Red Cross red. Clear hierarchy. Map and data first. The same decisions repeat until the work is unmistakably yours.

Try the playground See map symbols

1Private repositoryCanonical source and history

3Media familiesDocuments · Apps · Maps

1Interaction languageVisible, safe, repeatable

1

Study

Use this handbook to understand the approved patterns.

2

Preview

Experiment safely in the playground without changing the standard.

3

Approve

Export a proposal and decide which changes should become real.

4

Propagate

Codex or Claude updates the repo, tests it, and carries it forward.

Visual DNA

The family resemblance

Approved standard

The goal is not identical screens. It is consistent judgment: restrained color, disciplined type, strong information hierarchy, and familiar controls.

Typography

Inter carries the message.

Body copy, headings, labels, buttons, and editable prose stay in the UI family.

IBM Plex MonoRCODE · 10R12 · 43.6591

Mono is reserved for codes, coordinates, IDs, compact metrics, and data labels.

Non-negotiables

Pure white and cool-gray—not cream, beige, or parchment.
Red means brand, primary, urgent, or selected—not decoration.
One UI family and one mono family.
Approved logo assets only; never draw a substitute cross.
Six-pixel controls, eight-pixel panels, restrained shadows.

Documents & PDFs

Institutional, clear, and unmistakably related

Role model: Facility Closure Decision Guardrails

Documents use the same system with more breathing room: pure-white interior pages, cool-gray cover canvas, charcoal/navy ink, restrained red, compact running headers, clean tables, and explicit sources and limitations.

Decision Brief · July 2026

Facility Closure
Decision Guardrails

A disciplined framework for evaluating access, continuity, risk, and mission impact.

American Red CrossPrepared for operational review

Decision Guardrails02

Key Finding

Protect service continuity before optimizing the footprint.

Lead with the decision, then show the evidence, caveats, and operational implications.

Primary threshold45 minMaximum modeled drive time

Guardrail	Status
Access continuity	Pass
Capacity	Review
Data confidence	Pass

Lead with the outcome

Readers should understand the decision before studying the method.

Show evidence honestly

Sources, dates, limitations, and partner attribution are part of the design.

Maps belong to the same family

White plot surfaces, charcoal boundaries, navy context, red emphasis.

No ornamental paper

Warm beige, serif headlines, and editorial nostalgia are retired.

Maps & Red Cross Symbols

Operational meaning outranks decoration

Source-backed

Interface icons and map symbols are different systems. Controls use a coherent line-icon family. Operational map features use the supplied Red Cross DRO symbols when one exists.

Regional Operating PictureUpdated 09:30 ET

Filters

Standard controls

Home and Zoom top-left, Basemap Gallery bottom-right, Scale Bar bottom-left, Search top-right when useful.

Custom application

Suppress default Esri popups. A feature click opens the formatted app-owned right rail.

Portal / AGOL web map

A deliberately configured Map Viewer popup may use validated HTML and Arcade.

Public surface

No raw fields, system identifiers, access secrets, private contacts, or implementation details.

Required map behavior

Filter, then fit.

Every filter that changes mapped results automatically fits the extent of all authoritative matches. The visible count, summaries, features, and camera must describe the same result set.

One match: Use a useful capped scale
Zero matches: Keep the camera; show zero results
Clear filters: Fit the full or governed initial extent
Open rails: Include every rail and header in padding

Operational catalog

Red Cross feature and status symbols

Exact embedded graphics extracted from the supplied Portal guide—not CSS reproductions.

Source fidelity ruleUse these exact assets or the authorized source URL. Do not redraw, recolor, or “improve” operational symbols.Portal guide pp. 3, 5-7 · SADS guide pp. 6-7

Loading symbol catalog...

Shelters & Wildfires

Make the next decision obvious

Required profile

Whenever a map contains shelters or wildfires, use these recognizable content profiles. Preserve the information order and general visual language; map the real source fields into it instead of copying an old schema.

1Name and status first

Identify the selected feature and write its state in text.

2One dominant measure

Clients for shelters; acres and containment for wildfire.

3Decision facts next

Show only the facts that change interpretation or action.

4Source and time always

Every operational value needs provenance and freshness.

Shelter profileIllustrative data · not operational

Client Shelter

Crystal River Community Center

Open

38Current clients

Observed 09:15 ET

Address: 100 Community Way
Crystal River, FL 34429
Site: Congregate shelter
Managed by: Partner organization
Event: DR 0000 · Example

Why it matters

The current client count is the decision measure. Location and management provide operational context without competing with it.

Always include

Name and written status · current clients and count time · address · site/management type · event context · source and freshness.

Contacts and shelter IDs appear only in authorized internal views—not by default.

Wildfire profileIllustrative data · not operational

Wildfire Incident

Williams Mine Fire

Skamania County, Washington

Active

11,764Acres

38%Contained

Discovered: July 14 · 7 days ago
Residences destroyed: 2
Personnel: 462
Fire behavior: Moderate

Operational context

Growth has slowed, but active fire behavior continues along the northern perimeter. Values remain tied to the incident update below.

Always include

Name and location · acres and containment · discovery date · three to seven verified impacts or management facts · source and freshness.

Do not infer null casualties, damage, cause, containment, or evacuation status.

Portal / Map Viewer

Compact configured popup

Use validated fields and one Add content > Arcade block that returns the complete text element. Keep it narrow and scannable.

Custom JBF application

Persistent right detail rail

Suppress the Esri popup and present the same content order in the app-owned rail, with selection, close, loading, stale, null, and error states.

Source precedent

Popup Codes.pdf

Shelters pp. 8-9 · wildfire incidents pp. 10-13 · perimeters pp. 14-17. Reuse the content logic, not the old styling or field schema.

Interaction

Visible for beginners. Fast for experts.

Proven in ROP, GeoMenu, and Lives Saved

A click, shortcut, command-palette result, and touch control invoke the same command. Shortcuts supplement visible controls; they never replace them.

Esc

Close / back out

Close the topmost temporary surface, then exit selection or drill level.

/

Search

Focus or open the primary search without firing while the user types.

⌘ K

Command center

Open the searchable command palette when the app has one.

?

Keyboard help

Show the live command registry when more than three shortcuts exist.

L

Left rail

Toggle the left rail in command-enabled two-rail applications.

R

Right rail

Toggle the right rail without colliding with Shift+R reset.

Shortcut safety

One command registry and one global dispatcher.
Inactive while typing, composing text, repeating a key, or viewing a modal.
Collision tests fail instead of silently choosing a winner.
Help renders from the same registry that executes commands.

Use the right surface

Tooltip: Short label or shortcut hint
Popover: Nearby choices
Modal: Focused temporary task
Detail rail: Persistent selected-object information
Toast: Brief confirmation or recoverable failure

Components

Small decisions that repeat

Components stay compact, rectangular, accessible, and purposeful. Every control has a visible hover, focus, selected, and disabled state.

Buttons

Icon controls

One coherent outline family. Custom operational glyphs live in one registry. Emoji are not production icons.

Segmented control

Action tileInstructions for Codex and ClaudeOpen →

Safe Visual Playground

Explore a change without changing the standard

Canonical preview

These controls affect only the preview below and this browser. Export a proposal when you find something worth considering; Codex or Claude can review, apply, test, and commit it.

County Operations

Situation Brief · 09:30 ET

What changed, what matters, what happens next.

The visual proposal should make the hierarchy clearer without turning the work into a new brand.

Primary findingTwo counties require follow-up verification.

Codex & Claude

Both agents read the same authority

There is no separate Codex aesthetic and Claude aesthetic. The repository's agent files route both systems to the same visual, interaction, map, and document rules.

C

Tell CodexFor an existing project

Use the Franzen standard in /Users/jefffranzen/dev/franzen-app-standards. Read this repo's DESIGN.md, then apply the canonical visual, interaction, map-symbol, popup/detail, and accessibility rules. For every map filter, follow references/FILTER_TO_EXTENT_STANDARD.md. For every shelter or wildfire map, follow references/SHELTER_AND_WILDFIRE_DETAIL_STANDARD.md. Preserve the current product's purpose and verify the real UI at desktop and mobile sizes.

A

Tell Claude CodeFor an existing project

Follow /Users/jefffranzen/dev/franzen-app-standards as the design and interaction authority. Read the target repo's CLAUDE.md and DESIGN.md. For every map filter, follow references/FILTER_TO_EXTENT_STANDARD.md. For every shelter or wildfire map, follow references/SHELTER_AND_WILDFIRE_DETAIL_STANDARD.md. Use the supplied Red Cross operational symbols where applicable, keep custom-app feature details in the app-owned rail, and test every changed state before committing.

New repository bootstrapnode /Users/jefffranzen/dev/franzen-app-standards/scripts/install-app-standard.mjs /path/to/repo

Sources & Governance

Know what is authoritative

Approved

Canonical standards

DESIGN_SYSTEM.md, interaction references, tokens, agent rules, and templates in the private repository.

Source-backed

Red Cross evidence

Supplied Portal/Org, SADS DRO, and popup-code PDFs are archived privately and interpreted in the map-symbol reference.

Proven pattern

Working exemplars

Lives Saved supplies the shell, GeoMenu the map-as-menu model, and ROP the command registry and operational icon language.

Preview only

Playground proposals

Browser experiments are not standards until reviewed, applied to the repository, tested, committed, and published.

One repo. One website. One truth.

Keep code and standards in GitHub, use this site to understand and preview them, and use Codex or Claude to propagate approved changes.