AI Workflows and BrandingProtective LifeThe library

Protective Life

From preparing people for catastrophe to protecting the ordinary life already worth keeping.

The Protective Life system

Be the calm they carry.

The center

The parent is the calm the child carries. The brand does not sell fear of the worst day; it protects the ordinary life already worth keeping.

What the system protects

The violet and plum of the observed brand, warm paper, a nested protective form with an open threshold, and quiet negative space.

What it refuses

Catastrophe imagery, invented results and any suggestion of a client engagement.

App experience · The planning path

What moved: From a consequential category to one manageable, reversible next step.

A humanist sans on warm paper, the violet kept, shelter arcs and open thresholds on selected cards and actions. Planning in understandable steps.

Desktop · Open Morning

Phone · Open Morning

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 authored interface concept. No coverage, price, advice, eligibility or measured conversion is represented. The photograph is the public homepage’s brand image, placed as reference.

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, Open Morning Desktop, Evening Shelter Phone, Open Morning Phone, Evening Shelter 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
Your priorities	Saved	Today
People you care for	Saved	Today
Questions to ask	Saved	Today

Next step saved

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, Open Morning: shape grammar, material and control, the Color–Tone Continuum, typesetting and the icon family on one sheet. Download · Evening Shelter · outlined

01 · Shape grammar

Room to belong. Nested shelter arcs and an open threshold create a calm path through a consequential decision. 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 Open Morning.

01 · UnityA useful place to begin.Reassure before asking.
02 · Controlled varietySee what belongs together.Separate context and choice.
03 · Necessary activationSave my next stepOne 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 activationSave my next stepOne clear action, at the right time.

The two modes

Two paired modes, one hierarchy: the same information order in Open Morning and Evening Shelter. Where a token names something the production case already fixes, the production value stands and is listed under Established.

Open Morning

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

Evening Shelter

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

Established

Protective violetmeasured from the campaign artifacts
Deep plummeasured from the campaign artifacts
Warm papermeasured from the campaign artifacts

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

04 · Typesetting

Open Sans 700

Be the calm they carry.

Protect the ordinary life already worth keeping.

You have helped them prepare for their next chapter. Take a moment to review how life insurance fits into yours.

Open Sans 400, 600, 700 · Real font weights · Fixed icon columns · Deliberate line measure

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

Open Sans is the published fallback on protective.com and the face used here; FS Albert is licensed and not bundled. The earlier serif proposal is withdrawn.

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 · Be the calm they carry.

B · More room for life.

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 campaign study has no lifecycle sequence. The working library proposes a three-message system; it is shown as structure, not as sent mail.

Social and headline tests, from the case

Five controlled headline tests, A against B, one variable each. Proposed tests: hypotheses and intended measures, no results.

Test 01 · one variable

Test 02 · one variable

Test 03 · one variable

Test 04 · one variable

Test 05 · one variable

Homepage

The observed homepage is the starting point. The working library proposes a homepage system; it is shown as structure.

Films · complete, with captions

The Look0:16

You cannot take every step for them.

Film file Captions (VTT)

Bigger What Ifs0:16

Give their big ideas a little room.

Film file Captions (VTT)

The Opponent0:16

A plan for tomorrow.

Film file Captions (VTT)

Room to Grow0:16

New beginnings feel different when someone steady is beside you.

Film file Captions (VTT)

What They Carry0:17

Some things will not fit in a bag.

Film file Captions (VTT)

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/protective-life/.
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

Open Sans: 400 WOFF TTF · 600 WOFF TTF · 700 WOFF TTF · licence

From the case study

The Protective Life case study

Provenance

Campaign study, 2026. Films, headline tests and system by Jason Walker; the observed brand is the starting point.

An authored interface concept. No coverage, price, advice, eligibility or measured conversion is represented. The photograph is the public homepage’s brand image, placed as reference.

Protective’s public homepage was read for its violet, lavender and curved brand forms.

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: Protective Life.

{
 "brand": {
  "id": "protective-life",
  "name": "Protective Life",
  "display": "Open Sans",
  "body": "Open Sans",
  "df": "open-sans",
  "bf": "open-sans",
  "r": 16,
  "modeNames": [
   "Open Morning",
   "Evening Shelter"
  ],
  "accent": "#4C12A1",
  "darkAccent": "#C5A7F6",
  "ink": "#261738",
  "paper": "#F7F4FA",
  "soft": "#ECE4F5",
  "dark": "#1C1426",
  "panel": "#2B2038",
  "line": "#D6C8E4",
  "darkLine": "#5B476F",
  "muted": "#6A5A79",
  "darkMuted": "#C8B8D6",
  "move": "Be the calm they carry.",
  "meaning": "Nested shelter arcs and an open threshold create a calm path through a consequential decision.",
  "cta": "Save my next step",
  "secondary": "Explore options",
  "nav": [
   "Overview",
   "Your plan",
   "Resources",
   "Support"
  ],
  "label": "Plan name",
  "value": "The life we are building",
  "helper": "Choose a name that means something to you.",
  "item": "Family planning guide",
  "person": "Casey Brooks",
  "initials": "CB",
  "title": "Room for what matters.",
  "lead": "One thoughtful step at a time.",
  "row": [
   "Your priorities",
   "People you care for",
   "Questions to ask"
  ],
  "action": "Continue planning",
  "tag": "Saved",
  "unit": "steps",
  "metric": "03",
  "progress": "Next step saved",
  "option": [
   "Family priorities",
   "Questions for an adviser",
   "Resources to revisit"
  ],
  "signature": "planning-path",
  "fontNote": "Live site: FS Albert Bold / Open Sans with #4C12A1 violet and #7D55C7 lavender. Open Sans is the actual published fallback used here; licensed FS Albert is not redistributed. The earlier serif proposal has been removed.",
  "top": "#7850C1",
  "bottom": "#4C12A1",
  "motif": "Room to belong"
 },
 "modes": {
  "light": {
   "bg": "#F7F4FA",
   "panel": "#FFFFFF",
   "panel2": "#ECE4F5",
   "ink": "#261738",
   "muted": "#6A5A79",
   "line": "#D6C8E4",
   "accent": "#4C12A1",
   "signal": "#4C12A1",
   "button": "#4C12A1",
   "on": "#FFFFFF",
   "success": "#236746",
   "error": "#B12424",
   "r": 16,
   "dark": false
  },
  "dark": {
   "bg": "#1C1426",
   "panel": "#2B2038",
   "panel2": "#1C1426",
   "ink": "#F4F5F4",
   "muted": "#C8B8D6",
   "line": "#5B476F",
   "accent": "#C5A7F6",
   "signal": "#4C12A1",
   "button": "#4C12A1",
   "on": "#FFFFFF",
   "success": "#84D5B4",
   "error": "#FFB6AD",
   "r": 16,
   "dark": true
  }
 },
 "minimumHitTarget": 44,
 "states": [
  "default",
  "hover",
  "focus",
  "active",
  "disabled",
  "loading"
 ],
 "material": {
  "top": "#7850C1",
  "bottom": "#4C12A1",
  "meaning": "Room to belong"
 },
 "status": "Authored concept; current site evidence distinguished from proposed extensions."
}

The Protective Life system

The center

What the system protects

What it refuses

App experience · The planning path

Components · fifty, in both modes and six states

Actions 10

Navigation 10

Forms 13

Feedback 8

Content 6

Overlays 3

Try the controls

Room for what matters.

One view at a time.

Your context.

Next step saved

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

Open Morning

Evening Shelter

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 and headline tests, 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.