MongoDB
mongodb.com“MongoDB projects a confident, developer-centric identity that balances enterprise reliability with modern innovation. The brand feels technical yet accessible, using a bold green accent to signal growth and speed against a clean, structured foundation.”
Color Palette
Colors
Light Mode
Dark Mode
Typography
Fonts
Times New Roman
MongoDB Value Serif
Euclid Circular A
Arial
Euclid Circular A
Helvetica Neue, Helvetica, Arial, sans-serif
The quick brown fox
16pxThe quick brown fox
64pxThe quick brown fox
36pxThe quick brown fox
36pxThe quick brown fox
36pxComponents
Design System
rgba(0, 30, 43, 0.12) 0px 26px 44px 0px, rgba(0, 0, 0, 0.13) 0px 7px 13px 0px
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.15) 0px 3px 9px 0px
linear-gradient(90deg, rgb(0, 233, 122) 0px, rgb(0, 212, 235) 25%, rgb(233, 255,...
linear-gradient(90deg, rgb(0, 104, 74), rgba(0, 237, 100, 0.6) 50%, rgb(0, 120, ...
Voice & Tone
Personality
Visual Energy
Design Era
contemporary-minimal
Emotional Tone
confident-reliable
Target Audience
Software engineers, CTOs, and product builders looking for scalable, modern data solutions.
Comparable Brands
Brand Rules
Dos & Don'ts
Do
- Use Euclid Circular A (500 weight) for primary headings and body text, ensuring title-case formatting for all headings.
- Apply the primary brand green (#00ed64) exclusively to primary Call-to-Action buttons, paired with dark text (#001e2b) for high contrast.
- Implement multi-layer shadows on cards using rgba(0, 30, 43, 0.12) 0px 26px 44px 0px and rgba(0, 0, 0, 0.13) 0px 7px 13px 0px to create depth.
- Use 4px border-radius for primary buttons and small UI elements to maintain a sharp, precise aesthetic.
- Utilize the accent green (#00ed64) and primary green (#00684a) in linear gradients for background highlights or hero sections to signal innovation.
- Keep body copy concise and technical, using Euclid Circular A 400 weight with a clean, airy layout.
- Use outline buttons with 0px border-radius for secondary navigation or 'View All' actions, featuring blue text (#006cfa) and a subtle border (#5d6c74).
- Reserve Times New Roman for specific editorial or long-form body contexts if needed, but prioritize Euclid Circular A for digital interfaces.
Don't
- Do not use emoji in marketing copy or UI elements; the brand maintains a professional, serious tone.
- Avoid exclamation marks in headlines and body copy; use strong, action-oriented imperative verbs instead.
- Do not use serif fonts (like MongoDB Value Serif) for body text or UI components; reserve them only for specific editorial headings if applicable.
- Avoid pill-shaped buttons (100px radius) for primary actions; stick to the 4px radius for a more technical, precise look.
- Do not use bright white backgrounds with low-contrast text; ensure high accessibility with #000000 or #001e2b text on white.
- Avoid flat, single-shadow designs; the brand uses layered shadows to create a sense of premium depth and hierarchy.
- Do not use random or vibrant accent colors outside the defined green (#00ed64, #00684a) and blue (#006cfa) palette.
Design Assets
Visual Elements
How to use this file
1. Save this file as DESIGN.md in your project root (sibling to README.md).
2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.
3. Validate or export tokens with the official CLI:
npx @google/design.md lint DESIGN.md npx @google/design.md export --format tailwind DESIGN.md
Developer Access
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/mongodb.com \
-H "x-api-key: ev_your_key"
# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
-H "x-api-key: ev_your_key"
# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
-H "x-api-key: ev_your_key"Extract your own brand kit
Get colors, fonts, voice, and personality from any website in seconds. Open source.