# Armadillo Design System A complete brand and design system for **Armadillo** — AI coworkers for European companies. Built for the EU AI Act. Hosted in Denmark. Compliant by design. Covers both **web** (marketing site, in-product surfaces) and **print** (A4 one-pagers, case studies, DPAs, evidence ledger exports). This system was derived from the live marketing site (`/index-v3.html` in the parent project) and codifies the visual decisions made there into reusable tokens, CSS, components, and print primitives. --- ## Index | File | What's inside | |---|---| | `colors_and_type.css` | Foundation tokens: color, type, spacing, radii, shadows, motion | | `print.css` | Print stylesheet: `@page` setup, A4 grid, print typography | | `icons.css` | Icon system: UI line icons (Lucide-compatible), brand concept glyphs, status dots | | `imagery.css` | Image system: portrait treatment, product mocks, logo strips, abstract SVG motifs | | `assets/` | Logos, illustrations, customer logomarks | | `preview/` | Design System tab specimen cards | | `ui_kits/marketing-site/` | High-fi HTML + JSX recreations of the marketing site surfaces | | `print/` | Print sample documents (one-pager, evidence summary) | | `SKILL.md` | Agent Skill manifest (use this system from Claude Code or anywhere) | --- ## Brand at a glance > **AI coworkers for European companies. Built in Copenhagen. Hosted in Denmark. Compliant by design.** Armadillo isn't another AI SaaS — it's a Danish-hosted, EU-AI-Act-native workforce platform. Every employee gets a digital coworker; the platform sits on a dedicated VPS in Denmark, every action is sealed in a tamper-evident audit ledger, and the agent core is MIT-licensed. The visual brand reflects this: quiet, considered, slightly Scandinavian. No neon. No gradient blobs. No emoji. Cool light greys, a single ink black, italic Space Grotesk for emphasis, and the occasional yellow-green "live" pulse. --- ## Content fundamentals **Tone.** Direct, declarative, mildly dry. Short sentences. The brand speaks like a senior operator describing a system they know intimately, not a marketer pitching to a stranger. > "Compliance isn't a layer we added. It's the substrate every agent sits on." > "Don't start with fancy models — start with the mess." > "The Monday digest replaced our Monday meeting." **Voice rules** - **Second person (you / your team)** in marketing copy, never "we". - **First person (we)** is reserved for *Armadillo's* statements of responsibility ("We host in Denmark", "We don't store"). - **No marketing puffery.** Avoid "revolutionize", "seamless", "unleash", "supercharge", "best-in-class". - **Concrete > abstract.** "5 days to first agent" beats "rapid onboarding". "3.000 DKK / month + 1.000 / user" beats "flexible pricing". - **Italic for emphasis, never bold or color.** Pulled-out phrases use `` in Space Grotesk italic, rendered in `--accent` grey. - **One idea per paragraph.** Two sentences max. - **Danish-aware.** Mix in real Danish company names (Saxo Privatbank, Aalborg Brewery, Atelier København) and DKK pricing — this is a European product, not a translated American one. - **Quietly technical.** It is fine to reference *Article 14*, *Tier 3 data*, *DPA*, *append-only ledger* on a homepage. The audience reads it. **Casing.** Sentence case everywhere — headlines, buttons, nav. The only uppercase is the wordmark (`ARMADILLO.`) and short eyebrow labels (`COMPLIANCE & TECH STACK`, `EXAMPLE`). **Punctuation.** Em-dashes liberally for asides. No exclamation marks. No emoji. **Numbers.** Always with a separator — `3.000 DKK`, not `3000 DKK` (European convention). --- ## Visual foundations ### Surface The default page is **not white**. It's a cool light grey (`#DEDEE0`) with a *barely visible* vertical gradient — darker at the very top, lifting toward `#E4E4E4` at mid-page, settling to `#E0E0E1` at the bottom. This is the single most distinctive surface decision in the brand. White is reserved for inside cards and product UI. ``` linear-gradient(180deg, #D7D8DB 0%, #DEDEE0 18%, #E4E4E4 55%, #E0E0E1 100%) ``` ### Color palette | Role | Token | Hex | When | |---|---|---|---| | Page bg | `--bg` | `#DEDEE0` | default page | | Recessed | `--bg-2` | `#D2D3D6` | mid-page panels | | Paper | `--paper` | `#ECECEE` | cards, raised surfaces | | Ink | `--ink` | `#15161A` | primary text, primary button | | Body | `--ink-2` | `#4A4B50` | paragraph text | | Muted | `--muted` | `#8A8B90` | labels, meta | | Muted 2 | `--muted-2` | `#B5B6BA` | disabled, hairline copy | | Accent | `--accent` | `#6B6C71` | italic em, quiet emphasis | | Accent 2 | `--accent-2` | `#B8B9BD` | accents on dark surfaces | | Lime | `--lime` | `#C8E45F` | wordmark punctuation, ghost button hover, "live" / success pings | | Periwinkle | `--periwinkle` | `#D1D8F1` | selected state, in-product highlights | | Coral | `--coral` | `#FF6B57` | errors / attention (rare) | | Amber | `--amber` | `#E7C24A` | warning (rare) | | Dark | `--dark` | `#0C0C0A` | compliance & footer panels | | Dark 2 | `--dark-2` | `#16161A` | dark cards | **No blue. No cobalt. No neon.** Italic emphasis is *grey*, not a color accent. The lime green is the only place a saturated color appears — and only as a 6px pulsing dot indicating "now / live". ### Type | Style | Family | Weight | Notes | |---|---|---|---| | Display (hero) | Space Grotesk | 400 | tracking −0.035em, line-height 0.96 | | H1–H4 | Space Grotesk | 500 | tracking −0.025em | | Italic em | Space Grotesk *italic* | 400 | color `--accent`, never bold/colored | | Body | Figtree | 400 | 17px / 1.55 | | Labels (eyebrow) | Space Grotesk | 500 | 0.78rem, UPPERCASE, 0.04em tracking, leading 22×1px rule | | Mono | ui-monospace / JetBrains Mono | 400 | only in data displays, addons, ledger exports | The two-family pairing (geometric display + humanist body) is essential. Headlines are tight and confident; body copy is open and readable. ### Spacing 8px base. Section padding `130px` on desktop, `60–80px` on mobile. Generous breathing room — Armadillo never feels crowded. ### Borders & radii - **Lines are translucent ink**, not grey. `rgba(20,20,18,0.08)` for hairlines, `0.14` for stronger. - **Three radii**: `8 / 14 / 22`. The 22px is for big cards (pricing, testimonials). Pills are full radius (999). ### Shadows Layered, soft, *colored* (translucent ink, never pure black): ``` shadow-card: 0 1px 2px rgba(0,0,0,0.04) shadow-lift: 0 18px 36px -22px rgba(20,20,18,0.18) shadow-raise: 0 30px 60px -30px rgba(20,20,18,0.22) shadow-hover: 0 38px 70px -28px rgba(20,20,18,0.28) ``` ### Motion - **Easing.** `cubic-bezier(0.2, 0.7, 0.2, 1)` — fast in, slow out. - **Durations.** 120 / 200 / 350 / 500 ms. - **Hover.** Everything lifts 1–4px and gets a darker border / deeper shadow. Buttons lift 1px; cards lift 4px. - **The "live" dot.** Radar pulse expanding outward from a 5px dot every 1.8s. Used on `Now` pills and live agent indicators. - **Reduced motion.** Every animated component has `prefers-reduced-motion: reduce` opting out. ### Backgrounds - The hero, foundations, and pricing sections sit on the default `--bg` gradient. - Compliance, footer, statement, and final-CTA sections invert to a near-black `--dark` surface. - **There are no image backgrounds, no patterns, no textures, no blob shapes.** The interest is created by section transitions (animated bar charts between sections) and the dark/light cadence. ### Iconography See `icons.css`. Two systems: 1. **UI line icons** — Lucide-style, 24×24, `currentColor` stroke, no fill, `stroke-width 1.5`, round caps. Use the Lucide CDN as the practical source. Substitute the closest match for anything missing. 2. **Brand concept glyphs** — custom 40×40 SVGs wrapped in a `.brand-glyph` "coordinate frame" (corner ticks + a tiny `.accent-dot`). Used on foundation cards. One concept = one glyph. Hand-draw, don't generate. **Status dot.** A 5–6px circle indicating live state. Three flavors: static ink (`.dot`), lime "live" pulse (`.dot-live`), and ink "radar" ring pulse (`.dot-radar`). **Emoji policy.** No emoji in product chrome, marketing, slides, or print. Emoji is allowed only in user-generated content (chat). ### Imagery See `imagery.css`. Three sanctioned image modes: 1. **Portraits** — black-and-white, soft grey background, tight crop. Used for testimonials and team. 2. **Product mocks** — UI screenshots inside a paper-grey frame with a tight 1px border and soft shadow. Optionally a fake titlebar with three grey dots. 3. **Abstract glyphs** — orbit / coordinate-frame compositions in 1.2 stroke SVG. Used to illustrate the platform anatomy. **Off-brand:** stock photography, 3D renders, gradient blobs, isometric scenes, AI-generated photos. **Customer logos** — monochrome only, 70% opacity, all the same visual weight in the trusted-by strip. --- ## Layout rules - **Max content width** 1320px (`.container`), 1100px (`.container-tight`). - **Side padding** 28px desktop / 20px mobile. - **Floating nav.** The top nav is a sticky, centered, pill-shaped chrome — *not* a full-width bar. - **Section transitions.** Between major sections, a thin horizontal strip with 6 animated bars marks the cut — instead of decorative dividers. --- ## Caveats - Fonts are pulled from Google Fonts (Space Grotesk + Figtree). No self-hosted woff2 files are bundled — if offline use is needed, download them and point `colors_and_type.css` at the local copies. - Customer logos in `assets/` are placeholders matching what appears on the live site (`logo-carlsberg.png`, etc.) — replace with licensed versions before public use. - The print stylesheet assumes a Chromium-based PDF renderer (Paged.js or Chrome's "Save as PDF"). `@page` margin counters work cleanly there; older WeasyPrint may need tweaks. --- ## What to ask next I'd love your eyes on a few specific things: 1. **Type pairing** — Space Grotesk + Figtree is unusual. Confident, or should we try Inter / IBM Plex Sans as the body alternative? 2. **Lime green** — should the "live" pulse stay this saturated, or pull back toward an off-white? 3. **Print covers** — the sample uses a dark-page cover. Some brands prefer always-paper covers. Preference? 4. **Should there be a Danish-only voice variant**, or does the same tone in Danish work as-is?