Drata DESIGN.md
Brands
Compliance automation design with confident blue identity, audit-ready surfaces, continuous monitoring clarity, and framework-mapped controls.
At a glance
- Group
- Brands
- Main color
- #1b4fd8Blue design systems
- Fonts
- InterJetBrains Mono
Colors in this file
- #ffffff
background
- #e2e8f0
Unnamed
- #1b4fd8
background
- #1239a5
Unnamed
- #059669
Unnamed
- #d97706
Unnamed
- #dc2626
Unnamed
- #7c3aed
Unnamed
- #f8fafc
Unnamed
- #1a2744
Unnamed
Compliance automation design with confident blue identity, audit-ready surfaces, continuous monitoring clarity, and framework-mapped controls.
1. Visual Theme & Atmosphere
Drata should feel confident, thorough, and trustworthy. The design language communicates SOC 2, ISO 27001, HIPAA compliance, automated evidence collection, and audit readiness at scale.
- Mood: confident, thorough, professional, reassuring
- Density: high, with control tables, evidence lists, audit timelines, and monitoring dashboards
- Character: confident blue brand, white audit surfaces, framework-color coding, green readiness indicators
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--drata-blue | #1B4FD8 | Primary brand CTA and nav |
--drata-blue-dark | #1239A5 | Hover and active states |
--drata-green | #059669 | Passing controls and audit-ready |
--drata-amber | #D97706 | In-progress and remediation needed |
--drata-red | #DC2626 | Failing controls and critical risks |
--drata-purple | #7C3AED | Premium and enterprise feature accent |
--surface-card | #FFFFFF | Control cards and evidence panels |
--surface-bg | #F8FAFC | Dashboard background |
--surface-sidebar | #1A2744 | Navigation sidebar |
--text-primary | #0F172A | Control titles and evidence labels |
--border-default | #E2E8F0 | Table and card borders |
The pass/fail/in-progress color scale is the most critical design element — it must be applied consistently across every compliance view.
3. Typography Rules
css--font-sans: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
| Element | Size | Weight | Line Height |
|---|---|---|---|
| Page Title | 30px | 700 | 1.1 |
| Section Title | 22px | 600 | 1.2 |
| Control Name | 16px | 600 | 1.3 |
| Body | 15px | 400 | 1.6 |
| Evidence Label | 13px | 500 | 1.4 |
| Readiness % | 32px | 700 | 1.0 |
| Label | 12px | 600 | 1.35 |
4. Component Stylings
css.button-primary {
min-height: 40px;
padding: 0 16px;
border: none;
border-radius: 8px;
background: #1B4FD8;
color: #FFFFFF;
font: 600 14px/1 Inter, sans-serif;
}
.control-card {
border: 1px solid #E2E8F0;
border-radius: 12px;
background: #FFFFFF;
padding: 20px;
}
.readiness-ring {
width: 80px;
height: 80px;
border-radius: 50%;
border: 6px solid #E2E8F0;
}
.framework-badge {
display: inline-flex;
padding: 3px 10px;
border-radius: 4px;
font: 700 11px/1.4 Inter, sans-serif;
text-transform: uppercase;
letter-spacing: 0.06em;
}
5. Layout Principles
| Token | Value | Usage |
|---|---|---|
--space-2 | 8px | Evidence item spacing |
--space-4 | 16px | Control card rhythm |
--space-6 | 24px | Section padding |
--space-10 | 40px | Framework section gaps |
Show overall readiness score prominently at the top. Group controls by framework, then by category. Failing controls should sort to the top automatically.
6. Depth & Elevation
css.shadow-card { box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06); }
.shadow-panel { box-shadow: 0 8px 24px rgba(27, 79, 216, 0.10); }
.shadow-modal { box-shadow: 0 20px 50px rgba(15, 23, 42, 0.16); }
Control list items are flat. Readiness summary panels use moderate shadow.
7. Do's and Don'ts
Do show the overall audit readiness percentage prominently. Do group controls by compliance framework. Do surface failing controls immediately. Do not bury evidence collection status. Do not use the same color for passing controls and brand CTAs.
8. Responsive Behavior
| Breakpoint | Min Width | Behavior |
|---|---|---|
| Mobile | 0px | Readiness summary, simplified control list |
| Tablet | 768px | Control list with status filters |
| Desktop | 1200px | Full dashboard: sidebar + control table + evidence panel |
Compliance management is desktop-primary; mobile for executives checking readiness status.
9. Agent Prompt Guide
Design like Drata: confident blue CTAs, dark sidebar navigation, control-state color coding, readiness percentage prominently displayed, framework-badge labels, and audit-ready hierarchy.
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
Paddle
Brands · Inter
SaaS payment infrastructure with a clean, merchant-confident aesthetic — deep blue brand, green revenue accents, and billing-dashboard-first UI.
GitBook
Brands · Inter
Knowledge-layer design with polished documentation surfaces, AI-ready content tools, and warm editorial accents.
Amplitude
Brands · Inter
Product analytics design with bold blue identity, data-dense dashboards, Inter typography, and insight-first surfaces.
Spline
Brands · Inter Display
Immersive, dark 3D-first design built around a near-black canvas, glossy interactive 3D scenes, and a crisp blue accent. Spline's public brand feels futuristic yet playful, using real-time 3D objects, soft lighting,…
Tailscale
Brands · Inter
Secure networking design with calm infrastructure clarity, friendly mesh diagrams, and low-friction admin surfaces.
Pendo
Brands · Inter
Product experience design with bold indigo identity, in-app guide surfaces, NPS-first feedback clarity, and product-led growth UX.