Snyk DESIGN.md
Brands
Developer security design with dark product confidence, bright green remediation cues, and clear vulnerability-to-fix workflows.
At a glance
- Group
- Brands
- Main color
- #145cffBlue design systems
- Fonts
- InterSF Mono
Colors in this file
- #ffffff
background
- #145cff
background
- #0b1220
background
- #e11d48
Unnamed
- #e2e8f0
Unnamed
- #00d084
Unnamed
- #7c3aed
Unnamed
- #f8fafc
Unnamed
- #64748b
Unnamed
Developer security design with dark product confidence, bright green remediation cues, and clear vulnerability-to-fix workflows.
1. Visual Theme & Atmosphere
Snyk should feel like application security built for developers, not a detached compliance console. The interface needs to support code, dependencies, containers, IaC, AI security, risk prioritization, and remediation without losing speed.
- Mood: secure, developer-native, urgent but controlled, practical
- Density: medium-to-high for finding lists and issue details
- Character: dark navy surfaces, green fix/success cues, crisp risk cards, code-forward panels
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--snyk-navy | #0B1220 | Deep product background |
--snyk-blue | #145CFF | Link and primary action |
--snyk-green | #00D084 | Fix, success, and safe state |
--snyk-purple | #7C3AED | AI/security insight accent |
--snyk-red | #E11D48 | Critical vulnerability state |
--surface-page | #F8FAFC | Light page background |
--surface-card | #FFFFFF | Cards and dashboards |
--border-default | #E2E8F0 | Dividers and inputs |
--text-muted | #64748B | Helper text and metadata |
Use red for real risk, green for fixability and success, and blue for neutral action.
3. Typography Rules
css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-mono: "SF Mono", "JetBrains Mono", "Roboto Mono", Menlo, monospace;
| Element | Size | Weight | Line Height |
|---|---|---|---|
| Hero Display | 58px | 700 | 1.05 |
| Page Title | 40px | 700 | 1.12 |
| Section Title | 30px | 650 | 1.2 |
| Finding Title | 18px | 650 | 1.3 |
| Body | 16px | 400 | 1.6 |
| Code | 13px | 500 | 1.55 |
| Label | 13px | 600 | 1.35 |
4. Component Stylings
css.button-primary {
min-height: 44px;
padding: 0 18px;
border: 1px solid #145CFF;
border-radius: 10px;
background: #145CFF;
color: #FFFFFF;
font: 600 14px/1 Inter, sans-serif;
}
.finding-card {
border: 1px solid #E2E8F0;
border-radius: 14px;
background: #FFFFFF;
padding: 18px;
}
.severity-critical {
border-left: 4px solid #E11D48;
}
.code-panel {
border-radius: 14px;
background: #0B1220;
color: #FFFFFF;
padding: 16px;
}
5. Layout Principles
| Token | Value | Usage |
|---|---|---|
--space-2 | 8px | Severity rows |
--space-4 | 16px | Dashboard rhythm |
--space-5 | 24px | Detail panels |
--space-8 | 48px | Sections |
Prioritize vulnerability severity, exploitability, affected package/code, owner, and remediation path.
6. Depth & Elevation
css.shadow-card { box-shadow: 0 8px 18px rgba(11, 18, 32, 0.08); }
.shadow-overlay { box-shadow: 0 24px 56px rgba(11, 18, 32, 0.18); }
Use borders for dense lists and elevation for focused remediation workflows.
7. Do's and Don'ts
Do show risk and fix path together. Do keep security states unmistakable. Do not use alarming color without context. Do not hide dependency or code evidence.
8. Responsive Behavior
| Breakpoint | Min Width | Behavior |
|---|---|---|
| Mobile | 0px | Stack findings and remediation details |
| Tablet | 768px | Two-column issue/detail views |
| Desktop | 1200px | Full dashboard with filters, code, and remediation panels |
Code panels should scroll horizontally on small screens.
9. Agent Prompt Guide
Design like Snyk: developer-first security UI, dark code panels, severity-driven finding cards, green fix cues, clear remediation flow, and practical AppSec dashboard density.
Use it with your agent
Save the file as DESIGN.md in your project root, then ask your agent to follow it for UI work. Or let the agent fetch it over MCP.
Download
MCP server
MCP tool call
Related Design.md files
Algolia
Brands · Inter
AI search and discovery design with deep navy trust, electric blue action, and fast, relevance-first product structure.
Render
Brands · Inter
Cloud platform design with clean builder-first surfaces, blue production accents, and simple deploy-to-scale workflows.
Character.AI
Brands · At Hauss
Consumer AI entertainment design with conversational surfaces, creator discovery, and a lively blue-led interaction system.
Tailscale
Brands · Inter
Secure networking design with calm infrastructure clarity, friendly mesh diagrams, and low-friction admin surfaces.
Brex
Brands · Brex Sans
Intelligent finance for high-speed companies. Brex's current public site pairs deep ink and white surfaces with saturated electric-blue accents, rounded enterprise product cards, AI-forward messaging, and…
Affirm
Brands · Calibre
Buy-now-pay-later fintech with deep blue trust, consumer-retail clarity, and installment-friendly messaging. Affirm's public site uses navy and blue accents, white surfaces, rounded cards, and purchase-focused…