OSPRY · Design System v1.0

Identity resolution, built from one consistent system.

Anonymous traffic becomes person- and company-level signal. This guide uses the same reference architecture, navigation, section order, grids, and component vocabulary as Legion Code Inc.

2
Type families
239
Design tokens
15
Components
22
Browser cards
01 / Color

Color

Dark-first by default. Five neutral surfaces, four text levels, three line weights, and four semantic accents. Green is scarce and reserved for verified identity, success, primary action, measured payoff, and the fixed logo details.

Surfaces
bg.canvas
#0A0B0D
Page background. Neutral near-black.
bg.surface
#13151A
Navigation and section panels.
bg.elevated
#1C1F26
Cards, controls, and popovers.
bg.subtle
#242831
Hover and active surfaces.
bg.inset
#06070A
Evidence and code regions.
Semantic accents
verified
#3DDC97
Verified people, success, and primary action.
interactive
#2BA8FF
Links, focus, install, and navigation.
enrich
#9B72FF
AI enrichment and profile context.
highlight
#E2683C
Intent and high-match evidence.
02 / Typography

Typography

Two families. Inter Variable for speech, headings, controls, and prose. JetBrains Mono Variable for data, numbers, labels, URLs, code, and evidence. If a robot produced it, it is mono. If a person says it, it is sans.

Scale · Inter
display
Resolve the visitor.
58 / 61 · 800
heading
Anonymous becomes known.
40 / 45 · 800
body
Identity signal with a measured, dated receipt.
16.5 / 25.5 · 400
Mono · evidence
visitor_7ab3 · resolved 2026-09-17 14:08 UTC
sample data · confidence 0.94 · source website event
01 │ Observe. Score. Profile. Reach. Yield.
identity.status=verified
03 / Spacing & radii

Spacing & radii

A 4px base scale with generous whitespace. Density belongs inside evidence cards, not in the overall layout.

Spacing scale
space.14 px
space.28 px
space.416 px
space.832 px
space.1664 px
space.32128 px
Radii
radius.md8 px
radius.lg12 px
radius.xl16 px
radius.2xl20 px
04 / Motion

Motion

Reveal upward by 26px over 800ms using the approved ease curve. Stagger by 80 to 120ms, permit at most one infinite loop per viewport, and respect reduced-motion preferences.

Do

Use motion to reveal resolution, verification, and measurable state changes.

Do not

Do not animate the bird, decorate the page with loops, or hide content behind motion.

06 / Iconography

Iconography

OSPRY needs no decorative icon font. Use the canonical bird symbol, wordmark, and restrained mono glyphs for functional evidence.

bird symbol
wordmark
✓
verified
→
direction
07 / Voice & rules

Voice & content rules

Short declarative sentences. Second person for the reader. Receipts before adjectives. Every fabricated interface is marked sample data, and every statistic includes a date and method.

Do

Use measured, dated numbers. Say “Anonymous becomes known.” Put the link last.

Do not

Do not say seamless, supercharge, revolutionize, empower, leverage, or game-changing.

Do

Use sentence case and one accent per section. Keep green scarce.

Do not

Do not use emoji, broad uppercase prose, undated claims, or unmarked fabricated data.

08 / Components

Components

Four browser cards collectively render all fifteen approved source components. They use the same standardized frame header, grid, source label, and launch behavior as the Legion reference guide.

Cards & stripscomponents/cards/cards.card.html

PersonCard, BriefCard, StatStrip, InstallField

Open specimen
Core primitivescomponents/core/core.card.html

Button, Chip, DemoTag, Eyebrow, Rowline, FitRing on glass

Open specimen
Navigation & FAQcomponents/navigation/navigation.card.html

NavBar, ThemeToggle, Faq

Open specimen
Decode Streamcomponents/stream/stream.card.html

The hero loop: anonymous rows resolve into named people

Open specimen
09 / Product surfaces

Product surfaces

Supported and reference-only surfaces remain explicit. No missing surface is silently invented.

01MarketingDark-first product story, verified moments, proof-led copy, and the one-accent rule.Open sourcesource/claude-design/brand-guide.html 02ApplicationFifteen approved source components covering primitives, cards, navigation, and decode stream.Open sourceui_kits/browser-manifest.json 03SocialFive registered templates for LinkedIn, OG, declarative, product, and measured-stat posts.Open sourcesource/claude-design/social/GUIDELINES.md 04MobileResponsive principles are documented. A dedicated mobile kit remains reference-only.Open sourceBRAND-GUIDE.md 05PresentationBrand rules apply, but no canonical slide system is approved.Open sourcebrand.json 06PrintExisting documents are references, not a complete print system.Open sourcebrand.json 07EmailNo approved email system exists. Stop and report the gap rather than inventing one.Open sourcebrand.json
Canonical files
brand.json · identity and surface status
tokens/tokens.json · DTCG source of truth
logos/manifest.json · canonical SVG roles and checksums
fonts/manifest.json · packaged type evidence
SKILL.md · agent execution rules