Every color, type size, shadow, and rule on this site, with the contrast ratios worked out in the open. Published because a design system you can't inspect is a mood board, and because the accessibility standard a site claims should be checkable.
This is the field journal of a learning designer who studies how humans actually change before she designs anything. The page is warm paper, not a screen: an off-white ground carrying a faint grain, the way a notebook page carries tooth. On top of it, two voices work in tension. Bauhaus Bool sets the display, lowercase and enormous, the confident hand lettering of someone who has an opinion. JetBrains Mono sets the chrome: field-note stamps, call numbers, specimen labels, timestamps. The mono is the anthropologist's marginalia, the evidence that the work was observed and catalogued, not asserted.
Work is filed, not displayed. Engagements carry call numbers. Lab experiments are specimens you power on in place. Color is used with discipline: paper and graphite carry the page, and the three brand colors arrive as signal on small percentages of any surface.
It rejects its neighbors on purpose. Not generic L&D. Not the AI-hype voice. Not the SaaS-cream portfolio. Not the hero-metric template. The proof is the work and the client list, framed as field evidence.
A warm-neutral paper system carrying three high-signal brand colors, used sparingly, on a graphite-and-lime backbone. Ratios below are WCAG contrast against the page ground and against graphite ink. AA means 4.5:1 or better for text at any size, AA large means 3:1 or better and is only allowed at 24px and up, or for non-text elements.
| swatch | token | role | on paper | on ink | where it lives |
|---|---|---|---|---|---|
signal lime#96e650 |
primary | 1.3:1fail | 9.6:1aaa | Confirmation and payoff. Button hover, logo accent, the live-specimen dot, the hero curtain bar. Never carries small text on paper. | |
field blue#03599b |
secondary | 6.3:1aa | 2.0:1fail | The credibility color. Italic emphasis, Action Mapping rungs, methodology labels, the wordmark. | |
field blue deep#024378 |
secondary · pressed | 8.8:1aaa | 1.5:1fail | Hover and pressed state for field blue. | |
editorial magenta#ec008c |
tertiary · display only | 3.7:1aa large | 3.5:1aa large | Links on hover, focus rings, the italic display payoff. Display sizes (24px and up) and true accents only. | |
magenta ink#bc006b |
tertiary · small text on light | 5.5:1aa | 2.4:1fail | Small magenta text on paper: kickers, captions, labels. | |
magenta lift#f24daf |
tertiary · small text on dark | 2.8:1fail | 4.5:1aa | Small magenta text on the dark bench panels. | |
blue lift#6fa3cc |
secondary · small text on dark | 2.3:1fail | 5.5:1aa | Small blue labels on the dark bench panels. | |
graphite ink#282828 |
neutral · text | 12.8:1aaa | same | Primary text, dark section grounds, resting fill of pill buttons. Not pure black. | |
ash gray#5c5c5c |
neutral · secondary text | 5.8:1aa | 2.2:1fail | Captions, metadata, placeholders. Deepened from #686868 to clear AA on paper. | |
hairline#d6d3cc |
neutral · rules | 1.3:1non-text | 9.9:1aaa | 1px rules, input borders, dashed dividers. Decorative, not text. | |
warm ash paper#f2efe8 |
neutral · ground | same | 12.8:1aaa | The page. Never #fff. Carries a faint multiply grain. | |
paper shadow#e8e3d8 |
neutral · recessed | 1.1:1non-text | 11.5:1aaa | Stat blocks, lab cards, inset surfaces one step below the page. | |
night ground#141414 |
neutral · deep ground | 16.0:1aaa | 1.2:1non-text | The bench and the darkest editorial blocks. | |
white#ffffff |
neutral · lifted | 1.1:1non-text | 14.7:1aaa | Only a focused input. A surface deliberately brighter than the page. |
ratios computed from the sRGB relative luminance formula in WCAG 2.2. paper ground #f2efe8 · ink #282828.
A geometric, almost cartoonishly confident display face against a clean humanist sans, with a technical monospace doing all the marginalia. Bauhaus Bool is loaded locally from a .woff. DM Sans and JetBrains Mono come from Google Fonts with system fallbacks.
adopt.
engagements. filed and catalogued.
inline stakeholder review system.
Most training measures completion. I measure change. Before I design anything, I watch what people actually do at work, then map every element back to a decision that matters.
specimen s.003 · ENG-APPLE001 · global supplier network · 2024
Surfaces are flat at rest and lift in response to hover or focus, never decoratively. Shadows are large in blur, negative in spread, low in alpha, so a lifted card reads as a physical object on paper catching diffuse light. Depth is also carried tonally: paper shadow recesses a panel without any shadow at all.
0 1px 3px rgba(0,0,0,.05), 0 10px 30px -16px rgba(40,40,40,.35)dossier cards and panels at rest0 1px 3px rgba(0,0,0,.05), 0 26px 50px -22px rgba(40,40,40,.45)the same card raised, with a 4px translate0 30px 70px -20px rgba(0,0,0,.55)the live specimen frame lifted off the dark bench0 40px 60px -30px rgba(3,89,155,.45)occasional brand-tinted throw under a hero surfaceEvery component below is the real CSS, operable on this page. Hover, tab through, type in the field.
Full pill. Graphite fill, paper text, DM Sans 600. Hover and focus flip to lime over 0.4s on the house ease; the arrow slides 4px. Keyboard focus adds a 2px magenta ring at 2px offset.
On the bench and dark panels the pill inverts to lime with graphite text, and hover lifts to white. Small lime text is allowed here because the ground is ink.
1px hairline border, square corners, paper ground, ash-gray placeholder. Focus shifts the border to magenta and lifts the ground to white. No glow.
10px corners, with the signature dog-ear variant (10px 10px 3px 10px) reading as a filed folder tab. Leads with a mono call number, a metadata line, then a lowercase title. Work is catalogued, not captioned.
Mono pills for stacks and tags. Mono stamp rows for specimen labels. Both are chrome, both stay small.
Everything moves on the same curve, an ease-out-expo family, so the site feels like one hand made it. Nothing loops, nothing bounces, numbers sit still. When a visitor asks for reduced motion, reveals resolve instantly and view transitions are disabled.
cubic-bezier(0.16, 1, 0.3, 1)Default easing for every state change and reveal.0.2sHovers, taps, the underline wipe.0.4sNav, panels, button color flips.0.6sEntrances and scroll reveals. The lime curtain bar lifting off the hero headline.The site targets WCAG 2.2 AA. The specific commitments, so you can hold it to them:
The system exists to make the work legible. The labs are where the components get powered on, the case studies are where they carry evidence.
go to the labs hello@caboodledesign.info