# Frontline21 / R4

Open `preview/index.html` after extracting the ZIP.

**Strategic center:** Formation before failure.

Keep the true red in both modes. Translate the flat top, shallow point and darker folded half into primary actions, selected fields and practice markers. Put texture on larger brand surfaces while keeping small text and controls clean.

## Organized files

- `components/light` and `components/dark`: 50 controls per mode; named default, hover, focus, active, disabled and loading groups. Passive specimens do not invent interactive states.
- `screens`: desktop and mobile app compositions in both modes.
- `boards`: category sheets and the complete brand-system demonstrations.
- `icons`: 32 currentColor SVGs with hidden construction and type-reference layers.
- `shapes`: five reusable vector primitives derived from this brand’s geometry.
- `campaigns`: email, headline A/B social plates, app-entry view and an honest test plan.
- `import-ready`: outlined default-state component snapshots for importers that ignore SVG CSS state selectors.
- `outlined`: matching font-independent component, screen, board and campaign SVGs.
- `renders`: PNG reviews.
- `preview`: offline searchable library, paired inspector and native control lab.
- `fonts`, `tokens.json`, `component-manifest.json`: editing and implementation support.

## Current source

[https://www.frontline21.com/](https://www.frontline21.com/) reviewed 2026-09-29. Quantico / Poppins; #DC2227 red, #1F2424 charcoal, #121616 ink and #F4F5F4 paper. Exact folded shield paths and print-density texture are present in live source.

Current live source: Quantico / Poppins, #DC2227 red, #1F2424 charcoal, #121616 ink, #F4F5F4 paper. Original shield paths and print-density texture are retained. Light mode and UI geometry are authored extensions.

## Limits

The app remains an authored prototype. Practice states are illustrative; they never measure a man’s worth or imply a live integration. SVGs are vector visual specifications. Native behavior is demonstrated separately in the lab. No production service or full 50-control application implementation is claimed.

Install TTFs to edit live text. Use outlined copies if your design application substitutes fonts. Keep both. Review the full package’s audit and Claude prompt before integration.