Design System Overview

VLN’s design system provides a comprehensive set of tools and guidelines for creating consistent, professional interfaces.

Design Principles

• High-trust — Professional, secure appearance
• Research Lab aesthetic — Technical, sophisticated
• Zero neon/cyberpunk — Refined, premium feel
• Minimal motion — Purposeful animations only
• WCAG AAA Compliant — Accessible to all users

Key Components

• Colors — 5-color palette with semantic variants
• Typography — Inter (primary), JetBrains Mono (technical)
• Spacing — 12px base radius, consistent padding
• Shadows — Soft glow effects (no harsh shadows)
• Animations — Subtle transitions and interactions

Quick References

• Color Palette
• Design Tokens
• Components
• Animations
• UX Flows

More design documentation is being migrated from the DevOps repository.