Team Blue

Team Blue is a multi-product design system built for team collaboration and developer tooling. Its structured, systematic approach uses a deliberate palette of blues, teals, and purples to differentiate product areas while maintaining a unified feel. The design language emphasizes clarity, density, and efficient navigation across interconnected tools.

Primary#0052CC
Secondary#00B8D9
Neutral#F4F5F7
Background#FFFFFF
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayInter · 600 · SemiBold

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

BodyInter · 14px · Regular

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

CodeFira Code · 14px · Regular

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

Labels/NavigationInter · 14px · Medium

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

Breadcrumbs/OverlinesInter · 11px · Bold

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

Caption/BadgeInter · 12px · Regular

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

Body/DefaultInter · 14px · Regular

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

Card Title/H5Inter · 16px · Medium

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

Section/H4Inter · 20px · Medium

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

Page Subtitle/H3Inter · 24px · Medium

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

Page Title/H2Inter · 29px · Medium

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

Hero/H1Inter · 35px · Medium

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

Spacing

Base: 4px

Team Blue is a multi-product design system built for team collaboration and developer tooling. Its structured, systematic approach uses a deliberate palette of blues, teals, and purples to differentiate product areas while maintaining a unified feel. The design language emphasizes clarity, density, and efficient navigation across interconnected tools.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

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

BlueTealGreenYellowRedPurple

Elevation & Depth

Level 0
Level 1
Level 2
Level 3

Do's & Don'ts

Do

Use color-coded lozenges consistently across products for status communication
Support compact density modes for power users who manage many items
Provide keyboard shortcuts for common actions (navigation, search, quick actions)
Use inline editing where possible - reduce modal usage for simple field updates
Design for multi-panel layouts where sidebar + main + detail panel coexist
Use the 2px border width on inputs for better visibility and accessibility compliance

Don't

Use more than 2 accent colors on a single view - blue as primary, one contextual accent
Use the purple (#6554C0) for CTAs; reserve it for categorization and grouping
Relieve drag-and-drop as the only interaction; always provide menu alternatives
Use rounded corners larger than 8px - the system prefers a structured, sharp aesthetic
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 7.1 KB
Downloads 40
Copies 3
dashboard dense devtools professional

Use with MCP

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

Don't have the MCP? Install it here