The single source of truth for how mazdek looks, sounds and behaves — logo, colour, typography, components, motion and voice. Built directly from the production design tokens so design and code never drift apart.
mazdek is a Swiss agency that builds software with a team of named AI agents. The brand feels engineered yet human: deep-space dark surfaces, a luminous spectrum gradient, precise geometric type and a cast of mythological agents — each a colour, a symbol and a craft.
Make world-class software accessible by pairing senior human judgement with a coordinated fleet of specialised AI agents.
Precise · futuristic · trustworthy · quietly confident. Never loud, never gimmicky. The technology impresses; the tone reassures.
Pure-black canvas, a cyan→violet→magenta→green gradient, Space Grotesk headlines and mythological agent symbols.
mazdekClaw (multi-AI orchestration), mazdek Portal.ATHENA, ARGUS, IRIS.The primary logo is the mazdek wordmark. The compact symbol — a rounded square containing a lowercase m — is used where the full wordmark won’t fit: favicons, app icons, avatars and social profile images.
On black / dark — default
On white — print & light UI
On brand blue — reversed
Wordmark is set in Inter, weight 700, tight tracking (−0.02em), always lowercase. An optional gradient “signal dot” (135° cyan→violet) may precede it in expressive contexts (hero, decks).
Primary — on dark backgrounds
Primary — on light backgrounds
The primary app symbol & favicon: a black rounded square with the custom white “m” letterform. On dark backgrounds use the inverted version (white square, black “m”). This single mark is used as the favicon across mazdek.ch and all sub-pages.
SVG is vector and scales infinitely; PNG is exported large (2048px, transparent). For each agent’s symbol, use the SVG / PNG buttons in §05.
Three semantic ramps — Blue (primary), Violet (secondary) and Emerald (accent) — over a pure-black canvas. Each ramp runs 50→950; the 500/600 steps are the brand cores. The spectrum gradient is the brand’s hero signature.
core #3b82f6 / theme #2563ebcore #a855f7core #10b981#000000#05050a#0f172a#64748b#f8fafc#fffffflinear-gradient(110deg, #22d3ee, #a78bfa 45%, #e879f9 75%, #34d399) — reserved for hero headlines (as text clip), the signal dot and key focal accents. Use sparingly; it must feel rare.
Dark dominates. Blue carries primary actions and links. Violet signals AI / agents. Emerald signals success, “live”, Guardian and positive states. The gradient is the rare hero moment on top.
Two variable typefaces. Space Grotesk gives headings a geometric, engineered character; Inter keeps body copy and UI exceptionally legible at every size.
| Token | Font | Size (desktop) | Weight | Use |
|---|---|---|---|---|
| Display / H1 | Space Grotesk | clamp(2.4rem, 6vw, 4.4rem) | 700 | Hero headline |
| H2 | Space Grotesk | clamp(1.7rem, 3.4vw, 2.5rem) | 700 | Section titles |
| H3 | Space Grotesk | 1.25–1.5rem | 600–700 | Card / block titles |
| Lead | Inter | 1.05–1.25rem | 400 | Intro paragraph |
| Body | Inter | 1rem (16px) | 400 | Default copy, LH 1.6 |
| Small / caption | Inter | 0.8–0.875rem | 400–500 | Meta, captions |
| Eyebrow / label | Space Grotesk | 0.72–0.8rem | 600 | Uppercase, tracking .1em+ |
Both are free, open-source variable fonts (SIL Open Font License). The woff2 buttons download the self-hosted variable files used on this site; “Google Fonts” opens the official source for the full package (TTF, all styles).
Every craft is personified by an agent — a Greek, Titan or Mesopotamian deity with one authentic colour and one authentic mythological symbol. These are extended brand colours: use an agent’s colour and glyph only for that agent. Full assets live at /presentation-symbols.html.
viewBox 0 0 512 512, fill: currentColor; tint them in the agent colour on dark, or white inside a solid-colour avatar.Two icon families with distinct jobs.
Outline / Heroicons style. 24×24 grid, stroke-width 1.5–2, round caps & joins, no fill. Match text colour or use a single accent.
Mythological glyphs, 512×512 grid, fill: currentColor. Reserved exclusively for agents — never as generic UI icons.
Recurring building blocks, pulled from the live site so documentation matches production.
Primary CTA — dark base #21211f, 2px white/10 border, inverts to white-on-black on hover with a soft white glow. Radius 1rem.
Eyebrow / status pills — fully rounded, colour/10 fill, colour/20 border, light tint text, optional glowing dot.
white/2.5% fill · 1px white/9% border · radius 1–1.5rem.
Tinted in a semantic colour for ARGUS / success states.
Tinted in the agent colour for IRIS / agent contexts.
The hero badge: rounded square (radius ~26px), 1px agent-colour border, 12% tinted fill and soft outer glow — carrying a continuous, subtle motion (see §09). Used on each agent’s page and the customer portal avatar.
A calm, centred grid with generous vertical rhythm. Tokens come straight from global.css.
1.5rem → responsive up to 2.5rem.--spacing-section: 6rem (py-24) between major blocks.Shadows are subtle. Glows (colour at low alpha) convey focus & “energy”, not drop-shadow realism.
Motion is subtle, purposeful and continuous — it suggests living, intelligent systems without distracting. Everything respects prefers-reduced-motion.
translateY(-2 to -4px)) and/or scale(1.05).Reference “agent-symbol” loop: float 5s + glow 3.2s + breathe 4s, infinite, ease-in-out.
Confident, clear, helpful — an expert who respects your time. We explain advanced technology in plain language and let the work speak.
ss, never ß (Strasse, nicht Straße)./); others prefixed (/en/ /fr/ /ku/).prefers-reduced-motion everywhere.aria-hidden; meaningful icons get labels.