Navy Professional

Navy Professional is a structured, trust-building design system rooted in corporate communication and career advancement. Its deep navy blue anchors a palette of warm grays and clean whites, conveying authority and reliability. Every component is designed for clarity and professionalism — supporting dense informational layouts, credential displays, and networking interactions with measured confidence.

Primary#0A66C2
Secondary#915907
Neutral#666666
Background#F4F2EE
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

micro/captionSource Sans 3 · 12px · Regular

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

bodySource Sans 3 · 14px · Regular

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

subtitleSource Sans 3 · 16px · SemiBold

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

section titleSource Sans 3 · 20px · Bold

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

page titleSource Sans 3 · 24px · Bold

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

hero headingSource Sans 3 · 32px · Bold

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

Spacing

Base: 4px

Navy Professional is a structured, trust-building design system rooted in corporate communication and career advancement. Its deep navy blue anchors a palette of warm grays and clean whites, conveying authority and reliability. Every component is designed for clarity and professionalism — supporting dense informational layouts, credential displays, and networking interactions with measured confidence.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Inputs

Chips

DefaultActive

Default

Default

Checked

Elevation & Depth

Standard Card
Hover Card
Modal

Do's & Don'ts

Do

Use the warm linen background (#F4F2EE) consistently — it defines the brand's warmth
Keep card layouts structured with clear visual hierarchy using weight contrast
Show professional context (job title, company) alongside every user mention
Maintain generous line-height (1.4+) for body text to aid scanning dense content
Provide clear visual feedback for connection states (pending, connected, following)

Don't

Use bright or playful colors; maintain corporate trust through the navy palette
Over-use the gold/premium color; reserve it exclusively for paid tier indicators
Use rounded avatars for companies — square with 4px radius for orgs, round for people
Download .md
Chef Chef @chef
License MIT
Uploaded 1 months ago
Version v1
File size 6.4 KB
Downloads 31
Copies 2
clean corporate professional warm

Use with MCP

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

Don't have the MCP? Install it here