Postman DESIGN.md

API-platform design with energetic orange branding, dense product diagrams, and developer-friendly modularity. Postman’s current web and platform experience balances strong brand personality with clear, scalable structure for the full API lifecycle.

1. Visual Theme & Atmosphere

Overall Aesthetic

Postman communicates developer productivity with strong visual identity. The platform is broad and technical, but the design keeps it approachable through clear modules, bright branding, and concise hierarchy.

Mood & Feeling

• Energetic: API work should feel active and collaborative
• Technical: the platform still needs developer credibility
• Product-led: diagrams, flows, and tool groupings are central
• Scalable: the system has to support a large ecosystem of features
• Clear: dense platform breadth should still be easy to scan

Design Density

Medium density. Postman surfaces often include diagrams, cards, platform taxonomy, and feature maps, but the UI keeps them grouped and legible.

Visual Character

• Signature orange as the strongest brand cue
• White and dark neutral surfaces
• Rounded but efficient cards and controls
• Heavy use of platform illustrations and workflow diagrams
• Developer-friendly visual clarity without stark minimalism

2. Color Palette & Roles

Core Brand Colors

Neutral Foundation

Supportive Colors

Color Usage Rules

• Use orange for the strongest brand and primary action moments.
• Keep the structural UI neutral and readable.
• Use supportive colors mostly for semantic states and diagrams.

3. Typography Rules

Font Stack

css/* Postman-style developer-product sans */
--font-sans: Inter, 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'SF Mono', 'Roboto Mono', Menlo, monospace;

Type Scale

Typography Philosophy

Postman typography should feel technical, clear, and energetic. It supports a wide API platform without losing approachability.

Practical Rules

• Use short, strong headlines.
• Break platform descriptions into digestible cards and callouts.
• Use monospace only where API or code context is genuinely helpful.

4. Component Stylings

Buttons

Primary Button

css.button-primary {
  background: #FF6C37;
  color: #FFFFFF;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #FF6C37;
  border-radius: 999px;
  font: 600 14px/1 Inter, sans-serif;
}

.button-primary:hover {
  background: #E85A24;
  border-color: #E85A24;
}

Secondary Button

css.button-secondary {
  background: #FFFFFF;
  color: #111827;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #E2E8F0;
  border-radius: 999px;
}

Inputs

Text Input

css.input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  background: #FFFFFF;
  color: #111827;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  font: 400 16px/1.2 Inter, sans-serif;
}

.input:focus {
  outline: none;
  border-color: #FF6C37;
  box-shadow: 0 0 0 3px rgba(255, 108, 55, 0.14);
}

Cards and Platform Modules

Feature Card

css.card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  padding: 24px;
}

Dark Workflow Panel

css.workflow-panel {
  background: #1F2937;
  color: #FFFFFF;
  border-radius: 22px;
  padding: 24px;
}

5. Layout Principles

Spacing Scale

Layout Rules

• Organize the platform by lifecycle or tool family.
• Use diagrams and workflow maps to explain complexity.
• Keep CTA paths clear for sign-up, download, and feature exploration.
• Balance developer precision with marketing energy.

6. Depth & Elevation

Surface Hierarchy

Shadow System

css.shadow-card {
  box-shadow: 0 8px 18px rgba(17, 24, 39, 0.08);
}

.shadow-overlay {
  box-shadow: 0 18px 30px rgba(17, 24, 39, 0.14);
}

Depth Rules

• Use white cards for most grouping and dark panels sparingly for emphasis.
• Let diagrams and content structure carry most complexity.
• Keep overlays clean and action-oriented.

7. Do's and Don'ts

Do

• Use orange as a selective primary brand cue.
• Keep platform breadth modular and legible.
• Show workflow clarity through diagrams and grouped cards.
• Preserve strong CTA pathways for developers.

Don't

• Use orange on every interactive surface.
• Overload a single section with the entire platform map.
• Let dark technical panels dominate the whole experience.
• Sacrifice readability for visual energy.

8. Responsive Behavior

Responsive Rules

• Stack platform cards and diagrams cleanly on smaller screens.
• Keep primary CTA paths visible without crowding.
• Simplify workflow illustrations before shrinking type too far.
• Maintain comfortable touch targets in builder and product-exploration surfaces.

Mobile Character

Postman mobile should still feel active and developer-friendly. The orange brand cue and platform hierarchy need to remain clear even when the experience becomes more vertical.

9. Agent Prompt Guide

Quick Reference

• Mood: energetic, technical, modular
• Primary accent: Postman orange #FF6C37
• Core layout: platform cards and lifecycle diagrams
• Typography: clean modern developer sans
• Components: pill CTAs, rounded cards, dark workflow panels

Prompt Snippet

textDesign this interface in the style of Postman’s current API platform website. Use Postman orange (#FF6C37) as the main brand and CTA color, clean neutral surfaces, modular lifecycle cards, and concise technical typography. The result should feel energetic, developer-friendly, and scalable without becoming cluttered.