AI Workflows and BrandingFrontline21The library

Frontline21

From accountability after failure to formation before compromise.

The Frontline21 system

Formation before failure.

The center

Formation before compromise. The brand does not sell recovery after failure; it forms the man before the test arrives, in daily practice with other men.

What the system protects

Quantico Bold in printed red, Poppins for explanation, carbon and bone, the five shields, and a red line that is functional, never decorative.

What it refuses

Shame, borrowed authority, and any claim that the app is a released product.

App experience · The Daily Stand

What moved: From consuming a message to keeping a practice.

The true red in both modes. The flat top, shallow point and folded half of the shield become primary actions, selected fields and practice markers. Texture on large brand surfaces; small text and controls stay clean.

Desktop · Field Paper

Phone · Field Paper

The app entry from the marketing site: the composition that hands a visitor into the experience. Authored; not a redesign of the public homepage.

An owned brand. The website is live; the app is a development prototype. Practice states are illustrative and never score a man’s worth; no live integration is implied.

The compositions are artwork with explicit baselines, a desktop and a phone in each mode; they are not a responsive build. Each file keeps its text live with the fonts embedded; the outlined copy freezes the type as paths.

Desktop, Field Paper Desktop, Night Stand Phone, Field Paper Phone, Night Stand Desktop, outlined Phone, outlined App entry

Components · fifty, in both modes and six states

Actions, Navigation, Forms, Feedback, Content and Overlays. Each drawing carries its six presentation states and a construction grid; pick a state, turn the grid on, narrow by category or find a control by name or job. Every control downloads as its own editable SVG in either mode, outlined, or as an import-ready default-state snapshot.

Each specimen is one layered SVG: named groups for the six presentation states, a construction grid and an accessible title, with the brand’s fonts embedded at their real weights so it opens the same in a browser or a design tool. The drawings specify appearance; a real control is a semantic HTML element built to this specification.

Try the controls

The same rules as working HTML in the brand’s tokens: a required field with native validation, a select, a switch, a range, a stepper, a date, a save that asks first, tabs that move with the arrow keys, a filter and a sort. The drawings above specify the look; this is the behaviour. No account or service is connected and nothing is stored.

One view at a time.

One useful step is enough to begin.

Can I change this later?

Yes. Return to the form, make your change, and save the revised next step.

Your context.

Filter items

	Status	Updated
Read the Daily Stand	Kept	Today
Lift or walk	Kept	Today
Read in your field	Kept	Today

Practice recorded

Two of three. Progress is named, never left to color alone.

Brand system · a shape has a reason, a color has a job

The brand-system board, Field Paper: shape grammar, material and control, the Color–Tone Continuum, typesetting and the icon family on one sheet. Download · Night Stand · outlined

01 · Shape grammar

The kept shield. The approved flat-top shield, shallow basal point and folded half shape commitments, selection and progress. Five primitives, drawn from the brand’s own geometry, carry that structure into the controls.

Action fieldthe primary action and its edge
Selection tilea chosen option
Context carda panel that holds context
Progress stopa step, kept or open
Status markera small named state

02 · Material and control

The action material runs from to : one gradient, a lit edge and a shadow, on the primary action and the selected state. Progress is named, never left to color alone.

03 · The Color–Tone Continuum

Three tiers, one job each. Unity reassures before it asks; controlled variety separates context from choice; necessary activation is one clear action at the right time. The tiers are shown in Field Paper.

01 · UnityA useful place to begin.Reassure before asking.
02 · Controlled varietySee what belongs together.Separate context and choice.
03 · Necessary activationKeep today’s lineOne clear action, at the right time.

01 · UnityA useful place to begin.Reassure before asking.
02 · Controlled varietySee what belongs together.Separate context and choice.
03 · Necessary activationKeep today’s lineOne clear action, at the right time.

The two modes

Two paired modes, one hierarchy: the same information order in Field Paper and Night Stand. Where a token names something the production case already fixes, the production value stands and is listed under Established.

Field Paper

Ground
Panel
Second panel
Ink
Muted
Line
Accent
Signal
Button
On button
Success
Error

Night Stand

Ground
Panel
Second panel
Ink
Muted
Line
Accent
Signal
Button
On button
Success
Error

Established

Inkthe production ground
Paperthe production ink
Frontline redthe red line
Red, litthe printed highlight
Navythe brand blue
Band paperthe manifesto band

Corner radius 2px · Minimum hit target 44px · Display 32 to 48 · Body 16 to 18 · Controls 14 to 16

04 · Typesetting

Quantico 700

Every era calls its own greatest generation.

Hold the line in your heart and your home.

Five disciplines, one formation: moral courage, servant leadership, self-control, brotherhood and stewardship, practised daily with other men.

Poppins 400, 500, 600 · Real font weights · Fixed icon columns · Deliberate line measure

Display: Quantico
Text: Poppins
Files, one per weight: Quantico: 400, 700
Poppins: 400, 500, 600
WOFF and TTF, under the SIL Open Font License; licences sit beside the files.

Quantico declares and Poppins explains, from the site’s own files, at their real weights. The light mode and the interface geometry are authored extensions of the live brand.

05 · Cut from the same cloth

Thirty-two icons drawn from shared counter, terminal, angle and aperture rules, on a 24-unit field, with a hit area, a construction grid and a hidden type-reference layer that holds an O from the brand’s own face. They take the current text color, so one file serves both modes; the page draws them at 44px or larger wherever they can be pressed.

Across the brand · the same rules in email, social and the site

The interface rules leave the app: an email specimen, one headline test, the app entry on the marketing site. Then the campaign work the production case already carries.

Email specimen. A design specimen: the production version needs live text, responsive tables and a real preference footer. SVG

Headline test · one variable

A · Courage starts close.

B · Start where you stand.

A frames the strategic benefit; B makes the immediate experience clearer. This is a proposed test, not an observed result. Primary measure: qualified continuation to the next intended step. The plan

Email, from the case

The Dispatch programme is written outside this portfolio and installed verbatim on frontline21.com. The working library proposes a three-message structure for it, shown as structure.

Social, from the case

The four campaign films composed for the feed. The working library also proposes three controlled pairs; those stay hypotheses until a test is run.

Homepage

The live site. The app screens sit in the case study.

Visit frontline21.com

Films · complete, with captions

Every Era Calls Its Own Greatest Generation1:07

They did not know what history would call them.

Film file Captions (VTT)

Watch Every Era Calls Its Own Greatest Generation · the 9:16 cut

The Curse of Weak Men1:00

A weak man’s comfort is never free.

Film file Captions (VTT)

Watch The Curse of Weak Men · the 9:16 cut

The Gravity of Mediocrity1:00

The ever-present pull to settle for good enough.

Film file Captions (VTT)

Watch The Gravity of Mediocrity · the 9:16 cut

The Century Is Not Finished1:00

Every day, another reason to fear the future.

Film file Captions (VTT)

Watch The Century Is Not Finished · the 9:16 cut

Methods and downloads

The workflow

Direction. The strategic center in one sentence, the current brand read from its public site, the production case’s own colors and films as the standard that outranks any proposal.
Generation. Controls, compositions, icons, shapes and channel specimens drawn to the rules, in both modes, with the brand’s real font weights embedded.
Judgment. What did not argue for the center was cut. Established colors kept their production values; proposed extensions are labelled as such.
Construction. Layered SVG masters with named state groups, scoped references, construction grids and accessible titles; outlined and import-ready siblings for tools that substitute fonts.
Validation. Text-fit checks on every component, outlined renders compared with the editable sources, the compositions inspected, then the integrated pages checked here at four widths, both modes, keyboard and reduced motion.

Evidence

The package’s own checks (29 September 2026): every editable component file passed a text-fit check against its containing rectangle; the twenty outlined app screens differ from their editable renders by at most 0.863 on a 0 to 255 channel scale; 110 rendered compositions passed the canvas check; the five native previews ran their flows without errors at 320, 390, 768 and 1440px. What this page verified on its own: every file it references exists, the libraries open in place and on their own pages, the controls change state and mode, the lab validates, and the pages hold at the same four widths in both modes, from the keyboard and with motion reduced. What is not claimed: a usability study, an accessibility certification, a client review or any measured business outcome.

Editable sources

The whole library

Tokens (JSON) ·
Component manifest (JSON)
Source notes (README)
The site manifest (JSON): every library file with its size and hash, the path to each under assets/brand-systems/dcl/frontline21/.
Every control, screen, board, campaign specimen, icon, shape and font above downloads on its own.

What each folder holds

components/light, components/dark: fifty editable masters per mode, text live, six state groups, a construction grid.
outlined/: the same components, screens, boards and campaigns with the type frozen as paths, for tools that substitute fonts.
import-ready/: default-state, outlined snapshots for importers that ignore SVG state CSS.
screens/, boards/, campaigns/: the compositions, the category sheets and the brand-system board, the email, the headline pair and the app entry.
icons/, shapes/: thirty-two currentColor icons with construction layers; five shape primitives.
fonts/: one WOFF and TTF per weight, with the licences.

Fonts

Quantico: 400 WOFF TTF · 700 WOFF TTF · licence
Poppins: 400 WOFF TTF · 500 WOFF TTF · 600 WOFF TTF · licence

From the case study

The Frontline21 case study

Provenance

Owned brand, 2025 to 2026. The website is live; the app is a development prototype.

An owned brand. The website is live; the app is a development prototype. Practice states are illustrative and never score a man’s worth; no live integration is implied.

The shield paths, wordmark and print-density texture are the site’s original source artwork.

The interface library is the R4 brand-native package of 29 September 2026, which replaces the R3 package of the day before: real font weights instead of a static file declared as a range, the current brand read from each public site, outlined and import-ready siblings, shapes and channel specimens. Where a token names something the production case already fixes, the production value stands and is listed under Established.

Sources: Frontline21.

{
 "brand": {
  "id": "frontline21",
  "name": "Frontline21",
  "display": "Quantico",
  "body": "Poppins",
  "df": "quantico-bold",
  "bf": "poppins",
  "r": 2,
  "modeNames": [
   "Field Paper",
   "Night Stand"
  ],
  "accent": "#DC2227",
  "darkAccent": "#DC2227",
  "ink": "#121616",
  "paper": "#F4F5F4",
  "soft": "#E7EAE7",
  "dark": "#121616",
  "panel": "#1F2424",
  "line": "#C6CECA",
  "darkLine": "#343D3C",
  "muted": "#596461",
  "darkMuted": "#B8BEBE",
  "move": "Formation before failure.",
  "meaning": "The approved flat-top shield, shallow basal point and folded half shape commitments, selection and progress.",
  "cta": "Keep today’s line",
  "secondary": "Make it smaller",
  "nav": [
   "Today",
   "Daily Stand",
   "Growth",
   "Your Frontline"
  ],
  "label": "My daily practice",
  "value": "Read Scripture for 10 minutes",
  "helper": "Choose something you can keep today.",
  "item": "The Daily Stand",
  "person": "Jason Walker",
  "initials": "JW",
  "title": "Start where you stand.",
  "lead": "One reading. One practice. One kept line.",
  "row": [
   "Read the Daily Stand",
   "Lift or walk",
   "Read in your field"
  ],
  "action": "Open today’s reading",
  "tag": "Kept",
  "unit": "practices",
  "metric": "03",
  "progress": "Practice recorded",
  "option": [
   "Physical",
   "Mental",
   "Spiritual"
  ],
  "signature": "daily-stand",
  "fontNote": "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.",
  "top": "#DC2227",
  "bottom": "#B8191E",
  "motif": "The kept shield"
 },
 "modes": {
  "light": {
   "bg": "#F4F5F4",
   "panel": "#FFFFFF",
   "panel2": "#E7EAE7",
   "ink": "#121616",
   "muted": "#596461",
   "line": "#C6CECA",
   "accent": "#AF161C",
   "signal": "#DC2227",
   "button": "#DC2227",
   "on": "#FFFFFF",
   "success": "#236746",
   "error": "#B12424",
   "r": 2,
   "dark": false
  },
  "dark": {
   "bg": "#121616",
   "panel": "#1F2424",
   "panel2": "#121616",
   "ink": "#F4F5F4",
   "muted": "#B8BEBE",
   "line": "#343D3C",
   "accent": "#F4F5F4",
   "signal": "#DC2227",
   "button": "#DC2227",
   "on": "#FFFFFF",
   "success": "#84D5B4",
   "error": "#FFB6AD",
   "r": 2,
   "dark": true
  }
 },
 "minimumHitTarget": 44,
 "states": [
  "default",
  "hover",
  "focus",
  "active",
  "disabled",
  "loading"
 ],
 "material": {
  "top": "#DC2227",
  "bottom": "#B8191E",
  "meaning": "The kept shield"
 },
 "status": "Authored concept; current site evidence distinguished from proposed extensions."
}

The Frontline21 system

The center

What the system protects

What it refuses

App experience · The Daily Stand

Components · fifty, in both modes and six states

Actions 10

Navigation 10

Forms 13

Feedback 8

Content 6

Overlays 3

Try the controls

Start where you stand.

One view at a time.

Your context.

Practice recorded

Brand system · a shape has a reason, a color has a job

01 · Shape grammar

02 · Material and control

03 · The Color–Tone Continuum

The two modes

Field Paper

Night Stand

Established

04 · Typesetting

05 · Cut from the same cloth

Across the brand · the same rules in email, social and the site

Email, from the case

Social, from the case

Homepage

Films · complete, with captions

Methods and downloads

The workflow

Evidence

Editable sources

The whole library

What each folder holds

Fonts

From the case study

Provenance

Work that makes the customer the hero of the story.