Mountain View Bright

A clean, colorful, and universally accessible design system rooted in material design principles. Mountain View Bright uses a signature four-color palette — blue, red, yellow, and green — against crisp white surfaces with clear elevation hierarchy. The aesthetic is optimistic, organized, and information-rich, designed to make complex tools feel simple and approachable for billions of users worldwide.

Primary#4285F4
Secondary#34A853
Neutral#5F6368
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

Display LargePlus Jakarta Sans · 57px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Display MediumPlus Jakarta Sans · 45px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Headline LargePlus Jakarta Sans · 32px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Headline MediumPlus Jakarta Sans · 28px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Title LargeRoboto · 22px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Title MediumRoboto · 16px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body LargeRoboto · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body MediumRoboto · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body SmallRoboto · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Label LargeRoboto · 14px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Label SmallRoboto · 11px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CodeRoboto Mono · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 8px

A clean, colorful, and universally accessible design system rooted in material design principles. Mountain View Bright uses a signature four-color palette — blue, red, yellow, and green — against crisp white surfaces with clear elevation hierarchy. The aesthetic is optimistic, organized, and information-rich, designed to make complex tools feel simple and approachable for billions of users worldwide.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

AssistFilterInputSuggestion

Checkbox

Default

Tooltip

Plain

Rich

Elevation & Depth

Level 1
Level 2
Level 3
Level 4

Do's & Don'ts

Do

Use the four brand colors (blue, red, yellow, green) purposefully — each has a semantic meaning
Use Material-style ripple effects on interactive elements for tactile feedback
Maintain 4.5:1 minimum contrast ratio for all text per WCAG AA
Use floating labels on inputs for space efficiency and clear affordance
Apply motion with 200ms standard easing (cubic-bezier(0.4, 0, 0.2, 1)) for all transitions

Don't

Create new accent colors — work within the established four-color palette
Use heavy borders when elevation (shadow) can communicate hierarchy
Use Bebas Neue or decorative fonts — consistency with Roboto and Plus Jakarta Sans only
Make interactive areas smaller than 48px by 48px for touch accessibility
Use pure black (#000000) for text — always use #202124 for a softer, warmer appearance
Download .md

License MIT
Uploaded 1 months ago
Version v1
File size 7.7 KB
Downloads 33
Copies 1

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/mountain-view-bright and implement it in my code

Don't have the MCP? Install it here