Netlify DESIGN.md
Brands
Modern web platform with bright teal-blue energy, black-and-white structure, and agent-ready developer tooling. Netlify's public site uses clean sans typography, strong contrast, code examples, and bright cyan/teal…
At a glance
- Group
- Brands
- Main color
- #00c7b7Teal design systems
- Fonts
- InterJetBrains Mono
Colors in this file
- #0f172a
Unnamed
- #dceeeb
Unnamed
- #00c7b7
Unnamed
- #111827
Unnamed
- #00a89a
Unnamed
- #ffffff
Unnamed
- #f5fbfa
Unnamed
- #64748b
Unnamed
Modern web platform with bright teal-blue energy, black-and-white structure, and agent-ready developer tooling. Netlify's public site uses clean sans typography, strong contrast, code examples, and bright cyan/teal accents.
1. Visual Theme & Atmosphere
Overall Aesthetic
Netlify feels like the modern web stack packaged for fast building and shipping.
Mood & Feeling
- Fast
- Developer-native
- Modern
- Agent-ready
- Productive
Design Density
Medium density. There is lots of capability detail, but sections remain clean and readable.
Visual Character
- White and black contrast zones
- Bright cyan-teal accents
- Code examples and workflow diagrams
- Polished developer-platform cards
2. Color Palette & Roles
| Token | Hex | Role |
|---|---|---|
--netlify-teal | #00C7B7 | Brand action accent |
--netlify-teal-deep | #00A89A | Hover/support |
--netlify-black | #0F172A | Dark contrast |
--netlify-white | #FFFFFF | Main surface |
--netlify-surface | #F5FBFA | Soft background |
--netlify-ink | #111827 | Text |
--netlify-muted | #64748B | Secondary text |
--netlify-border | #DCEEEB | Borders |
3. Typography Rules
Font Stack
css--font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
--font-sans: "Inter", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace;
Type Scale
Hero 58/700, H1 42/700, H2 30/700, Body 16/400, Small 14/400
Typography Philosophy
Use sharp, modern, web-native type with strong support for code and workflow examples.
4. Component Stylings
css.button-primary { background:#00c7b7; color:#0f172a; border:none; border-radius:999px; min-height:46px; padding:0 20px; font-weight:700; }
.button-secondary { background:#fff; color:#111827; border:1px solid #dceeeB; border-radius:999px; min-height:46px; padding:0 20px; }
.card { background:#fff; border:1px solid #dceeeB; border-radius:22px; box-shadow:0 12px 24px rgba(17,24,39,.06); }
.code-card { background:#0f172a; color:#fff; border-radius:20px; font-family:var(--font-mono); }
5. Layout Principles
Spacing Scale
4, 8, 12, 16, 24, 32, 48, 64px
Layout Behavior
- Organize by workflow: prompt, preview, ship
- Use code examples and platform primitives as core proof
- Keep developer actions obvious
6. Depth & Elevation
Netlify uses crisp developer-card elevation with contrast-rich code surfaces.
7. Do's and Don'ts
Do
- Keep it modern, web-native, and fast
- Use teal as a bright structural accent
- Preserve code and infra realism
Don't
- Don’t flatten it into generic enterprise SaaS
- Don’t bury workflow clarity under decorative visual noise
8. Responsive Behavior
Breakpoints
- Mobile
<768px - Tablet
768px-1023px - Desktop
1024px+
Responsive Rules
- Stack code examples and workflow cards
- Keep build/ship CTAs prominent
9. Agent Prompt Guide
textDesign this like Netlify: modern web-platform UI with teal accents, black-and-white contrast, crisp code-aware cards, workflow-first structure, and fast developer-tool clarity.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
Lattice
Brands · Inter
People management platform with a clean, professional aesthetic — white surfaces, teal-green brand, and performance-review-first UI.
LottieFiles
Brands · Inter
Animation platform and marketplace with a playful, creative aesthetic — vivid teal-green brand, white surfaces, and motion-first UI patterns.
Hoppscotch
Brands · Inter
Open-source API development platform with a vibrant dark aesthetic — deep surfaces, electric green brand accent, and request-testing-first UI.
Bitpanda
Brands · Bitpanda Compressed
Bitpanda was "founded in Vienna by Eric Demuth, Paul Klanschek, Christian Trummer with a mission to make Bitcoin accessible to everyone" in 2014; in 2015 it started brokerage for Bitcoin in the Austrian market. Its…
LaunchDarkly
Brands · Inter
Feature management design with bold teal identity, flag-first surfaces, targeting-rule clarity, and safe release confidence.
Drift
Brands · Inter
Conversational marketing design with bold teal identity, chat-first surfaces, real-time engagement UX, and pipeline-focused messaging.