# CRAiD Design System
> Design consultancy for the Agentic Era. Human-first design for a world where humans and AI agents work as one team.
**Live: [design.craid.de](https://design.craid.de)** · Tokens (JSON): [design.craid.de/design-tokens/tokens.json](https://design.craid.de/design-tokens/tokens.json) · Agent index: [design.craid.de/llms.txt](https://design.craid.de/llms.txt)
This repository is the single source of truth for every CRAiD-branded interface — marketing site, slide decks, client artefacts, internal tools. Use it as a **Claude Skill** when designing inside the CRAiD brand.
---
## What CRAiD is
CRAiD is a **design consultancy for the Agentic Era**, founded by Daniel Simon. The pitch, compressed: *"We already work the way your organisation will work tomorrow."* Humans and AI agents share the team roster — Doro (Chief of Staff), Brandon (Beratung), Carlo (Research), Maja (Business Design), Jason (Creative), Chris (Coding), Pace (Ops), Jeremy (Storytelling) — and that lived experience is the unfair advantage CRAiD sells.
The five services CRAiD offers:
1. **Agentic Experience Strategy** — AX readiness, transformation roadmaps
2. **CX-to-AX Transformation Design** — value-linked experience maps & prototypes
3. **Design Leadership & Enablement** — frameworks, sparring, capability uplift
4. **Delivery Factory** — outcome-based design/content/product delivery (flagship)
5. **Brand, Story & Go-to-Market** — narrative, positioning, launch
Key surfaces:
- **craid.de** — marketing site (this repo's UI kit)
- **office.craid.de** — Doro, the front-desk AI agent ("Enter the Office")
- **docs.craid.de** — CRAiD Report (insights from agent-in-the-loop work)
---
## Sources used to build this system
| Source | What it gave us |
|---|---|
| `danielcraid/Craidrelaunch2026v002` (private GitHub) | Live theme tokens (`src/styles/theme.css`), React components, Sanity-backed copy, real brand assets (logos, cloud, stage BGs, agent avatars) |
| Figma: `zqFV58aL8WHuamFQugWGNj` (CRAiD Relaunch 2026 v002) | Original visual source — referenced via the repo |
| `Craid_presentation_template_v_1_DMsans.pptx` (uploaded) | Deck type scale + DM Sans confirmation |
| `CRAiD_A4_Vorlage.pdf` (uploaded) | A4 print template — layout proportions |
| `Colors.pdf` (uploaded) | Color document (reader unavailable here — colours taken from `theme.css`, which is authoritative) |
| `CRAiD_Competitor-Analysis_Template_fromSheet_v1.html` (uploaded) | Figma Make template confirming DM Sans + muted neutral chrome |
| Five brand images (`brand-image-018..022.jpeg`) | Signature visual motif — ink-in-water / colour-smoke compositions in pink/violet/blue |
| `Craid_mark_pink.svg` | The geometric three-dots-and-slashes mark |
The project is intentionally bilingual (DE / EN), and German is the default language.
---
## Index — what's in this folder
```
README.md you are here
SKILL.md Agent Skills frontmatter (for Claude Code)
index.html navigable cover page
design-tokens/tokens.css all CSS tokens (colors, type, radii, shadows, motion)
fonts/ DM Sans variable fonts (upright + italic)
assets/ logos, mark, brand imagery, cloud / stage BGs
web/website/ marketing-site UI kit
web/mobile/ iOS + Android mocks (Doro chat)
social/ 9 social media templates (LinkedIn, IG, YT, OG)
docs/slides/ 14 consulting-deck slide templates
preview/ render cards used by the Design System tab
preview/ small HTML cards surfaced in the Design System tab
ui_kits/
website/ craid.de marketing surface — index + components
office/ office.craid.de (Doro chat) — index + components
slides/ 16:9 slide layouts for decks
```
---
## Content fundamentals — how CRAiD writes
**Voice.** Confident, plain, a bit dry. Sells transformation without buzz. Mixes strategy-speak with understated put-downs ("Results, not day rates. Because pretty decks don't excite customers.").
**Person & tone.** In German the default is **ihr / euch / eure** (plural "you"), informal. In English the same warmth comes through as "your team", "you", never corporate "the client". First-person is plural **wir / we** — CRAiD is a team, never a single author.
**Casing.** Sentence case everywhere except overlines and chip labels, which are **ALL CAPS with wide tracking (0.1em)**. Product and concept names are capitalised inside sentences: *CX-to-AX*, *Agentic Era*, *Delivery Factory*, *Doro*, *CRAiD Office*.
**The brand name.** Always `CRAiD` — uppercase with a lowercase **i**. Never *Craid*, never *CraID*, never *CRAID*. Reflect this in the logo wordmark.
**Numbering style.** Services are numbered `01` … `05` with a leading zero and displayed in small tracked caps, pink. Never Arabic with no zero.
**Punctuation quirks.**
- En-dash `–` not em-dash, with spaces around it: `Transformation, nicht Technik – wir bauen keine Agenten für euch.`
- Bilingual sites use real German quotes `„ … "` in DE and `" … "` in EN. Standalone pull quotes use `“ ”`.
- Headlines are often split across **two colour stops**: first clause in ink, second clause (the pivot) in muted slate. e.g. *"Wir arbeiten schon so,"* then muted *"wie eure Organisation morgen arbeiten wird."*
**Emoji.** None. Not in UI, not in copy, not in pitch material. Any iconic accent uses Lucide icons or the CRAiD pink mark.
**Specific copy moves to re-use.**
- *"Creativity. AI. Design Leadership."* — three-word stanza opener
- *"Outcomes:"* prefix for bullet strings, dot-separated (`·`)
- *"Weil schöne Decks keine Kunden begeistern."* / *"Because pretty decks don't excite customers."* — closing mic-drop
- Small-caps eyebrow like `DESIGN CONSULTANCY FOR THE AGENTIC ERA` over every hero
---
## Visual foundations
### Palette
| Role | Hex | Where |
|---|---|---|
| **CRAiD Pink** | `#EC16F5` | Logo mark, primary CTAs, accents, focus ring, eyebrow text |
| Pink wash | `rgba(236,22,245,0.10)` | Tag backgrounds, Delivery-Factory row hover |
| Pink ring | `rgba(236,22,245,0.20)` | Tag borders, hover-state borders |
| Ink | `#131F22` | Foreground, headlines |
| Slate | `#304953` | Muted foreground, body text, secondary clause of split headlines |
| Paper | `#F6FAFB` | Page background — a cool near-white, not pure white |
| Card | `#FFFFFF` | Card / popover surface |
| Border | `#E4D8F5` | Hairlines, chips, nav border — a soft lavender ("Nice"), picks up the pink hue |
| Lavender | `#E4D8F5` | Secondary / accent background, chat message bubbles |
| Lavender soft | `#EDE6F5` | Hero gradient midpoint |
| Destructive | `#ff3b5c` | Errors (use sparingly) |
The **border colour is a lavender**, not a neutral gray — `#E4D8F5` ("Nice"). Every hairline, chip outline, and card border inherits that soft lilac wash, which is what ties the system to the pink accent instead of floating away as cold gray.
### Type
**DM Sans** — variable, upright + italic, weights 300–700 in use.
- Hero display: **300** (light), 88–112px, tracking `-0.025em`, line-height `0.95`
- Section H2: **700** (bold), 40–56px, line-height `1.1`
- Card titles: **600** (semibold), 20–28px
- Body: **300** (light), 15–18px, line-height `1.625` — **yes, body copy is weight 300**, that's intentional
- Overlines / tags: **400**, `0.8rem`, `uppercase`, `letter-spacing: 0.1em`, almost always in CRAiD Pink
- Buttons / labels: **500–600**
Numbers in service rows (`01`, `02`, …) use the same tracked-caps eyebrow treatment — pink, `0.8rem`, `letter-spacing: 0.1em`.
### Spacing & rhythm
4-px baseline. Section vertical rhythm is **`py-32`** (128px top + bottom). Content max-width **`max-w-7xl`** (≈1280px). Side padding `px-6` (24px) on mobile.
### Backgrounds
Three stacked background treatments on the hero — and they're *the* brand move:
1. A vertical gradient `paper → lavender-soft → paper`
2. A scaled, 20%-opacity hero image (the smoke photograph) on top
3. A radial pink wash centred at 50% 40% fading to transparent
4. The cloud image scaled a tad larger, 20% opacity, on top again
Result: a hazy, almost-atmospheric wash, never a flat colour. Other sections use a single subtle radial (`radial-gradient(ellipse at 80% 50%, rgba(236,22,245,0.08) 0%, transparent 50%)`) to keep the vibe without the full stack.
### Imagery
Hero / feature imagery is always **ink-in-water or coloured smoke** — CRAiD Pink, violet, a cold-blue highlight, soft white voids. Five seed images live in `assets/brand-image-018…022.jpeg`. When generating new imagery, brief for:
- cloud / smoke / pigment dispersion
- CRAiD Pink → violet → cold-blue palette
- soft natural light, slight film grain
- no hard edges, no people, no geometry
Never clipart, never illustrations, never stock-office shots.
### Motion
Powered by **motion/react** (`framer-motion`). Taste:
- Entrances: `opacity 0 → 1, y 30–50 → 0`, `duration 0.6–1s`, sequenced delays 0.1–0.3s between elements. Hero cascade stretches to delay 2.3s.
- Scroll-linked parallax on the hero BG (`scale 1 → 1.15`) and on text (`y 0 → 60, opacity 1 → 0`) via `useScroll`.
- Hover: `scale 1.05`, `opacity 0.9`, or `translateY -1px`. CTAs also get `hover:scale-105`.
- Press: default browser / a subtle `scale(0.98)` if custom.
- Animated accents: the hero mark slow-rotates `0 → 45deg` on scroll; a floating mark bobs `y [0, -15, 0]` over 8s.
- Easing: `ease-out` or `cubic-bezier(0.22, 1, 0.36, 1)` — we lean into slightly overshooting tails, never bounces.
### Borders, radii, shadows
- Border: `1px solid #E4D8F5` — universal hairline weight.
- Radii: **cards `16px`**, **feature cards `24px`**, **chips & buttons `9999px` (pill)**, small UI `10px`.
- Shadows: very soft, low-opacity, never dramatic. Default card is `shadow-sm` (barely perceptible).
- Focus: the pink ring `#EC16F5` at `6px` spread, 12% alpha.
### Transparency & blur
Used in two specific places:
1. **Sticky nav** — transparent when at top, `backdrop-blur-xl bg-background/80` with a hairline when scrolled.
2. **Overline pill** — `bg-white/60` with border, always.
Cards themselves are solid white. No glassmorphism elsewhere.
### Hover / press states
- Links: `muted-foreground → foreground` colour shift.
- Buttons: `opacity 0.9` + `scale 1.05`.
- Cards: `border: border → primary/30`, `duration 500ms`.
- Service rows: the whole row gets a `hover:bg-white/50` wash; the Delivery Factory row gets `hover:bg-primary/5` plus a pink left-edge bar fading in.
### Layout rules
- Fixed-position: **only the nav**.
- Max content width: 1280px. Centred with auto-margin.
- Grid: `md:grid-cols-3` for card triplets, `lg:grid-cols-2` for split hero/feature blocks, `sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4` for agent tiles.
- Headlines often use the **two-colour split**: first clause in `foreground`, second clause in `muted-foreground`, `
` between them.
---
## Iconography
CRAiD uses **[lucide-react](https://lucide.dev)**, exclusively, stroke icons, default stroke width, sized `14–24px`. No emoji, no unicode glyphs, no custom SVGs outside the logo system.
Recurring icons in the live site — lift these by name when mocking CRAiD:
| Surface | Icons |
|---|---|
| Nav | `Menu`, `X`, `Globe` |
| Hero | `ArrowDown` |
| Philosophy cards | `Sparkles`, `RefreshCw`, `Layers` |
| Services | `ArrowUpRight`, `TrendingUp`, `ShieldMinus`, `HeartHandshake`, `Gauge` |
| Doro | `MessageCircle`, `Zap`, `Clock`, `ArrowRight` |
| Team | `Linkedin`, `User` |
| Report | `FileText`, `ArrowUpRight` |
| Footer | `Linkedin`, `Mail`, `ArrowUpRight` |
**Load Lucide from CDN** in static HTML artefacts:
```html
```
### The CRAiD mark
Two logo systems live side-by-side:
1. **Wordmark**: `CRAiD` in a heavy sans — lowercase `i`, all others caps. `assets/logo-craid-wordmark.png`.
2. **Geometric mark**: three parallel pink slashes with pink dots. `assets/craid-mark-pink.svg` (master) + `assets/logo-mark.png` + a small `assets/icon-mark-small.png` for nav.
The mark in nav is CSS-tinted to pure `--craid-pink` via a long hue-rotate filter. When using the SVG, set `fill="currentColor"` or hard-code `#EC16F5`.
Backgrounds `assets/cloud-bg.png` and `assets/stage-bg.png` are the atmospheric smokes; `brand-image-018..022.jpeg` are the moody full-bleed images.
---
## How to use this system
- For **production code**, import `design-tokens/tokens.css` and use the semantic role tokens (`--bg`, `--fg`, `--primary`, `--border`…). Don't reach for raw brand colours.
- For **throwaway prototypes & decks**, copy assets out and build static HTML. The UI kits under `web/` are pixel-accurate recreations of the real product, ready to cannibalise.
- For **decks**, start from `docs/slides/index.html`. Type scale + CTA styles are already dialled in.
- For **imagery**, only use the smoke/cloud palette — see `assets/brand-image-*.jpeg` as north stars.
See `SKILL.md` for the Agent Skills entry-point.
---
## Repository
Privates Repo. Source of truth für alle CRAiD-gebrandeten Interfaces.
```bash
git clone git@github.com:/craid-design-system.git
cd craid-design-system
open index.html # oder: python3 -m http.server 8000
```
Einfach `index.html` im Browser öffnen, um den navigierbaren System-Überblick zu sehen.
Für Font-Loading in Chromium braucht es entweder einen lokalen HTTP-Server
(wegen file:// CORS) oder ein Deployment auf Cloudflare Pages / Vercel / GitHub Pages.
## Contributing
Dieses Repo ist privat und wird vom CRAiD-Team gepflegt. Änderungen laufen über Pull Requests.
**Workflow:**
1. Branch von `main` abzweigen: `git checkout -b feat/neue-variante`
2. Änderungen committen (CHANGELOG.md aktualisieren bei bemerkenswerten Änderungen)
3. PR gegen `main` öffnen
4. Mindestens ein Review vor Merge
**Versionierung:** SemVer. Token- oder Layout-Breaking-Changes → Major. Neue Komponenten → Minor. Bugfixes → Patch.