Legion Design Skill
Read the README.md file within this skill, and explore the other available files. The key references:
README.md — brand overview, content fundamentals, visual foundations, iconography, index of files.colors_and_type.css — the canonical token layer. Use these CSS variables; never raw hex. Drop the file into any new HTML artifact via <link rel="stylesheet" href="path/to/colors_and_type.css">.assets/logos/ — 19 SVG logo variants. Use legion-logo-dark.svg on dark, legion-logo-light.svg on light, legion-symbol.svg (currentColor) for inline.assets/legion-social-bg.png — the OG/social background. The only ambient image in the system.preview/ — design-system cards, one concept per file, useful as reference snippets when you need to recall a token usage.ui_kits/legion-portal/ — production-fidelity React components for the five core product pages. Copy components from here when building related surfaces.
When this skill is invoked
If the user invokes this skill without other guidance, ask what they want to build and ask focused questions, then act as an expert designer. Outputs may be HTML artifacts (mocks, prototypes, decks) or production-ready code — choose based on the need.
Hard rules that distinguish Legion from a generic dev tool
Brand-primary scarcity. #3DDC97 appears no more than once per visible region. It is the verified/signed signal. If a screen already has a Signed pill, don't make the primary CTA green too — outline it, or promote a neutral CTA.
Mono is the texture of trust. Every file path, line number, commit hash, snippet, DNS record, code, and timestamp uses JetBrains Mono. Inter is for prose only. The presence of mono signals "this is verifiable evidence."
Severity is semantic, never decorative. severity.critical red is what a finding is, not how the user should feel. Never use severity colors as accent decoration, divider colors, or marketing energy.
Voice: direct expert next door. State facts. Never alarm. Never moralize. Never celebrate bad results. No emoji in product UI or reports. No military metaphors. No "Oops!", no "Great news!". Use the plain-English equivalent — and always pair the technical term with a concrete user-facing explanation.
Dark theme is primary. Light theme exists only for the signed PDF report and printed material.
No decorative motion. Only the L mark's cap may pulse (during scan, on scan complete). Everything else settles in under 1.2 s using --ease-out. No bounce, no spring, no shimmer except the skeleton.
Animation respects prefers-reduced-motion. Disable the cap pulse and any rise/fade animations when set.
Producing artifacts
For mocks, decks, throwaway prototypes:
- Copy
colors_and_type.css into the project (or link via relative path).
- Copy the specific logo SVGs you need from
assets/logos/.
- Use the dark canvas (
background: var(--bg-canvas)); only switch to light for a PDF/report layout.
- Lean on
preview/ for visual reference of how tokens combine.
For production code:
- The token names map 1:1 to what production CSS variables should be. The team ships SvelteKit + shadcn-svelte anatomy.
- Treat the React components in
ui_kits/legion-portal/ as the visual specification, not the implementation. Port to Svelte; keep the token references and the structural anatomy.
Forbidden in any Legion artifact
- Emoji inside product UI or signed reports.
- Bluish-purple gradient backgrounds, glow effects, decorative drop-shadows on dark.
- Stock dev photography, illustrations of people, hand-drawn graphics.
- "100% secure", "Enterprise", "Vulnerability" (to non-tech audiences) — see
messaging-and-naming.md in the source codebase for the full forbidden list.
- Recoloring or animating the logo's green cap (the cap is fixed brand equity; subtle pulse on scan-complete only).
- Inventing new accent colors or new severity hues — there are exactly four severities and one brand color.
1---2name: legion-design3description: Use this skill to generate well-branded interfaces and assets for Legion, either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.4---56# Legion Design Skill78Read the `README.md` file within this skill, and explore the other available files. The key references:910- `README.md` — brand overview, content fundamentals, visual foundations, iconography, index of files.11- `colors_and_type.css` — the canonical token layer. Use these CSS variables; never raw hex. Drop the file into any new HTML artifact via `<link rel="stylesheet" href="path/to/colors_and_type.css">`.12- `assets/logos/` — 19 SVG logo variants. Use `legion-logo-dark.svg` on dark, `legion-logo-light.svg` on light, `legion-symbol.svg` (currentColor) for inline.13- `assets/legion-social-bg.png` — the OG/social background. The only ambient image in the system.14- `preview/` — design-system cards, one concept per file, useful as reference snippets when you need to recall a token usage.15- `ui_kits/legion-portal/` — production-fidelity React components for the five core product pages. Copy components from here when building related surfaces.1617## When this skill is invoked1819If the user invokes this skill without other guidance, ask what they want to build and ask focused questions, then act as an expert designer. Outputs may be HTML artifacts (mocks, prototypes, decks) or production-ready code — choose based on the need.2021## Hard rules that distinguish Legion from a generic dev tool22231. **Brand-primary scarcity.** `#3DDC97` appears no more than once per visible region. It is the verified/signed signal. If a screen already has a Signed pill, don't make the primary CTA green too — outline it, or promote a neutral CTA.24252. **Mono is the texture of trust.** Every file path, line number, commit hash, snippet, DNS record, code, and timestamp uses JetBrains Mono. Inter is for prose only. The presence of mono signals "this is verifiable evidence."26273. **Severity is semantic, never decorative.** `severity.critical` red is what a finding *is*, not how the user should feel. Never use severity colors as accent decoration, divider colors, or marketing energy.28294. **Voice: direct expert next door.** State facts. Never alarm. Never moralize. Never celebrate bad results. No emoji in product UI or reports. No military metaphors. No "Oops!", no "Great news!". Use the plain-English equivalent — and always pair the technical term with a concrete user-facing explanation.30315. **Dark theme is primary.** Light theme exists only for the signed PDF report and printed material.32336. **No decorative motion.** Only the L mark's cap may pulse (during scan, on scan complete). Everything else settles in under 1.2 s using `--ease-out`. No bounce, no spring, no shimmer except the skeleton.34357. **Animation respects `prefers-reduced-motion`.** Disable the cap pulse and any rise/fade animations when set.3637## Producing artifacts3839For mocks, decks, throwaway prototypes:40- Copy `colors_and_type.css` into the project (or link via relative path).41- Copy the specific logo SVGs you need from `assets/logos/`.42- Use the dark canvas (`background: var(--bg-canvas)`); only switch to light for a PDF/report layout.43- Lean on `preview/` for visual reference of how tokens combine.4445For production code:46- The token names map 1:1 to what production CSS variables should be. The team ships SvelteKit + shadcn-svelte anatomy.47- Treat the React components in `ui_kits/legion-portal/` as the visual specification, not the implementation. Port to Svelte; keep the token references and the structural anatomy.4849## Forbidden in any Legion artifact5051- Emoji inside product UI or signed reports.52- Bluish-purple gradient backgrounds, glow effects, decorative drop-shadows on dark.53- Stock dev photography, illustrations of people, hand-drawn graphics.54- "100% secure", "Enterprise", "Vulnerability" (to non-tech audiences) — see `messaging-and-naming.md` in the source codebase for the full forbidden list.55- Recoloring or animating the logo's green cap (the cap is fixed brand equity; subtle pulse on scan-complete only).56- Inventing new accent colors or new severity hues — there are exactly four severities and one brand color.
legioncodeinc