Jakob Maul
The canonical visual reference for The Missing Link — Jakob Maul's consulting practice at the intersection of human, organisation and technology. Six sections move from atomic tokens through to full templates. Full decision documentation lives in DESIGN.md.
DM Serif Display · Rowan · Geist Mono · Accent #C06A3A · Forest #283832 · Beige #F2EDE3
Foundations
The atomic building blocks of the brand. Color, type, scale, geometric language, motion — everything that is composed elsewhere is defined here.
Color Tokens
Brand · text roles · WCAG-verified--ink for reading text, --ink-muted for secondary text (AA), --ink-faint for decorative graphic elements only. Use --accent-text #A04E22 wherever accent appears as text on beige; reserve --w-accent #C06A3A for ornament, rules, and large italic display words.
Typography Stack
3 typefaces · DM Serif Display + Rowan + Geist Monoss01/ss02/ss03/dlig active globally. Geist Mono carries labels, numbers, and UI. Italic accent words always render in --w-accent.
Type Scale
11 roles · each with a single use caseIconography
Interlock diagram · sector symbols · data marksHover the diagram — the missing link closes
Sector symbols for cases & stats
Geometric outline, non-illustrative. Sits above each case tile.
Square with diagonal.
Circle with vertical line.
Motion Tokens
Easing · durations · no bouncy animationsscaleX(0) to scaleX(1) with transform-origin: left center.▸ shifts 4px right on hover over Inquire CTAs. Micro-feedback without drama.Layout
The persistent chrome of the page — what sits above every component and template, shaping the experience before any content arrives.
Sidebar Architecture
Hover expand · initials → wordmark · contact details belowHover the sidebar — rail expands from 64px to 180px
Vienna · Zurich
hi@jakobmaul.eu
in/jakobmaul
Mobile Top Bar
Sidebar replaced by a 64px top bar with JM + MENUTechnique alone rarely settles it.
Structures for teams that have to translate between human organisation and technological imperative.
Default · 64px Top Bar with JM + MENU
Active · Menu Overlay
--w-forest. "JM" sits on the left in DM Serif Display 22px, the burger (3-line icon + "MENU" in Geist Mono uppercase) on the right. Tap target 28×28. On tap a full-screen overlay in --w-forest fades in (320ms): four nav items in DM Serif Display 32–48px, the active item italic in --w-accent. Tap target ≥56px per item. Language toggle and direct contacts at the bottom.
Components
The reusable blocks composed into templates. Each component carries its own behaviour spec and can be tested independently.
Intervention Card
Three tiers · Strategic featured in Forest with dog-earFocused
A single workshop or short, precise intervention.
- Conflict mediation
- Post-mortem moderation
- Executive 1:1 audit
Strategic
A structured programme over several months for durable shifts.
- Monthly executive coaching
- Quarterly alignment workshops
- Direct advisory access
- Org-structure audits
Intensive
Long-term mandate or interim leadership.
- Interim Head of Culture
- Embedded leadership
- Crisis support with high availability
Inquiry Form · Preferred Format
Body-rule marker · echoes the body-text rule pattern--w-accent and the name switches to DM Serif Display 19px in --accent-text (sentence case, letter-spacing: -0.005em). Reads as an architectural marker, not a form widget.
Availability Banner
Renders only when slots are actually openStats Strip
4-cell grid · sector symbol + number + label per cellProcess Strip
Four phases: diagnostic → alignment → intervention → handoverPrinciples
At least three statements · numbered Principle I/II/IIIFeatured Case
Donut chart · arc-end triangle marker · centered labelPost-Merger Leadership Alignment
Following a rapid acquisition, distinct engineering cultures clashed, resulting in delivery paralysis. Through a 6-month intensive moderation and executive coaching mandate, established a unified governance board.
Pull Quote
One strong sentence in italic body · max. once per sectionKicker & Volume Tag
Editorial framing devices: kicker above heading, volume tag in marginThe Interlock of interfaces
A small tag in the outer column reinforces the monograph gesture.
Client Logos Strip
Logos in--ink-faint; hover restores full ink Client Names Strip
Typographic sibling to 3.11 · all names fully italicLead Magnet
White-paper download · email capture · newsletter funnelPositive Leadership
A framework for engineering culture in scale-up phases.Positive Leadership — the White Paper
A 32-page field study on what separates engineering cultures that survive scale from those that fracture under it.
Callout · Aside
Editorial note box · soft accent wash + left rulergba(196,98,61,0.06)), a 2px --d-accent left rule, body in Rowan. The optional .callout__label renders a Geist-Mono uppercase eyebrow. Max-width 72ch keeps it readable. Inline <b> stays bold (600), <i> italic.
.callout--forest on dark backgrounds (hero, inquiry-forest, footer). Everything else is inherited.
Portrait · Bio
Forest duotone · hover fades to full colour
Jakob Maul
feComponentTransfer filter maps the image onto two dark stops: near-forest shadows and a dark sage-teal for the lights, for a moody green monochrome — plus the brand dog-ear. On hover the duotone layer crossfades out over 650ms to reveal the full-colour photo beneath. Two stacked copies of the same (cached) image — the fade is a clean opacity crossfade, not a filter swap. Restrained, editorial — the colour reveal is a small reward, not a gimmick.PlacementAn About block on the landing page or a dedicated page; the contact panel of the Inquiry section (Forest variant); or the footer. Square 1:1 crop; never larger than ~320px so it reads as a mark, not a hero image.
Reduced motionRespects
prefers-reduced-motion — full colour shown without the wash for users who opt out.
Cookie · Consent Banner
Decided · CResolved: the first-visit inline card (C) — brand-true, dog-ear style. Made legally compliant: rejecting all non-essential cookies must be as easy and as prominent as accepting (DSGVO / TTDSG / ePrivacy). So the card carries a real "Only essential" action with equal weight to "Accept all," plus a granular settings layer. Two states shown: the entry card and the expanded settings.
Templates
Full page compositions filling the layout grid with components. The landing page is a single-page scroll; Cases live on dedicated routes.
Cases Index Template
Route: /cases · filters + featured + 3-column gridSelected Engagements
Post-Merger Leadership Alignment
Following a rapid acquisition, distinct engineering cultures clashed, resulting in delivery paralysis. Through a 6-month intensive moderation and executive coaching mandate, established a unified governance board.
Cross-Agency Reform Mandate
Facilitated leadership alignment across three federal agencies for a digital transformation initiative.
Compliance-First Culture Build
Embedded leadership coaching alongside an FDA-prep initiative, balancing innovation with regulatory rigor.
Founder–CTO Handover
Engineered the leadership transition from technical founder to operational CTO during a Series-B scale.
Cases Detail Template
Route: /cases/[slug] · hero + body + process + pull quote + relatedPost-Merger Leadership Alignment
How a 6-month embedded engagement realigned engineering culture after a rapid acquisition, removing delivery paralysis without losing institutional knowledge.
The acquisition was structurally sound but culturally explosive. Two engineering organisations — one from a 12-year-old fintech with bare-metal pride, the other from a 4-year-old cloud-native startup — had been told to merge in 90 days. By month three, neither team trusted the other's review process, and shipping velocity had collapsed.
Our mandate started with diagnostic interviews across both engineering orgs. The friction wasn't technical — both stacks were defensible. The friction was a missing shared model of what good leadership looks like. We facilitated bi-weekly executive alignment sessions and parallel team-level workshops, designed to surface the implicit hierarchies of each culture and explicitly negotiate which would carry forward.
By month four, the unified governance board had defined three crisp principles for engineering decisions. By month six, blocker tickets had dropped 78%. No voluntary exits, no leadership shuffles — just a sharper shared model.
Patterns
Section-level structures composed from the components: the page model, the hero, and the inquiry section.
Structural Decisions
Page model · language · triangle modes · WCAG · frontmatter/cases (Index) and /cases/[slug] (Detail). Forest only on Hero, Footer, and Lead Magnet — Beige/Paper everywhere else./en/…, /de/…. Inline text replacement on switch.POSITIVE LEADERSHIP / MODERATION / FACILITATION / EXECUTIVE COACHING.01 Approach / 02 Cases / 03 Interventions / 04 Inquiry.Hero Composition
Decided · BThe hero is the page's first typographic gesture. Resolved: the wide-statement layout — headline up to 128px as the unambiguous hero, the service list as a horizontal table-of-contents strip below, italic lead indented as marginalia.
Technique alone rarely settles it.
Structures for teams that bridge human organisation and technological imperative.
Inquiry Section · Full Template
Layout B · Beige vs ForestResolved layout: B — form left (headline, fields, submit), contact panel right (availability, direct line, italic note). Still to pick: the surface — the calm beige or the dramatic forest-green closing gesture. Both shown below for comparison.
Let's find the missing link.
--w-beige) — the calm, neutral reading surface. Form values sit at full --ink contrast; field hairlines in --rule. Reads like a continuation of the page body.Let's find the missing link.
--w-forest) — same layout, dramatic closing gesture, brand-consistent with the hero. Field underlines lift to rgba(paper,0.28), values to --paper. Trade-off form values have lower contrast than on beige — keep value text near full --paper and avoid long placeholder strings.