Automated — Design System v1

The design system for Automated (automated-ki-agentur.de), a B2B AI-automation agency serving German-speaking SMBs.

This repository is the machine-readable source of truth for the brand. It is intended to be ingested by design tools (Claude Design, Figma, Canva) and code projects (Tailwind, vanilla CSS, Typst) without any translation step.

---

Quick start for AI design tools

If you are Claude Design, Figma AI, or another assistant applying this system: read .claude/design-system.md first. It is a distilled, token-efficient summary of everything below.

Quick start for humans

You want to...	Open...
Understand the brand personality and voice	BRAND.md
Get hex codes	colors/palette.md
See the type scale	typography/scale.md
Copy design tokens into a project	tokens/tokens.json or tokens/tokens.css
Use in a Tailwind project	tokens/tailwind.config.js
See the system rendered	examples/landing-page.html
Download the wordmark	logo/

---

The system in 30 seconds

• Palette: strict monochrome. Dusty Blue #7490AC primary, Deep Navy #1B242C text, Slate Blue #304964 deep accents, Off-white #F7F7F5 cards, Cool Gray #6B7280 meta, White surface. No sixth color.
• Type: Fraunces (display) + Inter (body). JetBrains Mono for code only.
• Baseline: 4pt grid. Everything snaps.
• Forbidden: gradients, drop shadows, rounded corners > 8px, stock photography, pill buttons, decorative accent hues.
• Voice: German, Du-Ansprache, technically literate, no hype.

Full rules in BRAND.md.

---

Repository structure

automated-design-system/
├── README.md                  This file
├── BRAND.md                   Tonality, personality, language, do/don't
├── .claude/
│   └── design-system.md       Distilled summary for AI agents
├── tokens/
│   ├── tokens.json            W3C Design Tokens (DTCG) format
│   ├── tokens.css             CSS custom properties
│   └── tailwind.config.js     Tailwind preset
├── typography/
│   ├── scale.md               Full type scale
│   └── fonts.md               Font sources and licensing
├── colors/
│   └── palette.md             Color usage rules
├── logo/
│   ├── wordmark-navy.svg      "Automated" in Deep Navy
│   ├── wordmark-dustyblue.svg "Automated" in Dusty Blue
│   ├── wordmark-white.svg     "Automated" in White
│   └── favicon.svg            "A" monogram
├── components/
│   ├── button.html            Button treatments
│   ├── card.html              Off-white card pattern
│   └── code-block.html        Prompt/code block pattern
└── examples/
    └── landing-page.html      Reference page demonstrating the system

---

Provenance

This repository packages the brand system defined in the internal design spec /root/agency/00_Strategy/specs/2026-04-10-automated-brand-system-v1-design.md (Apr 10, 2026). The spec is the canonical source; this repo is its public, machine-ingestible form.

License

The tokens, colors, type scale, and documentation in this repository are MIT-licensed so downstream consumers (AI tools, designers, developers) can use them without friction.

The name "Automated", the wordmark, and the logo marks are not part of the MIT license — they are reserved trademarks of the Automated agency.