Fractional GTM engineering for B2B teams in DACH. We design and run the systems that move your revenue, then hand them over or operate them ourselves.
Every page reads like a brief, not a brochure. Restraint is the move — one accent color, one display family, one motion language. The volume comes from contrast, not from layering effects.
We ship systems, not slide decks.
One accent, one display, one motion.
Live infrastructure, not a deck.
Cool palette, sharp grid, no fog.
Headlines make claims. Buttons say what happens.
leverage · potentially · world-class · best-in-class · best practices · innovative · cutting-edge · robust solutions · we are excited to announce
Hedges and category buzzwords. They signal to the wrong cluster, and they hide what we actually do behind language we'd never use in a discovery call.
The palette is built on cool semantic tokens that swap between light and dark. The amber accent is constant across both modes — warmth-on-cool is the deliberate temperature tension. No pure white, no pure black.
Soft blue used inside workflow diagrams for connectors, status pills, and branch labels. Never used as a brand accent on the rest of the site.
Two families, three roles. Sofia Sans 600 for headings, 400 for body, 400 italic for emphasis. JetBrains Mono 500 for eyebrows, labels, and tabular numerals only. Modular ratio 1.25 on a 16 px base.
The brand's verbal-visual hook. One italic phrase per section, max. The italic + accent color carries the emphasis without needing a second display family.
Every margin, padding, and gap traces back to this scale. Section padding is space.10 desktop, space.9 mobile. Card internal padding is space.6.
One open-source icon family. Three sizes — 16, 20, 24 px. Stroke 1.5 px, color follows surrounding text. No filled icons, no two-tone, no gradients. Accent color appears on hover or active state only.
Default component radius is md (12 px). Buttons are pill. On a light canvas, depth is subtle — shadows never exceed shadow.md unless lifting a modal.
Every component below renders with the same tokens. Tab through to see focus states. Toggle the theme to see the system flip.
accent · primary · secondary · tertiary · disabled. Tab to see focus ring.
We map your current pipeline, identify where AI infrastructure creates the highest leverage, and recommend which system to build first.
Voice calibration, workflow configuration, integration setup, production testing — all in 4 to 6 weeks.
Build + Own, or We Run It For You. Same infrastructure. Different operating model.
We design and run go-to-market workflows — so we draw them. Workflow diagrams are the brand's primary illustration. Crimson marks the active path. Soft blue carries the data flow. Gray is everything dormant.
Vertical pipeline with branching. The active path carries the crimson ring; the inactive branch goes dashed gray. Status pills float beside nodes; branch labels sit on the connector lines.
Every section repeats the same skeleton. Italic emphasis appears once per section, never in body copy.
Everything we build is shipped, instrumented, and handed off — or operated for you. Choose your involvement.
Inverted sections are reserved for case-study deep dives, hero overlays, or quote pulls. Every other rule still holds — same type, same rhythm, same accent.
Voice-calibrated sequences with intent-aware qualification.
Programmatic SEO + content engine wired to HubSpot.
Co-marketing and referral plays surfaced from CRM signal.
Motion is reserved for state feedback and small reveals. No parallax, no elastic bounces. prefers-reduced-motion is honored globally — animations cut, they do not slow.
All semantic pairs verified in light + dark. Body text never carries the accent color.
Outline never removed without replacement. Tab through this page.
prefers-reduced-motion is honored globally. Animations disable; they do not lengthen.
All interactive surfaces meet the AA touch target on mobile.
CSS custom properties for the implementation. JSON for the design pipeline. Names are identical across both. Surface and text tokens are semantic — they swap on theme.
:root {
/* Surface (light) */
--color-canvas: #F2F4F8;
--color-surface: #FFFFFF;
--color-surface-raised: #FAFBFD;
--color-border: #E1E5EC;
--color-heading: #0F1217;
--color-body: #4A5360;
--color-muted: #7C8390;
/* Accent — constant */
--color-accent: #E11E48;
--color-accent-hover: #BE123C;
/* Workflow-only (not a brand color) */
--color-flow: #6FA8DC;
--color-flow-strong: #4A89C7;
/* Type */
--font-sans: "Sofia Sans", system-ui, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
/* Scale */
--space-4: 16px; --space-6: 32px; --space-10: 128px;
--radius-md: 12px; --radius-pill: 999px;
--motion-duration-base: 320ms;
--motion-ease-standard: cubic-bezier(0.2, 0, 0, 1);
}
[data-theme="dark"] {
--color-canvas: #0F1217;
--color-surface: #181C23;
--color-surface-raised: #232830;
--color-border: #2E343F;
--color-heading: #E5E9F0;
--color-body: #A0A8B5;
--color-muted: #6B7280;
}
{
"color": {
"canvas": { "light": "#F2F4F8", "dark": "#0F1217" },
"surface": { "light": "#FFFFFF", "dark": "#181C23" },
"surface-raised": { "light": "#FAFBFD", "dark": "#232830" },
"border": { "light": "#E1E5EC", "dark": "#2E343F" },
"heading": { "light": "#0F1217", "dark": "#E5E9F0" },
"body": { "light": "#4A5360", "dark": "#A0A8B5" },
"muted": { "light": "#7C8390", "dark": "#6B7280" },
"accent": { "value": "#E11E48" },
"accent-hover": { "value": "#BE123C" },
"_workflow-only": "below tokens are scoped to workflow diagrams, not brand",
"flow": { "value": "#6FA8DC" },
"flow-strong": { "value": "#4A89C7" }
},
"font": {
"family": {
"sans": { "value": "Sofia Sans, system-ui, sans-serif" },
"mono": { "value": "JetBrains Mono, ui-monospace, monospace" }
}
},
"space": { "4": "16px", "6": "32px", "10": "128px" },
"radius": { "md": "12px", "pill": "999px" },
"motion": {
"duration": { "base": "320ms" },
"ease": { "standard": "cubic-bezier(0.2, 0, 0, 1)" }
}
}