Brand & Design Reference
The design system behind leonardsml.com
A single source of truth for typography, color, structure and components across the main site, the Datenfluss-Builder and the tool suite — kept accurate so new pages, and AI-assisted builds, start from the same values.
Domains leonardsml.com · datenfluss.leonardsml.com · tool.leonardsml.com
Version 1.0
01
Logo & favicon
One mark, two forms: a hand-drawn, marker-style rendering of "sml" (a stylized abbreviation of the author's surname) as a wide wordmark for headers and documents, and the same mark cropped tighter into a square, dark-backed favicon for browser tabs and app icons.
Wordmark
files: /assets/logo/logo-black.png · logo-white.png (transparent) · logo-on-blue.jpg (pre-composed, 1024×1024)
clear space = the height of the mark's own "m", on every side
never: recolor the strokes, add a drop shadow, skew or stretch non-uniformly, rebuild it in a different typeface
Favicon
The same "sml" mark, squared off and set on a dark rounded tile for contexts too small for the full wordmark: browser tabs, bookmarks, app icons.
rx = 22% of size // corner radius, always proportional
minimum size = 32px // at 16px the fine strokes soften into a blurred smudge rather than staying crisp — this is an inherent tradeoff of the hand-drawn mark's thin linework, not a rendering bug
02
Typography
Two variable fonts, self-hosted (no external font requests — deliberate for both privacy and load performance). One for display, one for everything else.
Space Grotesk
Display & headings
Light 300Medium 500SemiBold 600Bold 700
font-family: 'Space Grotesk', system-ui, sans-serif;
Inter
Body & interface text
RegularMediumSemiBoldBold
font-family: 'Inter', system-ui, -apple-system, sans-serif;
H1 / 700Aa Bb Cc 123
H2 / 700Aa Bb Cc 123
H3 / 600Aa Bb Cc 123
Body / 400Aa Bb Cc 123 — the quick brown fox jumps over the lazy dog.
Eyebrow / 600Section label
h1 { font-size: clamp(38px, 7vw, 68px); font-weight: 700; line-height: 1.04; }
h2 { font-size: clamp(28px, 4.5vw, 42px); font-weight: 700; }
h3 { font-size: 18–22px; font-weight: 600; }
body { font-size: 14.5–17px; font-weight: 400; color: var(--text2); }
eyebrow { font-size: 12–13.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
03
Color palette
Dark-first. Three layers of surface depth, three levels of text contrast, one accent used with intent, and a small set of semantic colors reserved for diagram node types.
Surfaces & borders
Text
Brand accent
Diagram semantic colors (Datenfluss-Builder)
// full token set — copy into :root
--bg:#0d0f16; --surface:#161925; --surface2:#1c2030; --surface3:#252a3d;
--border:#262b3d; --border2:#353c54;
--accent:#f43f5e; --accent2:#ff7a90; --accent3:#34d6a0;
--entity:#5b8cff; --store:#a855f7; --sticky:#ffcf6b;
--text:#eef0f6; --text2:#9aa3c0; --text3:#626b8a;
--glow: rgba(244,63,94,0.42);
04
Icons
Three navigation icons are reserved and fixed across every property. Never swap their meaning or destination — consistency here is what lets people navigate on autopilot.
Home
Always links to leonardsml.com. Only icon that leaves the current tool for the main site.
Wrench
Always links to tool.leonardsml.com. Never used for in-tool settings.
Gear
Reserved exclusively for settings/preferences, inside a tool. Never used for navigation.
style: flat, solid single-color glyphs (not outline/stroke) — transparent background, no inner detail lines
source files: 512×512 PNG masters in /assets/icons/ (black originals + white pre-tinted copies) — raster, not vector
recoloring: this page ships pre-tinted black/white PNGs and swaps the file — works everywhere, including static PDF export, which doesn't support CSS mask-image
sizes: 17px inline in the header · 22–24px in tiles & empty states
do: reuse the exact files above everywhere they appear
don't: mix this flat glyph style with outline/stroke icons on the same page
// Option A — used on this page: swap pre-tinted files, works everywhere
<img src="/assets/icons/home-white.png" width="17" height="17" alt="Home">
// Option B — dynamic recolor (hover/theme) in live browsers only; NOT supported by most PDF/print engines
.icon { width: 17px; height: 17px; background-color: currentColor;
-webkit-mask-image: url(/assets/icons/home.png); mask-image: url(/assets/icons/home.png);
-webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
05
Components
The recurring building blocks. Buttons, badges, cards and toggles look identical everywhere they're used.
Buttons
Primary action
Secondary
Badges & status pills
● Live
Beta
Login required
Cards
Tool name
One-sentence description of what it does.
06
Spacing, radius & motion
An 8px base unit for spacing. A short, consistent set of corner radii. Motion is quick and quiet — never decorative.
Corner radius scale
spacing: 8 · 12 · 14 · 16 · 20 · 24 · 28 · 36 · 48 · 64px
motion: 150–220ms ease, transform/color/border-color only
hover lift: translateY(-1px) to translateY(-2px) on primary actions
focus: visible outline required, never removed
07
Adding your own icons & logo files
The /assets folder on this page is live, not hypothetical — the wordmark, favicon and three navigation icons shown above are the actual files in /assets/logo/ and /assets/icons/. Use the same pattern for anything you add next.
- Icons → drop new ones into
/assets/icons/name.png (or .svg). If it's a flat, single-color glyph like home/wrench/gear, apply it as a CSS mask-image with background-color: currentColor — see the code example in section 04 — rather than baking in one fixed color.
- Logo files → save into
/assets/logo/. This project's set: logo-black.png / logo-white.png (transparent, for dark/light surfaces) and logo-on-blue.jpg (pre-composed, for avatars/social). Keep transparent PNGs actually compressed — the originals we received here were ~6.8MB unoptimized and came down to ~29KB losslessly with optipng -o4.
- Favicon → save as plain PNGs into
/favicons/ at 16/32/48/96/192px plus a 180px apple-touch-icon, referenced via multiple <link rel="icon" sizes="..."> tags. We moved away from a single SVG favicon here specifically because it failed to render in real-world testing — PNG at fixed sizes is less elegant but far more reliably supported.
- Reference them in HTML →
<img src="/assets/logo/logo-black.png" alt="Logo"> for raster, or use the mask technique above when a flat icon needs to change color with hover/theme state.
- Self-host, don't link externally → same pattern as
/fonts on this site: no CDN calls, keeps things fast and avoids sending visitor data to third parties.
- Keep this page honest → if a color, font size, spacing value or asset changes in production, update the matching swatch here in the same commit, so this stays a mirror of reality rather than an aspiration.
