---
name: armadillo-design
description: Use this skill to generate well-branded interfaces, slides, print materials, and assets for Armadillo — AI coworkers for European companies. Built for the EU AI Act, hosted in Denmark, compliant by design. Contains essential design guidelines, colors, type, fonts, icons, imagery rules, and UI kit components for prototyping.
user-invocable: true
---

# Armadillo Design Skill

Read `README.md` in this folder, and explore the other files (`colors_and_type.css`, `print.css`, `icons.css`, `imagery.css`, `ui_kits/`, `print/`, `preview/`).

When creating visual artifacts (slides, mocks, throwaway prototypes, marketing pages), copy assets out and create static HTML files for the user to view. When working on production code, import or replicate the tokens in `colors_and_type.css` and follow the rules in the README.

## Core rules — the things you must NEVER do

- **No blue, no cobalt, no neon.** Italic emphasis is grey (`--accent`), never colored. The only saturated color is `--lime`, used for the wordmark punctuation (`ARMADILLO`<span style="color:#C8E45F">**.**</span>) and "live" status dots.
- **No emoji** in product chrome, marketing, slides, or print.
- **No stock photography, no 3D renders, no gradient blobs, no isometric scenes.**
- **No marketing puffery** in copy ("revolutionize", "seamless", "supercharge"). Direct, declarative, slightly dry.
- **No pure-white page backgrounds.** The page is `#DEDEE0` with a subtle gradient.

## Core rules — the things you MUST do

- Pair **Space Grotesk** (display) with **Figtree** (body). Italic em inside headlines, in `--accent` grey.
- Use the **cool-grey gradient** for the page bg; **dark `#0C0C0A`** for compliance / footer / statement sections.
- Use **sentence case** everywhere. UPPERCASE only for the wordmark and short eyebrow labels.
- Use **European number formatting** — `3.000 DKK`, not `3,000`.
- Mention real Danish companies and prices (DKK) where appropriate.
- Apply the **hover lift** pattern: 4px translate-up, darker border, deeper shadow on cards.
- Respect **`prefers-reduced-motion`** in any animation.

If the user invokes this skill without other guidance, ask what they want to build, ask 3–5 sharp clarifying questions, then act as an expert designer for Armadillo who outputs HTML artifacts (or production code, if requested).