Foundations
CSS-Tokens
Farben, Typografie, Radien, Shadows und Motion — alle als CSS Custom Properties. Ein Import, ein System.
Logos & Imagery
Wordmark, Mark, Cloud-BG, Stage-BG, und die fünf Smoke-Portraits als Abstraktionen für Doro & Team.
DM Sans
Variable Font, upright + italic. Lädt über tokens.css via @font-face. Gewichte 300–700 aktiv genutzt.
Web
Marketing Site
Die komplette craid.de Landing Page — Nav, Hero mit Cloud-BG, Philosophy-Grid, Product-Showcase, Closing-CTA. Pixelgenau am Live-Build.
Doro Chat · iOS + Android
Der Chat mit Doro, dem Chief of Staff — in beiden Plattform-Frames. Topbar mit Online-Status, Bubble-System mit Plan-Tag, Composer.
Social
Social Vorlagen
LinkedIn Banners + Posts, Instagram Feed/Carousel/Story, YouTube Banner + Thumbnail, OG-Card — alle mit korrekten Pixel-Dimensions und CRAiD-Tokens.
Die meistgenutzten
Direkt zu den drei am häufigsten gebrauchten Formaten — OG-Card für craid.de, LinkedIn-Post und Instagram-Feed.
Docs
14 Berater-Templates
Title, Agenda, Section, Content, Quote, Timeline, Matrix, Chart, Process, Case Study, Comparison, Team, Stats, Closing. Keyboard-Nav, Speaker Notes, PDF-Export.
Long-form Report
Komplette Report-Vorlage für docs.craid.de — Dark Cover, Exec Summary, Findings-Grid, Branchen-Tabellen, Risiko-Matrix, Pull-Quote, Sources. Druckbar als PDF via Cmd+P.
Templates, Shell, Components
Task-Done (single + digest), Approval (formell, 2-Button) und System-Mail-Shell mit components.js für Crons (Briefing, Audit, Summary). Dark-Mode, MSO/VML, kein Tracking-Pixel.
Was drin steckt
Pill-Button mit Outlook-Fallback · Card-Layout · Context-Box · Assignee-Avatars (DSGVO-clean SVG/Data-URI) · Loop-Block fürs Digest · Components-Bibliothek · Cookie-frei-Footer · Hidden Preheader.