DeepMind DESIGN.md
Brands
AI research design with deep indigo identity, science-first surfaces, precision typography, and breakthrough-focused visual storytelling.
At a glance
- Group
- Brands
- Main color
- #3c3cccBlue design systems
- Fonts
- Google SansFreight DisplayJetBrains Mono
Colors in this file
- #3c3ccc
background
- #ffffff
background
- #0a0a23
Unnamed
- #0d0d1a
background
- #e5e7eb
Unnamed
- #00bfa5
Unnamed
- #00e5ff
Unnamed
- #7c3aed
Unnamed
- #f8f9ff
Unnamed
- #eef2ff
background
AI research design with deep indigo identity, science-first surfaces, precision typography, and breakthrough-focused visual storytelling.
1. Visual Theme & Atmosphere
DeepMind should feel brilliant, rigorous, and forward-looking. The design language communicates AI safety, scientific discovery, AlphaFold, Gemini, and the pursuit of beneficial general intelligence.
- Mood: visionary, rigorous, optimistic, authoritative
- Density: low-to-medium, with research-focused long-form content and data visualizations
- Character: deep indigo brand, near-black scientific surfaces, neural network accent teal, protein-structure gradients
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--dm-indigo | #3C3CCC | Primary brand CTA and highlights |
--dm-deep | #0A0A23 | Hero and dark scientific surfaces |
--dm-teal | #00BFA5 | Neural network and research accent |
--dm-cyan | #00E5FF | Data visualization and flow accent |
--dm-purple | #7C3AED | Model and architecture accent |
--dm-white | #FFFFFF | Text on dark, content surfaces |
--surface-light | #F8F9FF | Light research content pages |
--surface-dark | #0D0D1A | Dark visualization panels |
--text-primary | #0A0A23 | Body copy on light surfaces |
--border-default | #E5E7EB | Section and card borders |
Deep indigo for primary CTAs. Teal and cyan for scientific data visualization only — never as navigation or UI chrome.
3. Typography Rules
css--font-sans: "Google Sans", Inter, ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-serif: "Freight Display", Georgia, serif;
--font-mono: "JetBrains Mono", "Roboto Mono", Menlo, monospace;
| Element | Size | Weight | Line Height |
|---|---|---|---|
| Hero Display | 72px | 300 | 1.0 |
| Page Title | 48px | 400 | 1.08 |
| Section Title | 32px | 400 | 1.2 |
| Research Title | 24px | 500 | 1.3 |
| Body | 18px | 400 | 1.8 |
| Caption | 14px | 400 | 1.5 |
| Label | 12px | 500 | 1.35 |
Use light weight (300-400) for display type — this conveys scientific authority without aggression.
4. Component Stylings
css.button-primary {
min-height: 48px;
padding: 0 28px;
border: none;
border-radius: 8px;
background: #3C3CCC;
color: #FFFFFF;
font: 500 16px/1 "Google Sans", sans-serif;
}
.research-card {
border: 1px solid #E5E7EB;
border-radius: 16px;
background: #FFFFFF;
padding: 28px;
overflow: hidden;
}
.dark-viz-panel {
border-radius: 20px;
background: #0D0D1A;
padding: 32px;
overflow: hidden;
}
.paper-tag {
display: inline-flex;
padding: 4px 12px;
border-radius: 999px;
background: #EEF2FF;
color: #3C3CCC;
font: 500 13px/1.4 Inter, sans-serif;
}
5. Layout Principles
| Token | Value | Usage |
|---|---|---|
--space-4 | 16px | Content block rhythm |
--space-8 | 32px | Section separation |
--space-16 | 64px | Major page sections |
--space-24 | 96px | Hero and marquee sections |
Long-form research content needs generous line-height and measure (65-75 characters). Visualizations should be given full-width treatment with no competing elements.
6. Depth & Elevation
css.shadow-card { box-shadow: 0 4px 16px rgba(10, 10, 35, 0.08); }
.shadow-viz { box-shadow: 0 20px 60px rgba(60, 60, 204, 0.20); }
.shadow-modal { box-shadow: 0 32px 80px rgba(10, 10, 35, 0.24); }
Visualization panels deserve prominent shadows to feel like portals into scientific discovery.
7. Do's and Don'ts
Do use thin/light weight for display typography — it reads as scientific confidence. Do give data visualizations generous space. Do cite research papers clearly. Do not use aggressive sales CTAs in research contexts. Do not clutter hero sections with multiple competing messages.
8. Responsive Behavior
| Breakpoint | Min Width | Behavior |
|---|---|---|
| Mobile | 0px | Stacked research cards, simplified data viz |
| Tablet | 768px | Two-column research grid, inline charts |
| Desktop | 1200px | Full-bleed visualization sections, multi-column research catalog |
Give visualizations more space on every breakpoint — they carry the scientific narrative.
9. Agent Prompt Guide
Design like DeepMind: deep indigo CTAs, light-weight scientific typography, near-black visualization panels, teal neural-network accents, generous whitespace, and breakthrough-research visual 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
WorkOS
Brands · Inter
Enterprise auth design with confident blue identity, SSO-first surfaces, admin portal clarity, and B2B-ready integration UX.
Airbyte
Brands · Inter
Open-source data integration design with bold blue identity, connector-catalog surfaces, pipeline-flow clarity, and ELT-first developer UX.
Cal.com
Brands · Inter
Open-source scheduling infrastructure with a developer-friendly, minimal aesthetic — dark surfaces, crisp whites, and calendar-driven UI patterns.
Composio
Brands · abcDiatype
A developer-tools brand for AI-agent tool integration whose marketing surfaces lean into a dark, technical aesthetic with a single deep-electric-blue voltage (#0007cd). The page floor is near-black (#0f0f0f); cards…
Coda
Brands · Inter
All-in-one doc design with bold indigo identity, canvas-first surfaces, flexible grid UX, and building-block content hierarchy.
Together AI
Brands · Inter
AI inference platform with a sleek dark aesthetic — deep navy-black surfaces, electric blue-purple brand gradient, and API-first developer UI.