Lesson 0006
No new vocabulary. Today you assemble five lessons of theory into one finished Holistics
explainer.
Build:
CRAP ·
Hierarchy ·
Typography ·
Colour
Vocabulary without composition is trivia. This lesson walks you through making a real diagram, one decision at a time. At each step: think, write your answer, reveal the canonical call.
You are on a discovery call with a non-technical prospect (a head of operations). They ask: “What is this semantic layer thing you keep mentioning?”
You share your screen and show one slide. They need to grasp the concept in ten seconds, before you have even finished your sentence. You have a max width of about 720px and one screen of vertical space.
The data flows: Database → Semantic Layer → Reports. The semantic layer holds models, metrics, and relationships. It is the new idea you are selling.
Here is the version your past self (or a junior teammate) would produce. Read it, then move on.
semantic layer overview
The semantic layer sits between the database and reports. It contains models, metrics, and relationships.
Three boxes, three competing colours, Times font, no focal point. Reader skims, learns nothing.
Now you rebuild it. Six steps.
Before you draw anything, decide: where should the eye land first? If the prospect only sees one thing on this slide, what must it be?
Focal point: the Semantic Layer box. Not the database (the prospect already knows what a database is), and not the reports (they already know reports).
The semantic layer is the new idea you are selling. Everything else is supporting context. If the eye lands anywhere else first, the slide has failed its job.
Where on the slide does the focal point go, and which scanning pattern will you design for? The flow is Database → Semantic Layer → Reports.
Z-pattern (sparse, single-screen). Focal box in the centre, flanked by the two supporting boxes. Left-to-right horizontal flow matches Western reading direction.
The eye sweeps top-left (eyebrow + title) then drops into the diagonal of the Z: Database, Semantic Layer (paused here because it is dominant), Reports. Layout matches the data flow direction, so no extra cognitive load.
What typeface family, and how many sizes in your scale? Justify each step.
One sans-serif (Inter or system-ui). A 4-step type scale.
Single typeface = repetition (CRAP). Four sizes = enough hierarchy to encode four roles. Avoid serif here because the diagram lives in a slide, viewed quickly.
How many colour families? What carries the brand, what carries the focal point, what carries everything else?
Two families: a neutral scale, and one accent (blue, the focal-point signal). No semantic colours needed here (no success / error states to convey).
n50 background, n200 border,
n600 body text, n800 labels.#eff6ff (accent-50) background, accent blue
600 2px border, accent text on the role label. Subtle blue shadow for lift.n400 (muted but visible).The accent appears only on the focal box. Everything else is quiet gray. That contrast is what creates the focal point. If the side boxes were also blue, the focal box would lose its meaning.
Run all four CRAP principles as a checklist on your draft. Where is each one doing its job?
Contrast: focal box larger (1.4fr vs 1fr in the grid), bolder border, brand colour against gray, larger title text. Contrast on every dimension.
Repetition: all three boxes share the same border radius, padding, role label style, and grid alignment. One typeface throughout. One ramp of grays. One accent.
Alignment: all three boxes top-aligned and equal-height (stretch). Role labels share a top edge. Body text shares a left edge. Title, lede, and diagram all share the page's left margin.
Proximity: inside each box, the role label sits close to its name; items sit close to each other but apart from the next group. Arrows separate boxes visually.
If any of the four had been missing, the slide would feel off even if the reader could not name why.
Reveal the result. Compare it to the starting point above.
Eye lands on the blue focal box first. Reads the role label, then the name, then the items. Walks left to read “Database”, walks right to read “Reports”. In ten seconds the prospect has the mental model: sources flow through a central definition layer into outputs. Job done.
Print this. Stick it next to your monitor. Run it before sharing any diagram.
Three variants of the same slide. Each violates exactly one principle. Identify which.
Variant A
Variant B
Variant C
For each variant: which single principle is violated, and how would you fix it?
Variant A: missing focal point (no hierarchy / no contrast). All three boxes identical. The eye has no entry point and the “new idea” vanishes into the list. Fix: make the Semantic Layer box larger and accent-coloured.
Variant B: too many accent colours (palette / contrast). Red + amber + green all shout. Nothing wins, and the semantic colours imply a meaning (error / warning / success) that is not there. Fix: one accent on the focal box, neutral on the rest.
Variant C: alignment broken. Boxes are different widths and don’t share a left edge. Even with a focal point and a clean palette, the slide reads as sloppy. Fix: equal-height boxes on a shared grid.
In real critique you will almost never see a slide with just one problem. But naming the worst one first lets you fix in priority order.
Synthesis exercise. Pick a Holistics concept you actually need to explain in your work this week (an AML model, a caching layer, a data permission flow, anything). Apply the six steps and the checklist. Sketch on paper or in Figma / slides. When done, share the result and I will critique it against the eight-point checklist.