Radius
A comprehensive design system built from the ground up — tokens, components, and patterns scaled across multiple product teams.
Foundations
Design tokens (color, typography, space), light/dark themes, density scales, and motion.
Components
Button, Input, Tabs, Table, Empty State
Scan Result Card, Finding Detail Drawer, Diff Viewer, Policy Builder, Rule Chips, Severity Badge, Status Timeline, Code Snippet with copy
Patterns
- Progressive disclosure for technical depth
- Inline explainers ("Why is this risky?")
- Review & publish workflows
- Wizard setup flows
- Zero-state guidance
Accessibility
- WCAG 2.2 AA color contrast
- Keyboard focus order
- Live regions for scan status
- Reduced motion option
Data Visualization
To help users make sense of model scan results and policy trends, the Radius Design System also included reusable chart components.
Started with horizontal bar charts for comparing risk categories and severities, vertical bar charts for stacked comparisons, line charts for visualizing trends over time (e.g., vulnerabilities detected per week), and donut charts for proportional breakdowns (e.g., issue categories).
Designed with clear labeling, tooltips for exact values, and accessibility in mind. The system defined color variables and tokens that allow designers to easily toggle between light and dark modes for all chart and UI components.
Challenges & Solutions
Users span ML, Platform, and SecOps — jargon and mental models differ. Solved with role-based defaults, glossary tooltips, and progressive disclosure. Added inline "Explain this finding" with short rationale and link to deeper docs.
Security tools fail when users don't trust results. Calibrated severity & confidence badges, grouped duplicates, clear provenance (file, operator, line/offset). "Why flagged" evidence, sample remediations, de-dupe across pipelines, and one-click risk acceptance with expiry.
CI gates can frustrate developers if slow or opaque. Designed a local scanner path (Docker) for fast pre-commit checks, plus CI templates with estimated runtime view to show what would fail before enforcing.
Expressing complex security requirements in a friendly UI. Policy Builder with rule cards, natural language assist ("Block non-standard TF ops"), scoping (env/project), simulation ("show me projects affected"), versioning + diff on publish.
Scan results can be huge. Table virtualization, column presets per persona, smart grouping (by model, by vuln type), and a finding detail drawer with tabs (Summary, Evidence, Policy, Remediation, History).
Compliance teams need defensible evidence. Designed attestations/SBOM export, immutable audit log, report templates (quarterly compliance, vendor review), and clear lineage from policy to scan to action.
Outcomes
Users reported faster understanding of "what's wrong and what to do next."
Local scanning + CI templates reduced setup time; policy preview decreased accidental gate failures.
Role-tailored defaults and better evidence improved trust in findings.
Radius DS accelerated new features and ensured consistency across app + docs.
Next Steps
- Expand policy packs (industry baselines), deeper integrations (AWS Bedrock, popular MLOps stacks)
- Add team workflows (review queues, SLAs) and richer analytics (risk burn-down, model hygiene score)
- Extend the DS to a public component library for partners