Brand guidelines
Data
Numbers are where the firm proves its work, so every chart answers one question at a glance: a headline that states the answer, labeled axes, direct labels and a table behind it. The colors are the inks of a printed survey map, the forms are the firm's own, and underneath them sit the rules every good chart keeps. The charts on this page use example data.
01 · Color
Quiet color, used for emphasis.
A tonal family in the firm's own blues: Harbor leads, Tide supports it, Brass is the single accent, with Lagoon and Iris for a fourth and fifth voice, and Slate to carry everything that is not the story. Most exhibits use one ink, grey for the rest and the accent once. The order was searched and checked with the palette validator: every neighboring pair stays apart for color-blind readers (worst ΔE 13.1 light, 14.8 dark; target 8) and for normal vision (18.0, 18.1; floor 15), and every ink clears 3:1 on its card. The family is deliberately restrained, below the validator's saturation floor, as Primer's palette is. Never cycle the inks; a sixth series folds into Slate.
Light mode
1 · Harbor
#203761
The firm’s deep blue. Leads, and carries the story.
2 · Tide
#3977A8
Steel blue. The supporting series.
3 · Brass
#A38951
The accent. One thing per exhibit.
4 · Lagoon
#147175
Deep teal, for a fourth voice.
5 · Iris
#857FC3
The brand’s second voice.
Slate
#868DA6
Context. Everything not in focus.
Dark mode
1 · Harbor
#ACC5F2
The firm’s deep blue. Leads, and carries the story.
2 · Tide
#5685AD
Steel blue. The supporting series.
3 · Brass
#D5BA82
The accent. One thing per exhibit.
4 · Lagoon
#528B8E
Deep teal, for a fourth voice.
5 · Iris
#A6A1E7
The brand’s second voice.
Slate
#7F87A8
Context. Everything not in focus.
Elevation · one hue
Low ground to high, for amounts: Sky 400 to 900, so the lowest step still shows on white. Behind marks, the paler tints (Sky 50 to 300) shade ground, as hypsometric tints do on a map.
Datum · above and below
Change against a baseline, as maps show height and depth: Brass on one side, Tide blue on the other, grey at the datum. Equal steps each way.
Status · reserved
- On track
- Needs attention
- Blocked
Never a series color, never alone: always an icon and a word.
Color is for emphasis
- Slate carries the context: every series that is not the story.
- One ink (usually Harbor) carries the story.
- Brass marks the one exception, and the firm's callout points at the one thing to read: a thin ring on the datum and a hairline leader at the tilt of the mark's own ring.
- Two or more series that must be told apart use the inks in order, with a legend and direct labels.
02 · Forms
One question, one form.
Every chart here is built to answer a single question in a glance: a headline that states the answer, axes with units, labels on the marks that matter, the inks in their fixed order, a value on hover and the numbers behind it. Press Replay to watch one draw.
Change over time
Change over time
Cases closed per month rose from 18 to 61
Cases closed per month against a target of 50
| Month | Cases closed |
|---|---|
| Oct | 18 |
| Nov | 22 |
| Dec | 21 |
| Jan | 27 |
| Feb | 33 |
| Mar | 31 |
| Apr | 38 |
| May | 46 |
| Jun | 44 |
| Jul | 52 |
| Aug | 57 |
| Sep | 61 |
Source: example data
Change over time
A third of logged hours were waste: 340 of 1,000
Hours per month, from logged to mission work
| Step | Hours |
|---|---|
| Hours logged | 1000 |
| Rework | −140 |
| Waiting | −110 |
| Duplicate steps | −90 |
| On mission work | 660 |
Source: example data
Change over time
Review time fell furthest: 22 hours to 12
Hours per task, before and after the redesign
| Stage | Before (hours) | After (hours) | Change |
|---|---|---|---|
| Intake | 14 | 9 | -5 |
| Review | 22 | 12 | -10 |
| Delivery | 18 | 15 | -3 |
| Reporting | 11 | 5 | -6 |
Source: example data
Against a plan or a target
Against a plan or target
Handover landed on plan, with two milestones late
Planned against delivered week, by milestone
| Milestone | Planned week | Delivered week | Result |
|---|---|---|---|
| Discovery | 2 | 2 | On plan |
| Blueprint | 5 | 6 | 1 week late |
| Pilot | 9 | 8.5 | 0.5 weeks early |
| Rollout | 13 | 14.5 | 1.5 weeks late |
| Handover | 16 | 16 | On plan |
Source: example data
Against a plan or target
Only fixed scope work misses the 14 day target
Working days to first deliverable, by engagement type
| Engagement | Days | Against target |
|---|---|---|
| Advisory | 6 | Within target |
| Embedded team | 9 | Within target |
| Outcome-based | 14 | Within target |
| Fixed scope | 21 | 7 over |
Source: example data
Against a plan or target
On-time delivery is closest to target, at 88%
Progress toward each goal, as a share of target
| Goal | Share of target |
|---|---|
| On-time delivery | 88% |
| Waste removed | 72% |
| Hours returned | 54% |
Source: example data
Parts of a whole, and where things go
Parts of a whole
Two thirds of intake hours reach delivery
Where 100 hours of intake end up
| Outcome | Hours of 100 |
|---|---|
| Delivered | 66 |
| Rework | 18 |
| Waiting | 16 |
Source: example data
Parts of a whole
Larger programs spend more of their hours on delivery
Share of hours by phase; column width is program size
| Program | Hours | Make it happen (%) | Build the blueprint (%) | Listen first (%) |
|---|---|---|---|---|
| Program one | 1,020 | 63 | 25 | 12 |
| Program two | 760 | 55 | 30 | 15 |
| Program three | 540 | 48 | 32 | 20 |
Source: example data
Parts of a whole
Advisory is the largest share of hours, at 42%
Share of hours by service
| Service | Share of hours |
|---|---|
| Advisory | 42% |
| Embedded teams | 28% |
| Training | 18% |
| Assessments | 12% |
Source: example data
Parts of a whole
Thursday requests peak at 3 pm, nearly double the usual
Requests received per hour, Thursday against the average of other days
| Hour | Thursday | Average of other days |
|---|---|---|
| 8 am | 4 | 3 |
| 9 am | 9 | 7 |
| 10 am | 15 | 11 |
| 11 am | 19 | 14 |
| 12 pm | 21 | 15 |
| 1 pm | 17 | 13 |
| 2 pm | 24 | 18 |
| 3 pm | 52 | 27 |
| 4 pm | 41 | 30 |
| 5 pm | 19 | 24 |
| 6 pm | 7 | 12 |
Source: example data
Choosing what to do, and when
Choosing what to do
Start with the review checklist: high impact for low effort
Seven improvements by effort and impact; bubble size is hours returned per month
| Improvement | Effort (0 to 10) | Impact (0 to 10) | Hours returned per month |
|---|---|---|---|
| Review checklist | 2.2 | 8.4 | 180 |
| Intake form | 3.6 | 6.6 | 120 |
| Status meeting cut | 1.5 | 5.5 | 60 |
| Reporting automation | 7.4 | 8.1 | 240 |
| Training program | 6.3 | 6 | 150 |
| System migration | 8.7 | 4 | 90 |
| Vendor consolidation | 4.4 | 2.6 | 40 |
Source: example data
Choosing what to do
Train cannot start until Build is half done
Workstreams by month, with progress to today
| Workstream | Starts (month) | Ends (month) | Done by today |
|---|---|---|---|
| Assess | 0 | 2.5 | 100% |
| Design | 1.5 | 5 | 100% |
| Build | 3.5 | 8.5 | 56% |
| Train | 7 | 10.5 | 0% |
| Launch | 9.5 | 12 | 0% |
Source: example data
Which form
- How a number moved: the trend, with the target and the moments that explain it.
- Before and after: the slope. What was taken out of a total: the waterfall.
- Plan against delivery: the dumbbell. One value against one target: the target bars. Progress to a goal: the thin progress bars.
- Where a whole went: the flow, the Marimekko or the single stacked bar. When something happens: the hourly profile.
- What to do first: the priority matrix. When it happens and where it stands: the roadmap.
Always on a chart
- A headline that says what the data shows, not what the chart is.
- Labeled axes with units, and a note saying what is measured.
- A legend for two or more series, plus direct labels where they fit.
- Hover for exact values, and the numbers behind it.
Ours alone
- These colors and forms belong to Intertwine Associates. The other Intertwine companies have their own; never borrow theirs or lend these.
- On the public site, a graphic shows structure and process, never figures the page does not state.
03 · Anatomy
Thin marks, quiet axes, labels where they help.
Hover a chart for exact values, or switch it to a table. Example data.
The basics
Hours returned to mission work
Per month, three example engagements
| Month | Agency A | Institute B | Lab C |
|---|---|---|---|
| Jan | 12 | 8 | 4 |
| Feb | 18 | 10 | 6 |
| Mar | 26 | 15 | 9 |
| Apr | 31 | 22 | 12 |
| May | 40 | 24 | 18 |
| Jun | 46 | 30 | 20 |
| Jul | 52 | 35 | 23 |
| Aug | 58 | 37 | 27 |
| Sep | 61 | 44 | 29 |
| Oct | 66 | 48 | 33 |
| Nov | 70 | 51 | 36 |
| Dec | 74 | 55 | 38 |
Source: example data
The basics
Time to first deliverable
Working days, by engagement type
- Embedded team9 d
- Outcome-based14 d
- Fixed scope21 d
- Advisory6 d
| Item | Value |
|---|---|
| Embedded team | 9 |
| Outcome-based | 14 |
| Fixed scope | 21 |
| Advisory | 6 |
Source: example data
The basics
Where the hours went
Share of hours by phase, two example programs
Program one1,020
Program two920
| Group | Listen first | Build the blueprint | Make it happen |
|---|---|---|---|
| Program one | 120 | 260 | 640 |
| Program two | 90 | 310 | 520 |
Source: example data
Efficiency target
40%
Hours returned
1,284
Open actions
12
Programs
3 to 12 mo.
04 · Figures
Every figure is signed.
Each figure sits in one frame: a label above (the kind of question it answers, with the mark and the firm's name at its right), and a very thin box around the title, legend, chart and source. The text inside is set in IBM Plex Sans Condensed, a narrow, plain face with tabular numerals, so figures read as figures and look different from the Satoshi text around them. Axis labels, legends, notes and values are print: full black in light, full white in dark.
The label
Small capitals above the box: the group, such as HOW WE DELIVER, and the mark at the right, every time. Figures are named by their group, not numbered.
The frame
A single 1px rule in the figure rule color with square corners. The source sits at its foot in small print, with no rule above it, on every figure, in every size.
The print
One text color for everything that is read: titles, axis labels, legends, notes, values. Marks carry the color; the words never do. Context grey is for marks only.
05 · Rules
What every chart does.
Always
- Pick the form for the job: a number gets a stat tile, change over time a line, comparison a bar.
- Every figure is numbered, labeled above, and boxed in the hairline frame with the mark and the firm's name. The graphics on the site's own pages use the same frame.
- Bars start at zero, square-ended and slim; touching marks keep a 2px gap.
- Lines under 2px; end markers small and flat, no ring.
- Axis labels, legends, notes and values in full black on light and full white on dark; gridlines are hairlines, solid, and few.
- A legend for two or more series, plus a direct label at the end of each line.
- Values in print, never in the series color; every figure word and number set in the data face, tabular.
- A hover tooltip and a table view behind every chart.
Never
- Two y-axes on one chart. Use two charts, or index both to a common start.
- Red and green for bad and good, or amber for anything but a warning.
- Pies, donuts, 3D, gradients or shadows on marks.
- A number on every point, or a label clipped by its own bar.
- Colors that change when a filter changes; a series keeps its color.
- A chart where a sentence would do.
