skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-mongodb

Apply MongoDB's design system tokens, typography, and components when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#brand guidelines#ui design#dark mode#mongodb
One-click install
npx skills add https://github.com/deepparser/skills --skill design-mongodb-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-mongodb
Source: https://github.com/deepparser/skills/tree/main/design-mongodb
Command: npx skills add https://github.com/deepparser/skills --skill design-mongodb-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match MongoDB's visual identity requires exact design tokens — colors, fonts, shadows, and spacing — that are tedious to reverse-engineer from the live site. This Skill provides the complete MongoDB design system so generated UI is brand-accurate on the first pass. ## Core Features & Use Cases - Complete Design Tokens: Exact color palette (Forest Black #001e2b, MongoDB Green #00ed64), typography scale (MongoDB Value Serif, Euclid Circular A, Source Code Pro), spacing, radius, and teal-tinted shadow values. - Component Specifications: Detailed styling rules for pill buttons, cards, forms, navigation, and the signature neon green accent underlines, plus do's and don'ts for brand fidelity. - Light & Dark Previews: Bundled HTML preview files (preview.html and preview-dark.html) demonstrate the dual-mode design system for visual verification. - Use Case: When asked to build a landing page or dashboard styled like MongoDB, the Skill supplies every hex value, font size, and shadow definition needed to produce a faithful implementation. ## Quick Start Use the design-mongodb skill to create a landing page hero section styled like MongoDB's website.

Frequently Asked Questions about design-mongodb

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make a website look like MongoDB's design?▼

Use MongoDB's design tokens: Forest Black (#001e2b) for dark sections, MongoDB Green (#00ed64) as a sparing accent, MongoDB Value Serif for hero headlines, and Euclid Circular A for body text. Pill-shaped buttons and teal-tinted shadows complete the look.

What fonts does MongoDB use on its website?▼

MongoDB uses three fonts: MongoDB Value Serif for large hero headlines, Euclid Circular A for body and UI text across weights 300-700, and Source Code Pro for code and uppercase technical labels with wide letter-spacing.

Does this skill include dark mode design guidance?▼

Yes, the skill covers MongoDB's dual-mode design with dark teal hero sections and light content sections. It bundles preview-dark.html and preview.html files showing both theme implementations with exact CSS values.

What colors should I avoid when designing in MongoDB style?▼

Avoid pure black backgrounds (use teal-black #001e2b instead), warm colors of any kind, and standard gray shadows. MongoDB Green (#00ed64) should never be used as a background, only as an accent for text and underlines.

How do MongoDB-style buttons and shadows work?▼

Buttons use pill shapes with 100px border radius, typically with #00684a green backgrounds or #1c2d38 dark teal variants. Primary card shadows are teal-tinted: rgba(0,30,43,0.12) 0px 26px 44px, keeping depth within the brand color world.

Related Skills

Explore More Design & Creative Skills→
pikkujspikkujs

copywriting

Generate conversion-focused marketing copy for web pages.

Official
Intermediate
hasnahasna

codegen

Generate framework-specific code from json-render UI specification trees.

Official
Intermediate
OmOc3OmOc3

adapt

Coordinate responsive design workflows with breakpoints, fluid layouts, and touch targets.

Community
Intermediate
fengjutianfengjutian

brandkit

Generate brand guidelines images with logo systems and identity decks.

Community
Advanced