IncidentKit identity

01 · The mark

A dot over four blocks.

The dot is the incident: one round, warm point, the moment something happens. The blocks are everything that has to happen next. Stacked, they make the i in kit.

Construction

Units: a block is 10 tallFrom public/brand/glyph-ink.svg

Block	22 × 10, radius 3
Gap between blocks	3
Dot	⌀ 22 as wide as a block
Dot to the first block	6 two gaps
Height	77 3.5 widths
Clear space	22 on every side one block width

Round over square: one human event, held up by structure. The blocks are in the order the work happens, top to bottom. Nobody proves anything before it is reported.

On mistink, clay

On firmist, peach

On nightmist, peach

App iconmark.svg

One colourstamps, fax

Favicon cut16 px drawing

Clear spaceone block width

16

24

32

In the interface the mark stands alone at 16 to 32 px. Larger than that, use the wordmark. The mark is shown big only as the subject of motion, and in this book.

Sizes16 px is the favicon cut

02 · The reveal

It starts with a dot.

Something happens. Then four things have to. The mark holds all five, and when it opens, each block says what it is for.

Closed · the words are inside

Something happens.
A fall at 2:47 am. A wrong site caught at the time-out. A ladder that slipped. Round, warm and human: the one clay thing on the page.
Report it.
A text or a QR scan, in 90 seconds. Lauren drafts the report and the person who saw it signs it.
Investigate it.
Five whys and a decision, approved by the owner.
Close it.
An owner, a date, and proof it worked. It cannot close until the check passes.
Prove it.
A packet for the surveyor, the committee or the inspector, built from the record.

Four verbs, one object. Each line ends in it, and so does the name.

How it comes back into itself.

Six frames from the full arc, drawn by the same code that plays it.

0.26 sThe dot lands.
0.72 sEach block comes out of the one above it.
2.70 sEach word comes out of its block.
4.56 sThey go back in, Prove first.
5.50 sThe mark is whole again.
8.20 sIt becomes the i in kit. The dot ends the line.

03 · Wordmark

The i in kit is the mark.

Instrument Sans, lowercase, set at 100 units and drawn to outlines. Its x-height is 51, and the four blocks of the i fill it exactly.

Construction

Units: the wordmark is set at 100From public/brand/wordmark-ink-clay.svg

On mist · the headerink, clay

On fir · the footermist, peach

On nightmist, peach

One colourprint, stamps

Lockup · app icon and wordmarklockup-light.svg

Clear space	Half the x-height, 25.5, on every side
Smallest	88 px wide on screen, 22 mm in print
Name in text	IncidentKit one word, capital I and K
Never	Retyped in a font, recoloured, or with the dot moved

04 · Colour

Clay means open.

Fir is who we are. Mist is the page. Clay is an incident that is still open, and nothing else, so when it appears, it means something.

Mist 58 White 16 Ink 14 Fir 10

Share of a typical page. Clay stays under 1%: the dot, an open count, the marker on a live row.

In motion, clay is only the dot.

The words that come out of the blocks are ink, or mist on fir. Nothing else on a moving frame is clay.

Status changes on a chip.

When a record closes, its chip turns green. The dot never does: it is the logo, and the logo is always the open case.

On fir, swap two things.

Ink becomes mist and clay becomes peach. Clay on fir measures 2.28:1 and is never used.

Aa

Ink on mist15.97 · AAA

Aa

Body on mist8.41 · AAA

Aa

Mist on fir11.33 · AAA

Aa

Peach on fir6.92 · AA

Aa

Clay on mist4.96 · AA

Aa

Muted on mist4.72 · AA

Aa

Clay on fir2.28 · never

Aa

Muted on sunk4.33 · don't

05 · Type

One grotesque, one mono.

Instrument Sans says it. Geist Mono labels it: the ids, the times and the citations a surveyor will check.

Every incident, closed with proof.

Weight 600

Instrument Sans · 400 to 700

Aa

Headlines at 600, tracked in: −4.5% at display sizes, −2% at 18 px. Body at 400, 17 px on 1.6. Open Font License.

Geist Mono · 500

IK-0233

Ids, times, citations and the one eyebrow per sheet. Capitals, +10%, never below 11 px. Open Font License.

Figures

7:52

Times and counts are set in Geist Mono so columns line up: 7:52 am, 2:47 am, 41 seconds, 42 CFR 416.43.

DisplayClosed with proof600 · 0.94 · −4.8%

HeadingIt starts with a dot.600 · 1.0 · −4.2%

LedeStaff report in 90 seconds by text or QR code.400 · 20 / 1.5

BodyLauren drafts the report. A person signs it. The packet is built from the record.400 · 17 / 1.6

LabelIK-0233 · Oct 2 · 7:52 am · OR 2Mono 500 · 11–12 · +10% caps

Type in motionCap height equals block height

06 · Motion

It moves the way a record is kept.

In order, one step at a time, and it always finishes. Six moves make every animation in the system. Press any of them.

Land

The dot arrives from just above its place and stops. An incident happens.

420 ms · arrive · 18 units

Extend

Each block is pulled out of the one above it, Report first. The first comes out of the dot.

4 × 340 ms · 110 ms apart · arrive

Unfold

The stack opens, and each word slides out of its block. Nothing appears from nowhere.

520 ms move · 4 × 540 ms arrive

Fold

Each word goes back into its block, Prove first. The stack closes. The mark is whole.

4 × 380 ms leave · 480 ms move

Become

The mark changes shape, in place, into the i of kit. The word comes out of it, both ways.

760 ms move · 700 ms arrive

Stop

The dot lands one last time, as the full stop of the line. Nothing moves after it.

420 ms · arrive

Arrive · lands, extends, comes out.2, .7, .2, 1

Move · opens, travels, changes shape.65, 0, .25, 1

Leave · goes back in.55, 0, .8, .3

The dot begins or ends.

It is the first thing to move or the last thing to land. Never the middle.

Blocks keep their order.

Out top to bottom: Report, Investigate, Close, Prove. Back in bottom to top.

Words live in blocks.

A word comes out of its block and goes back into it. No fades from thin air.

It always finishes.

Every sequence ends with the mark whole, or with the line and its full stop.

Calm, not cute.

Nothing bounces, spins, scales up, blurs or glows. Straight lines and full stops.

Still is the default.

Reduced motion gets the last frame. So does anyone who switches motion off above.

The full arc · 8.2 s

07 · Intros and outros

Open on the dot. Close on the mark.

Five cuts cover every film, deck, launch and demo. Each starts and ends on a frame that would work as a still.

Intro · 3.6 s · 108 frames

Reveal

Opens an explainer. The mark arrives, then says what it means, and holds on the four words.

First frame: An empty field
Last frame: Open, four words

Outro · 3.6 s · 108 frames

Return

Closes an explainer. The words go back in, the mark is whole, and it becomes the i in kit.

First frame: Open, four words
Last frame: The wordmark

Intro · 1.5 s

Land

Video opens, app launch, the first frame of a page that loads.

Outro · 2.2 s

Full stop

The last line of a film or a deck. The dot is its period.

Sting · 1.3 s

Closed

The end of a demo, or the moment a record closes. Prove lands last.

Formats and safe areas.

16:9 · 1920 × 1080

1:1 · 1080

4:5 · 1080 × 1350

9:16 · 1080 × 1920

Safe area is 8% on every side, 14% top and bottom on 9:16 for the app's own interface. The camera frames the subject, never the format: switch formats on the motion sheet and the same sequence reframes itself.

Frame rate	30 fps for film, 60 on screen. Render from the timeline; never retime by hand.
Sound	None, or one soft tick when the dot lands. No whooshes.
Hold	1 s on the last frame before a cut to black
Surfaces	Mist, white or fir. On fir, ink becomes mist and the dot is peach.
Speed	As built. Never sped up to fit a slot; cut a move instead.
Films	Every cut on mist and fir, the full arc and the four explainers, rendered from this timeline: brand/identity/films. Re-render with export.mjs.

08 · Loader

The record builds while you wait.

The blocks fill in order and go back the other way. The dot lifts and lands again, and the next record starts. It never spins.

96

48

32

24 · min

The mark, uprightpages, panels, first load

96

48

On firmist, peach

The meter8 to 12 px, inline

Building packet · IK-0233

2 of 4 · Investigation

Progress 50%

Determinateeach block is a quarter of the work

Cycle	2.0 s, then again
Fill	120 ms a block, 160 ms apart, top first
Hold	540 ms with all four filled
Back	Bottom first, 80 ms apart
Dot	Lifts 4 units, lands in 200 ms
Smallest	24 px upright. Smaller, use the meter
Reduced motion	Still, faint blocks, and the word Loading beside it

In the product.

In a buttonthe label says what is happening

Opening IK-0871

Maple Court · 18 events

A record openingmark at 40 px

Open incidents and their stage
Record	Stage	Status
IK-0871		Investigating
IK-0233		2 actions open
IK-0412		Closed

A stage meterstill: it shows where a record is

<!-- ik-loader.css, then: -->
<svg class="ik-ldr" viewBox="37 9.5 22 77" role="img" aria-label="Loading">
  <circle class="d" cx="48" cy="20.5" r="11"/>
  <rect class="b" x="37" y="37.5" width="22" height="10" rx="3"/>  <!-- × 4: 37.5, 50.5, 63.5, 76.5 -->
  <g><rect class="f" … /></g>  <!-- the same four, for data-mode="det" -->
</svg>

<!-- known amount -->
<svg class="ik-ldr" data-mode="det" style="--p: .5" …>

Files

Plain CSS and SVG. No script, no library. The SVGs animate on their own wherever an image can go.

ik-loader.css ik-loader.svg ik-loader-on-fir.svg ik-meter.svg

09 · Explainers and use cases

One incident, told on the mark.

The dot is what happened, with a time and a place. Each block comes out with what the kit did. Then it all folds back, and the record is closed.

Sample record IK-0233 · Lakeside Surgical Center · synthetic data42 CFR 416.43

Writing one.

Every explainer is the same five lines. Most of the work is choosing them.

The dot line	A time, a place, what happened. Eight words at most.
Each block	One fact with a number, a role or a citation. Nine words at most.
Names	Roles, not people: the CNA, the foreman, the director of quality.
Lauren	She drafts and asks. A person signs, approves and closes.
Data	Sample records only, labelled synthetic. Never a real patient, room or date.
The end	Always the fold, then the lockup and the line with its full stop.

One story, four slides.

For a carousel or a story: the same explainer, stopped at its four best frames. Drawn live from the case above.

1 · The incident
2 · Reported
3 · All four stages
4 · Closed with proof

10 · Trust

Trust is shown, not claimed.

Buyers in healthcare and safety are trained to doubt. The brand earns trust the way a good record does: a time, a role, a citation and a signature, every time.

IK-0233 · Incident report · Lakeside Surgical Center

Drafted by: Lauren, from the reporter's texts 7:57 am
Reviewed and signed by: R. Nguyen, circulating RN 8:02 am
Routed to: Director of quality, P2 8:03 am

R. NguyenSigned · Oct 2 · append-only

A person signsLauren drafts. She never decides.

Oct 2 · 7:55Reported by text, in 2 minutes
7:57Lauren asked 3 follow-ups and drafted the record
8:02Reporter reviewed and signed
Oct 3 · 10:15Investigation approved by the director of quality
10:403 corrective actions assigned, with owners
Oct 8Old template retired, photo attached, verified
Nov 30Effectiveness check due. The record cannot close before it passes.

The audit trail, drawn with the mark's partsdot: the incident · block: a stage done

Security controls and their status
Append-only audit trail	Live
Read-only auditor access	Live
Six roles, each sees only what it needs	Live
Encrypted in transit and at rest by the host	Live
AI provider under a BAA, no training on your data	Regulated, Network
Single sign-on, SAML or OIDC	Network
SOC 2 audit	Being scoped · no report yet

Controls, stated plainlylive, on a plan, or not yet

Partner mark

Co-brandtheirs left, a hairline, ours

Sample records across four sites
Lakeside Surgical Center	IK-0233
Maple Court	IK-0871
Northfield	IK-0412
Ridgeline	IK-0560

One standard, every sitesample data

Never a badge we have not earned.

No seals, no shields, no certification logos until the report exists. There is no such thing as HIPAA certified.

Status on the same line.

If a control is on a plan, rolling out or planned, say so next to it. Never in a footnote.

A source for every rule.

Every regulatory claim carries its citation and a reviewed date: 42 CFR 416.43, F689, 29 CFR 1904.

Every text colour this book uses passes WCAG 2.2 AA; the two failing pairs on sheet 04 are there as warnings. Every animation stops for reduced motion, and the switch at the top turns it all off.

11 · Rules and files

Where it breaks.

Eight ways to lose what the mark means. Then the tokens, and every file in this book.

Don't bounce or squash the dot. It lands and stops.

Don't spin it. The loader fills; it never turns.

Don't fill out of order. Nobody proves before they report.

Don't fade words in from nowhere. They come out of a block.

Don't turn the dot green when a record closes. Change the chip.

Don't add a fifth block or a fifth word. There are four stages.

Don't use the dot as a bullet. Clay means one open incident.

Don't blur it, glow it or shade it. It is flat, always.

/* IncidentKit motion tokens · Rev A · ik-motion-tokens.css */
:root {
  /* curves */
  --ik-arrive: cubic-bezier(.2, .7, .2, 1);   /* lands, extends, comes out. The site's --ease-out. */
  --ik-move:   cubic-bezier(.65, 0, .25, 1);  /* opens, travels, changes shape */
  --ik-leave:  cubic-bezier(.55, 0, .8, .3);  /* goes back in */

  /* the moves */
  --ik-land: 420ms;      --ik-land-drop: 18;       /* units; a block is 10 */
  --ik-extend: 340ms;    --ik-extend-gap: 110ms;
  --ik-open: 520ms;      --ik-word: 540ms;         --ik-word-gap: 160ms;
  --ik-fold: 380ms;      --ik-fold-gap: 110ms;     --ik-close: 480ms;
  --ik-become: 760ms;    --ik-letters: 700ms;
  --ik-stop: 420ms;

  /* the loader */
  --ik-loop: 2000ms;     --ik-fill: 120ms;         --ik-fill-gap: 160ms;
}

Logo

wordmark-ink-clay.svg wordmark-cream-peach.svg wordmark-ink.svg lockup-light.svg lockup-dark.svg glyph-ink.svg glyph-cream.svg mark.svg favicon.svg

Motion

ik-intro.svg ik-intro-on-fir.svg ik-loader.svg ik-loader-on-fir.svg ik-meter.svg ik-loader.css ik-motion-tokens.css

Everything else, as files.

Logos as SVG, PNG, JPG and PDF, icons, GIFs, films, posters, stills, social images, palettes and fonts: over 200 files, with rules for which to use where. In the repo at brand/kit.

Download the brand kit

This book is built from parts. Sheets, styles and motion live in brand/identity/src; node brand/identity/build.mjs joins them into one page, with the palette read from the site and the logo read from its own files.

IncidentKit · Identity and motion

A dot over four blocks.

It starts with a dot.

Something happens.

Report it.

Investigate it.

Close it.

Prove it.

How it comes back into itself.

The i in kit is the mark.

Clay means open.

In motion, clay is only the dot.

Status changes on a chip.

On fir, swap two things.

One grotesque, one mono.

It moves the way a record is kept.

Land

Extend

Unfold

Fold

Become

Stop

The dot begins or ends.

Blocks keep their order.

Words live in blocks.

It always finishes.

Calm, not cute.

Still is the default.

Open on the dot. Close on the mark.

Reveal

Return

Land

Full stop

Closed

Formats and safe areas.

The record builds while you wait.

In the product.

One incident, told on the mark.

Writing one.

One story, four slides.

Trust is shown, not claimed.

Never a badge we have not earned.

Status on the same line.

A source for every rule.

Where it breaks.