Legion · Design System v1.0

Security for vibe coders, built from one consistent system.

The single source of truth for every Legion surface, the dark‑native product UI, the signed light‑theme PDF report, marketing, and email. Tokens, type, color, motion, components, and brand assets, all in one document.

2

Type families

18

Color tokens

12

Spacing steps

7

Product pages

01 / Color

Color

Dark‑native by default. Five surfaces, four text levels, three border weights, four severity colors, and one brand color, #3DDC97, reserved for verified, signed, and trusted states. Never decorative. Severity is semantic: red is what a finding is, not how the user should feel.

Surfaces

bg.canvas

#0A0B0D

Page background. The base layer.

bg.surface

#13151A

Sidebars and section panels.

bg.elevated

#1C1F26

Cards, inputs, popovers.

bg.subtle

#242831

Hover / active surfaces.

bg.inset

#06070A

Code regions inside cards.

Text on dark

text.primary · #F5F6F7

Primary, headings, finding titles, evidence.

text.secondary · #A1A8B3

Secondary, paragraphs and body copy.

text.tertiary · #858B97

Tertiary, labels, metadata, captions.

text.disabled · #4A5160

Disabled, inactive controls.

Brand · the verified‑green

brand.primary

#3DDC97

Signed, verified, trusted. The L‑mark cap. Scarcity rule: max one per visible region.

brand.primary.hover

#2EC585

Hover state for primary CTA.

brand.primary.pressed

#22A26D

Active / pressed state.

brand.primary.subtle

12% tint

Signed‑pill background, focus ring halo.

Severity, semantic, never decorative

Critical

A finding that should block a release. PAN in logs, exposed secret, RCE.

#FF4D5E

Warning

A finding to fix soon. SQL‑injection‑prone pattern, outdated dependency with CVE.

#FFB02E

Info

Worth knowing. Out‑of‑date package without known CVE, weak header policy.

#5B8AFF

Success

Verified pass. Equals brand.primary. DNS record verified, signed.

#3DDC97

02 / Typography

Typography

Two families. Inter for everything UI and prose. JetBrains Mono for every coordinate, file path, hash, snippet, DNS record, code, and timestamp, the texture of trust. Modular 1.25 scale on a 16 px base. Headings 700 with tightened tracking.

Scale · Inter

text.5xl

Find every card.

56 / 60 · 700

text.4xl

3 critical findings.

44 / 52 · 700

text.3xl

Quick Scan complete.

32 / 40 · 700

text.2xl

PAN logged in plain text

24 / 32 · 600

text.base

Body copy at 16 / 24, Inter 400. The default reading size.

16 / 24 · 400

text.sm

Secondary body and table cells.

13 / 20 · 400

text.xs

Captions · badges · timestamps.

12 / 16 · 400

Mono · the texture of trust

src/handlers/webhook.ts:142 · commit 3a7f1bc

scanned 2026-05-17 14:08 UTC · scanner v1.4.0

142 │ console.log('Processing card:', cardNumber)

legion-verify=lgn_4f8a92c1ab

Inline weight 400. 500 in finding headers. 600 for highlighted hashes. Never use mono for prose.

03 / Spacing & radii

Spacing & radii

4 px base unit. Every value is a multiple of 4. Generous whitespace is part of the brand, density comes from mono evidence inside a card, not from packed layout.

Spacing scale

space.14 px

space.28 px

space.312 px

space.416 px

space.624 px

space.832 px

space.1248 px

space.1664 px

Radii

radius.sm4 px

radius.md8 px

radius.lg12 px

radius.xl16 px

radius.full9999

04 / Motion

Motion

Disciplined and brief. Everything settles into stillness within ~1.2 s. Default easing cubic-bezier(0.2, 0.8, 0.2, 1). The L‑mark cap may pulse on scan‑complete and during scanning. Nowhere else. No bounce, no spring, no infinite shimmer except the skeleton. prefers-reduced-motion disables the cap pulse entirely.

dur.fast120 ms

Hover, press, focus transitions.

dur.base200 ms

Focus ring bloom, search‑bar rise.

dur.slow400 ms

Page‑level transitions, scan‑layer reveals.

ease.out0.2, 0.8, 0.2, 1

Default. Settle without overshoot.

05 / Logo & symbol

Logo & symbol

The Legion symbol is an L‑form with a verified‑signal cap. It reads three ways: the letter L, the corner of the file:line coordinate bracket every finding uses, and the cryptographic signature seal. The accent cap is fixed brand equity, never recolored, never re‑shaped.

Primary lockup, darklegion-logo-dark.svg

Primary lockup, lightlegion-logo-light.svg

Symbol, darklegion-symbol-dark.svg

Symbol, lightlegion-symbol-light.svg

06 / Iconography

Iconography

24×24 grid. 1.5 px stroke. Stroked, never filled. Geometric construction, circles, right angles, 45° diagonals. The pairing icon set is Lucide. Never substitute Heroicons, Material, Phosphor, or any rounded/filled set.

icon · rounded · dark

icon · rounded · light

icon · sharp · dark

icon · sharp · light

icon · mono · white

icon · mono · green

icon · mono · black

favicon

07 / Voice & rules

Voice & rules

The direct expert next door. Clear, grounded, never alarmist, never condescending. "You" addresses the customer. "We" is Legion the team. Never "I." Legion never alarms, the red is confident, not panicked.

Do

"Your webhook handler logs the raw card number to console output. Any service reading those logs sees the PAN in plain text."

Don't

"Great news, we found 12 critical issues!"

Do

"No scans yet. Connect a GitHub repository to start."

Don't

"Get your free report now!"

Do

"Layer 1 scanners running (1 of 3 complete)"

Don't

"Defeat your enemies, secure the perimeter."

08 / Components

Components

The product is built from a small set of repeatable elements. Each card below renders the live preview straight from the design system. Use these as the visual contract for any new surface.

Buttonspreview/component-buttons.html

Inputspreview/component-inputs.html

Formspreview/component-forms.html

Badgespreview/component-badges.html

Finding cardpreview/component-finding-card.html

Toast & tooltippreview/component-toast.html

Modal & dialogpreview/component-modal.html

Tabs & accordionpreview/component-tabs.html

Findings tablepreview/component-table.html

Progress & skeletonpreview/component-progress.html

Command palettepreview/component-command.html

Navpreview/component-nav.html

09 / Product pages

Product surfaces

Verified product surfaces from the preserved Legion UI kits. Each card opens an existing local prototype rather than a synthetic route.

01 / Visitor scan Secure scan landing Visitor-facing scan input, personalized context, cookie wall, and contact escape hatch. Open page ui_kits/legion-secure/legion-frontend/index.html 02 / Authentication Code sign-in The approved Code by Legion sign-in surface with GitHub OAuth and restrained authentication chrome. Open page ui_kits/legion-code/sign-in.html 03 / Onboarding New project Create a fresh GitHub repository or connect an existing one before entering the coding workspace. Open page ui_kits/legion-code/projects-new.html 04 / Scan operations Secure admin Operator console for scan queues, submissions, visitors, deep scans, and signature records. Open page ui_kits/legion-secure/legion-admin/index.html 05 / Signed artifact Signed PDF report Portable report specimen showing signed evidence, findings, and verification language. Open page source/claude-design/slides/signed-pdf-report.html 06 / Identity intelligence Sight dashboard Account-level dashboard for visitor, company, intent, automation, and integration workflows. Open page ui_kits/legion-sight/portal-dashboard.html 07 / Development Code dashboard Logged-in project home with repositories, recent work, status, and account navigation. Open page ui_kits/legion-code/dashboard.html 08 / Company Contact Legion Code Inc. contact route for inquiries that do not fit a product-specific flow. Open page ui_kits/legion-code-inc/index.html#/contact

Source files

colors_and_type.css, single‑file token + base‑style stylesheet (the source of truth)

preview/*.html, Design System tab cards, one concept per file

ui_kits/, verified local prototypes for Legion Secure, Code by Legion, Sight by Legion, and Legion Code Inc.

logos/, 19 canonical SVG mark variants