Explore all our EnginesAI Engines to enhance your entire GTM
Outbound EngineFor Outreach & Sequences Inbound EngineFor Lead Capture & Scoring Deal EngineFor Pipeline & Deal flow Demand EngineFor Content & Brand Voice CS EngineFor Renewals & Expansion RevOps EngineFor Reporting & Forecasts
EN · DE
Style Guide

The Sondero design system.

Every token, type ramp and component the site is built from — one source, so the whole thing stays consistent as it grows.

01

Colour

Brand

Green — primary rgb(13, 60, 31)
Sage — secondary rgba(61, 127, 97, 0.85)
Accent — blue rgb(0, 128, 255)

Per-engine accents (Sentient italics)

Outbound rgba(128, 61, 61, 0.85)
Inbound rgba(128, 103, 61, 0.85)
Deal rgba(113, 61, 128, 0.85)
Demand rgba(61, 122, 128, 0.85)
Customer Success rgba(61, 127, 97, 0.85)
RevOps rgba(61, 84, 128, 0.85)

Neutrals & surfaces

Ink #0a0a0a
Body rgb(82, 82, 82)
Warm grey rgb(133, 126, 123)
Warm taupe rgb(85, 78, 75)
Num grey rgb(180, 175, 172)
White rgb(255, 255, 255)
Content bg rgb(250, 250, 249)
Grey 4 rgb(247, 248, 248)
Ink 111 #111111
02

Type

Geist (sans) · Sentient (serif italic accents) — these are the --fs-* tokens in tokens.css, derived from what the site actually renders

--fs-display · 59px · page hero Get the engine for your GTM.
--fs-h1 · 42px · section headline Why teams pick Sondero
--fs-h2 · 32px · block headline Clear roadmap, clean handover
--fs-h3 · 22px · card title Six engines. Fifty-one agents.
--fs-lead · 18px · standfirst One cabinet your team already runs.
--fs-body · 16px · running text We cover your entire revenue motion.
--fs-sub · 15px · secondary text Demand, Inbound, Outbound, Deal, CS, RevOps.
--fs-small · 14px · meta, nav All posts · 8 min read
--fs-micro · 13px · dense meta By Kail Patruck · July 2026
--fs-label · 12px · pills, eyebrows Intent Signals
03

Buttons

One SButton component · padding 14×24 · radius 6 · Geist 600 / 16 · hover me — label slides up

Primary · greenTertiary · #111WhiteGhost

Arrow button (roles, links) · hover fills + nudges

04

Tags & pills

.s-pill from tokens.css — the real class, rendered here, not a copy. White · radius 5 · --pill-shadow · Geist 500 / 12. .s-pill--bold for the blog cover tags.

Intent Signals Trigger-Based Outbound 12 signals tracked 98% inbox rate Email · LinkedIn · voice

Eyebrow pill — light (detail pages) & dark (overview hero)

Outbound Engine Light · white hero · nav shadow
Our Engines Dark · glow on dark hero
05

Cards

AgentCard — one component, shared by the engine pages and the solutions grid

Content Engine

Calls, customer wins and Slack chatter become posts, case studies, sequences and SEO articles. Never a blank page.

Faster publishing cadence
06

Icons

Engine icons (3D renders, 50px)

outboundinbounddealdemandcsrevops

Tool logos (28px, overlapping + tilted in cards)

Role icons (52px)

contentsalesmarketingrevopscs
07

Depth

Shadows

nav / card
pill
eyebrow glow

Radii — each maps to a role, not picked per element

4px Inline tool-logo icons (28px)
5px Pills & tags — stat pills, engine tags
6px Buttons & number chips (Step 1)
8px Interactive surfaces — nav pill, dropdown cards, eyebrow · overview bento cards (1:1 live)
10px Standard cards & icon tiles — agent card, step card, solutions grid, detail hero image
12px Overview engine cards — 1:1 live exception
24px Large panels — the footer
999px Fully round — arrow buttons, toggles, orb, flags
08

Blog covers

Sechs Kompositionen, gewählt vom Frontmatter — keine Bilddatei ausser bei Insights

Blueprint
  1. Angebot
  2. Warten
  3. Prüfen
  4. Entwurf
  5. Mensch
Kette — die echte Architektur Blueprints
Asana logo

Asana

Tool Review
Ein Produkt, gross Tool Reviews
Aleph Alpha logoCohere logo

Aleph Alpha vs Cohere

Tool Review
Duell — zwei Tools Tool Reviews
Granola logoFathom logotl;dv logoJamie logoCircleback logo

Five tools

Tool Review
Fächer — drei bis fünf Tool Reviews

Marc Benioff

CEO, Salesforce

Authority Report
Porträt in der Marke Authority Reports
Bild Insights

Autoren-Spezifikation im Kopf von src/components/BlogCover.astro, Feldverträge in src/content.config.ts. Ein Format ohne seine Cover-Daten bricht den Build.

09

Prose blocks

Auflockerungen im Artikeltext — aus normalem Markdown, siehe src/lib/rehype-prose.mjs. Der CTA am Ende kommt von selbst.

STAT > [!STAT]

12 von 26 Artikeln enthalten keine einzige Zahl.

Eigene Auszählung über den Blog, Juli 2026

QUOTE > [!QUOTE]

Der Engpass war nie die Intelligenz.

— aus dem SAP-Report

NOTE > [!NOTE]

Der Vorbehalt, den man sonst in Klammern schreiben würde.

Belegtes Fremdzitat — > ohne Marker, bleibt kursiv

Reflexive AI usage is now a baseline expectation at Shopify.

Bild mit Bildunterschrift — ![Alt](/pfad.jpg "Unterschrift")

Ein Werkzeugkasten aus grünem Glas über einer Wolkendecke
Ein erkennbarer Gegenstand aus grünem Glas über heller Wolkendecke, dasselbe Rezept wie die Insights-Cover. Die Unterschrift sagt etwas, sie beschreibt nicht das Bild.

Blog-CTA — steht in keiner .md, setzt rehype-prose.mjs selbst

FAQ — aus den ###-Fragen unter einer FAQ-Überschrift

Wie schreibt man einen dieser Blöcke?

Als Blockquote mit Marker. Die leere >-Zeile zwischen Aussage und Quelle ist Pflicht.

Wie viele Blöcke bekommt ein Artikel?

Zwei sind die Regel, drei die Ausnahme, alle vier nie. Sonst ist die Auflockerung selbst wieder eine Schablone. Jeder Artikel im Bestand trägt mindestens zwei.

Muss ich den CTA irgendwo einbauen?

Nein. Ein Artikel mit mindestens drei ##-Abschnitten bekommt ihn vor der mittleren Überschrift, nie im FAQ-Teil und nie direkt hinter einem Bild. Text und Ziel richten sich nach category und lang.