AI Workflows and BrandingOnebriefThe library

Onebrief

From another operational dashboard to one shared now across the force.

The Onebrief system

Light, not paint.

The center

Every team sees the same picture at the same moment. The brand never shows a dashboard as the hero; it shows the decision reaching the people who carry it out.

What the system protects

Operational clarity. The campaign states in Big Shoulders capitals and reads in Archivo; the website and the product set Archivo alone, across its widths. Onebrief blue marks what you can act on, and a change arrives as light with its revision named.

What it refuses

Giant monitors, repeated running footage, artificial slow motion and the obsolete layered interface.

App experience · The shared board

What moved: From colour as decoration to light as meaning: what needs you is brightest, and it is named in words.

One hue, a cool neutral room and a ladder of light from dormant to signal. Category is type and position; change is a pass of blue light with its revision named; focus is depth. Classification banners and MIL-STD-2525 symbol fills are kept as the standards they are.

Desktop · Shared Day

Phone · Shared Day

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, independent of the Onebrief product and not validated with its users. Plan content is Onebrief’s published notional sample; names and revisions are sample data. Not presented as standards-compliant.

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, Shared Day Desktop, Command Night Phone, Shared Day Phone, Command Night 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
Endstate	Changed	Today
Over-flight rights	Changed	Today
Roles and responsibilities	Changed	Today

Shared revision 044

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, Shared Day: shape grammar, material and control, the Color–Tone Continuum, typesetting and the icon family on one sheet. Download · Command Night · outlined

01 · Shape grammar

Light, not paint. One hue, a cool neutral room and a ladder of light: the more something needs you, the brighter it is. Category is type and position; change is a pass of light; focus is depth. 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 Shared Day.

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

The two modes

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

Shared Day

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

Command Night

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

Established

Nightthe website ground
Paperthe website ink and paper pages
Onebrief blueOnebrief’s published primary: act here
Graythe quiet measure
Registration redwebsite motion only, never at rest
Registration bluewebsite motion only, never at rest

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

04 · Typesetting

Archivo ExtraCondensed 800

One shared now.

One change. Every team. One shared now.

Onebrief keeps the plan, the timeline and the brief in sync, so a decision moves through the force as one picture.

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

Display: Archivo ExtraCondensed
Text: Archivo
Files, one per weight: Archivo ExtraCondensed: 800
Archivo: 400, 500, 600, 700
Archivo Condensed: 700
Archivo SemiCondensed: 600, 700
WOFF and TTF, under the SIL Open Font License; licences sit beside the files.

Archivo (Omnibus-Type, SIL OFL 1.1) across its width axis: ExtraCondensed for numerals and the titles that carry a view, Condensed for view titles, SemiCondensed for headings and labels, normal width for reading. Onebrief’s site sets Space Grotesk and Inter; the concept proposes Archivo for brand and product and does not claim to be the product.

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 ·

B ·

Primary measure: qualified continuation to the next intended step. The plan

Email, from the case

Three live emails from the campaign, one message each: the shared update, the command workflow, the next conversation.

01 / The shared updateOne change should not become three versions View email

02 / The command workflowBefore the decision, prepare the possibilities View email

03 / The next conversationBring the update your team keeps rebuilding View email

Social, from the case

Four campaign executions. The working library also proposes three controlled headline pairs; those stay hypotheses until a test is run.

Homepage

Two working homepages in the new system. One shared now opens on the film and keeps the Plan, Timeline and Brief demonstration; Superhuman command wins leads with the command platform.

Explore One shared now Explore Superhuman command wins

Films · complete, with captions

One Shared Now1:00

When the situation changes, the mission cannot wait.

Film file Captions (VTT)

Watch One Shared Now · the 9:16 cut

The Update0:30

A small time change reveals the value of shared information.

Film file Captions (VTT)

Watch The Update · the 9:16 cut

Before the Decision0:25

Planning, AI and simulation in the command workflow.

Film file Captions (VTT)

Watch Before the Decision · the 9:16 cut

Same Room. Shared Picture.0:15

A team can share a room and still have a different picture.

Film file Captions (VTT)

Watch Same Room. Shared Picture. · 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 (1 October 2026): all one hundred editable component masters carry the six state groups; the 122 outlined files (components, screens, boards and campaigns) differ from their editable renders by at most 2.02 on a 0 to 255 channel scale, the anti-aliasing of the same glyphs; the two app screens per mode were checked for card text running past its card. 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, standards compliance 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/onebrief/.
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

Archivo ExtraCondensed: 800 WOFF TTF · licence
Archivo: 400 WOFF TTF · 500 WOFF TTF · 600 WOFF TTF · 700 WOFF TTF · licence
Archivo Condensed: 700 WOFF TTF · licence
Archivo SemiCondensed: 600 WOFF TTF · 700 WOFF TTF · licence

From the case study

Provenance

Concept campaign, 2026. The brand film is the approved R10 cut; the library is reconciled with the production case.

Onebrief’s public site and published product imagery were read for the blue, the Card structure and the views; nothing private was accessed.

The interface library is the R5 package of 1 October 2026, Light, not paint, which replaces Onebrief’s R4 library of 29 September: Archivo across its width axis at real weights, one hue and a ladder of light in place of the amber change state, the board, map and brief built from Onebrief’s published notional plan, 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: Onebrief.

{
 "brand": {
  "id": "onebrief",
  "name": "Onebrief",
  "display": "Archivo ExtraCondensed",
  "body": "Archivo",
  "df": "archivo-extracondensed",
  "bf": "archivo",
  "r": 4,
  "modeNames": [
   "Shared Day",
   "Command Night"
  ],
  "accent": "#019EFF",
  "darkAccent": "#019EFF",
  "ink": "#081018",
  "paper": "#F5F7F9",
  "soft": "#EDF1F4",
  "dark": "#04090E",
  "panel": "#101820",
  "line": "#D2D8DE",
  "darkLine": "#2B343D",
  "muted": "#575F66",
  "darkMuted": "#9FA5AC",
  "move": "Light, not paint.",
  "meaning": "One hue, a cool neutral room and a ladder of light: the more something needs you, the brighter it is. Category is type and position; change is a pass of light; focus is depth.",
  "cta": "Push the update",
  "secondary": "Review the change",
  "nav": [
   "Board",
   "Map",
   "Timeline",
   "Brief"
  ],
  "label": "Plan",
  "value": "CONPLAN JTF 505",
  "helper": "Every product reads from this plan.",
  "item": "Problem framing",
  "person": "D. Brooks",
  "initials": "DB",
  "title": "Every staff. One current picture.",
  "lead": "The next call stays in view.",
  "row": [
   "Endstate",
   "Over-flight rights",
   "Roles and responsibilities"
  ],
  "action": "Open the card",
  "tag": "Changed",
  "unit": "cards",
  "metric": "044",
  "progress": "Shared revision 044",
  "option": [
   "Current revision",
   "Proposed change",
   "Superseded"
  ],
  "signature": "light-ladder",
  "motif": "Light, not paint",
  "fontNote": "Archivo (Omnibus-Type, SIL OFL 1.1), one variable family used across its width axis: ExtraCondensed for numerals and titles that carry a view, Condensed for view titles, SemiCondensed for headings and labels, normal width for reading. Onebrief’s site sets Space Grotesk and Inter; this concept proposes Archivo for brand and product. It is not the current Onebrief product.",
  "top": "#5CB3FE",
  "bottom": "#0085D8"
 },
 "modes": {
  "light": {
   "bg": "#F5F7F9",
   "panel": "#FFFFFF",
   "panel2": "#EDF1F4",
   "ink": "#081018",
   "muted": "#575F66",
   "line": "#D2D8DE",
   "accent": "#0067A9",
   "signal": "#019EFF",
   "button": "#019EFF",
   "on": "#030E19",
   "success": "#081018",
   "error": "#D7263D",
   "r": 4,
   "dark": false
  },
  "dark": {
   "bg": "#04090E",
   "panel": "#101820",
   "panel2": "#080F16",
   "ink": "#F5F7F9",
   "muted": "#9FA5AC",
   "line": "#2B343D",
   "accent": "#76BEFF",
   "signal": "#019EFF",
   "button": "#019EFF",
   "on": "#030E19",
   "success": "#F5F7F9",
   "error": "#FF4D4F",
   "r": 4,
   "dark": true
  }
 },
 "minimumHitTarget": 44,
 "states": [
  "default",
  "hover",
  "focus",
  "active",
  "disabled",
  "loading"
 ],
 "material": {
  "top": "#5CB3FE",
  "bottom": "#0085D8",
  "meaning": "Signal light: the one next action"
 },
 "status": "Authored concept (R5, 1 October 2026), not the current Onebrief product. Sample data from Onebrief’s published notional plan.",
 "r5": {
  "blue": {
   "50": "#F0F8FF",
   "100": "#DCEEFF",
   "200": "#B7DCFF",
   "300": "#8CC7FE",
   "400": "#5CB3FE",
   "500": "#019EFF",
   "600": "#0085D8",
   "700": "#0B6DB0",
   "800": "#025389",
   "900": "#033A62",
   "950": "#01233F"
  },
  "night": {
   "ground": "#04090E",
   "base": "#080F16",
   "surface": "#101820",
   "raised": "#18222B",
   "lifted": "#212B36",
   "line": "#2B343D",
   "line-2": "#3F4952",
   "text-dim": "#7E868D",
   "text-rest": "#9FA5AC",
   "text-read": "#CDD2D6",
   "text-full": "#F5F7F9",
   "signal": "#019EFF",
   "signal-text": "#76BEFF",
   "signal-deep": "#023052",
   "on-signal": "#030E19",
   "hostile": "#FF4D4F",
   "classif-u": "#007A33",
   "warn": "#CDD2D6"
  },
  "day": {
   "ground": "#F5F7F9",
   "base": "#EDF1F4",
   "surface": "#FFFFFF",
   "raised": "#FFFFFF",
   "lifted": "#FFFFFF",
   "line": "#D2D8DE",
   "line-2": "#B8BFC5",
   "text-dim": "#70777E",
   "text-rest": "#575F66",
   "text-read": "#272F37",
   "text-full": "#081018",
   "signal": "#019EFF",
   "signal-text": "#0067A9",
   "signal-deep": "#E2F1FF",
   "on-signal": "#030E19",
   "hostile": "#D7263D",
   "classif-u": "#007A33",
   "warn": "#081018"
  },
  "type": {
   "family": "Archivo",
   "display": {
    "wdth": 62,
    "wght": 820,
    "use": "numerals and titles that carry a screen"
   },
   "title": {
    "wdth": 74,
    "wght": 700,
    "size": 22,
    "line": 26,
    "use": "view titles"
   },
   "heading": {
    "wdth": 86,
    "wght": 650,
    "size": 15,
    "line": 20,
    "use": "list and panel headings"
   },
   "body": {
    "wdth": 100,
    "wght": 450,
    "size": 14,
    "line": 20,
    "use": "card text, fields"
   },
   "small": {
    "wdth": 100,
    "wght": 450,
    "size": 12.5,
    "line": 17,
    "use": "metadata"
   },
   "label": {
    "wdth": 86,
    "wght": 620,
    "size": 11,
    "line": 14,
    "track": "0.09em",
    "case": "upper",
    "use": "labels, codes, states"
   },
   "figures": "tabular lining in every number",
   "faces": [
    {
     "family": "Archivo ExtraCondensed",
     "weight": 800,
     "wdth": 62,
     "file": "archivo-extracondensed-800"
    },
    {
     "family": "Archivo Condensed",
     "weight": 700,
     "wdth": 75,
     "file": "archivo-condensed-700"
    },
    {
     "family": "Archivo SemiCondensed",
     "weight": 600,
     "wdth": 87.5,
     "file": "archivo-semicondensed-600"
    },
    {
     "family": "Archivo SemiCondensed",
     "weight": 700,
     "wdth": 87.5,
     "file": "archivo-semicondensed-700"
    },
    {
     "family": "Archivo",
     "weight": 400,
     "wdth": 100,
     "file": "archivo-400"
    },
    {
     "family": "Archivo",
     "weight": 500,
     "wdth": 100,
     "file": "archivo-500"
    },
    {
     "family": "Archivo",
     "weight": 600,
     "wdth": 100,
     "file": "archivo-600"
    },
    {
     "family": "Archivo",
     "weight": 700,
     "wdth": 100,
     "file": "archivo-700"
    }
   ]
  },
  "space": [
   2,
   4,
   8,
   12,
   16,
   20,
   24,
   32,
   40,
   48,
   64
  ],
  "radius": {
   "control": 4,
   "card": 6,
   "panel": 8,
   "dialog": 10
  },
  "light": {
   "edge": "a 1px border that is brighter on the top-left edge (gradient 135deg, 0.16 to 0.04 white)",
   "lamp": "a radial pool of signal light behind the item in focus (signal at 0.18, 60% radius)",
   "sweep": "a single 1.2s pass of light along a changed edge, then rest",
   "breath": "presence: 2.4s opacity 0.55 to 1, never on more than one element per region",
   "depth": {
    "base": 0,
    "surface": 1,
    "raised": 2,
    "lifted": 3,
    "overlay": 4
   }
  },
  "ladder": [
   {
    "level": "dormant",
    "token": "text-dim",
    "means": "Archived, superseded, out of the current revision"
   },
   {
    "level": "resting",
    "token": "text-rest",
    "means": "Current, nothing asked of you"
   },
   {
    "level": "reading",
    "token": "text-read",
    "means": "The text you are working in"
   },
   {
    "level": "active",
    "token": "text-full",
    "means": "Changed, assigned to you, or the decision itself"
   },
   {
    "level": "signal",
    "token": "signal",
    "means": "Act here: the one next action, focus, a live change"
   }
  ],
  "categories": [
   {
    "code": "PL",
    "name": "Planning considerations"
   },
   {
    "code": "PO",
    "name": "Political"
   },
   {
    "code": "MI",
    "name": "Military"
   },
   {
    "code": "EC",
    "name": "Economic"
   },
   {
    "code": "SO",
    "name": "Social"
   },
   {
    "code": "IN",
    "name": "Information"
   },
   {
    "code": "IF",
    "name": "Infrastructure"
   }
  ],
  "standards": {
   "classification": "CAPCO banner colours are kept as specified (UNCLASSIFIED green #007A33).",
   "map": "MIL-STD-2525 affiliation colours are kept on map symbology; hostile red is the only loud hue."
  }
 }
}

The Onebrief system

The center

What the system protects

What it refuses

App experience · The shared board

Components · fifty, in both modes and six states

Actions 10

Navigation 10

Forms 13

Feedback 8

Content 6

Overlays 3

Try the controls

Every staff. One current picture.

One view at a time.

Your context.

Shared revision 044

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

Shared Day

Command Night

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.