--- version: alpha name: Postman description: Developer-first API platform — dark near-black canvas with signature Postman Orange, dual-font system pairing Degular Display headlines with Inter body copy and IBM Plex Mono for code, warm orange-to-violet gradients, and gentle 5–10px rounded corners throughout. colors: # Canvas + surfaces background: "#ffffff" surface: "#ffffff" surface-dark: "#140b1e" # deep near-black purple — hero dark sections # Brand accent primary: "#ff6c37" # Postman Orange — signature CTA and brand anchor primary-deep: "#e0531f" # darker orange for hover states primary-on-dark: "#ff6f39" # orange on dark backgrounds (slightly lighter) # Violet accent — gradient partner to orange violet: "#b387f5" # light violet for orange-to-violet gradients violet-deep: "#491591" # deep violet — dark hero gradient stop # Ink / text ink: "#212121" # primary text — near-black, not pure ink-secondary: "#707070" # secondary / muted text ink-muted: "#5c5c5c" # tertiary text, icons on-primary: "#ffffff" # text on orange backgrounds on-dark: "#ffffff" # text on dark surfaces # Interactive link-blue: "#0265d2" # hyperlink color in body copy link-blue-hover: "#212121" # link hover — shifts to ink focus-blue: "#007bff" # focus ring — accessible blue # Borders border: "#e6e6e6" # standard separator / divider border-light: "#cfcfcf" # lighter border for inline elements border-violet: "#b387f5" # violet-tinted border — was rgba(179,135,245,0.5) — Google format requires hex # Semantic success: "#28a745" # /* estimated */ success green error: "#dc3545" # /* estimated */ error red # Shadow tints shadow-soft: "#000000" # was rgba(0,0,0,0.2) — Google format requires hex shadow-violet: "#b387f5" # violet glow shadow on featured elements # Gradient warm tints (opaque approximations) gradient-warm-start: "#fffbf7" # was rgba(255,251,247,0.8) — Google format requires hex gradient-warm-end: "#ffd7c7" # was rgba(255,215,199,0.8) — Google format requires hex typography: display-hero: fontFamily: "degular, degular Fallback, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 55px fontWeight: 600 lineHeight: 0.90 letterSpacing: 0.6px display: fontFamily: "degular, degular Fallback, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 36px fontWeight: 600 lineHeight: 1.17 letterSpacing: 0.48px heading-section: fontFamily: "Inter, inter Fallback, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 20px fontWeight: 600 lineHeight: 1.40 letterSpacing: -0.32px heading-label: fontFamily: "Inter, inter Fallback, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.40 letterSpacing: 0.48px body-large: fontFamily: "Inter, inter Fallback, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 22px fontWeight: 400 lineHeight: 1.63 letterSpacing: -0.16px body: fontFamily: "Inter, inter Fallback, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.53 letterSpacing: -0.16px body-small: fontFamily: "Inter, inter Fallback, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.70 letterSpacing: -0.16px button-ui: fontFamily: "Inter, inter Fallback, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.53 letterSpacing: -0.16px button-small: fontFamily: "Inter, inter Fallback, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 600 lineHeight: 1.50 letterSpacing: 0px nav-link: fontFamily: "Inter, inter Fallback, system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.15 letterSpacing: -0.16px mono-display: fontFamily: "IBM Plex Mono, ibmPlexMono Fallback, SFMono-Regular, Menlo, monospace" fontSize: 24px fontWeight: 600 lineHeight: 1.63 letterSpacing: -0.16px mono-body: fontFamily: "IBM Plex Mono, ibmPlexMono Fallback, SFMono-Regular, Menlo, monospace" fontSize: 20px fontWeight: 400 lineHeight: 1.20 letterSpacing: -0.16px caption: fontFamily: "IBM Plex Mono, ibmPlexMono Fallback, SFMono-Regular, Menlo, monospace" fontSize: 12px fontWeight: 400 lineHeight: 1.63 letterSpacing: -0.16px spacing: xs: 4px sm: 8px md: 16px lg: 20px xl: 24px 2xl: 40px 3xl: 60px 4xl: 120px rounded: none: 0px xs: 2px sm: 5px md: 9px lg: 10px xl: 15px pill: 9999px components: # Primary orange CTA button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 10px 20px button-primary-hover: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 10px 20px # Small CTA variant button-small: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-small}" rounded: "{rounded.sm}" padding: 8px 16px button-small-hover: backgroundColor: "{colors.primary-deep}" textColor: "{colors.on-primary}" typography: "{typography.button-small}" rounded: "{rounded.sm}" padding: 8px 16px # Ghost / outlined secondary button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 10px 20px borderColor: "{colors.border-light}" button-secondary-hover: backgroundColor: "{colors.surface}" textColor: "{colors.primary}" typography: "{typography.button-ui}" rounded: "{rounded.sm}" padding: 10px 20px borderColor: "{colors.primary}" # Standard card card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.lg}" padding: 24px borderColor: "{colors.border}" card-hover: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" shadow: "0px 2px 8px 0px rgba(0, 0, 0, 0.2)" # Dark hero panel card-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.body}" rounded: "{rounded.xl}" padding: 40px # Input input: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.sm}" padding: 10px 16px borderColor: "{colors.border}" input-focus: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" borderColor: "{colors.focus-blue}" # Navigation bar nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.nav-link}" padding: 10px 20px borderColor: "{colors.border}" # Badge / label chip badge: backgroundColor: "{colors.gradient-warm-start}" textColor: "{colors.primary}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: 2px 8px badge-violet: backgroundColor: "{colors.surface-dark}" textColor: "{colors.violet}" typography: "{typography.caption}" rounded: "{rounded.sm}" padding: 2px 8px # Code block code-block: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.mono-body}" rounded: "{rounded.lg}" padding: 20px 24px --- # Postman Design System ## Overview Postman's design language is the visual handshake between developer rigor and product warmth. The foundation is white (`{colors.background}`) with near-black (`{colors.ink}`) body copy, but what makes the system memorable is how confidently it pivots to darkness. The hero section drops into `{colors.surface-dark}` — a deep, almost-purple near-black — before ascending back into a warm white editorial zone. This toggle between warm white and cinematic dark gives the page a theatrical energy rare in developer tooling. The signature element is the orange-to-violet gradient: Postman Orange (`{colors.primary}`) bleeds into soft violet (`{colors.violet}`) across decorative elements, button focus rings, and the animated logo-wall marquee. It's a pairing that reads as playful and technical at once — the orange of APIs in motion, the violet of the underlying compute. The two fonts reinforce this split personality: Degular Display brings editorial personality at hero scale with its compressed semi-condensed silhouette and slight positive tracking, while Inter handles the working body copy with clinical legibility. IBM Plex Mono completes the trio as the voice for code, terminal output, and developer-facing labels. The depth system is restrained but purposeful. Cards lift slightly with a soft neutral shadow (`rgba(0,0,0,0.2)`) on hover, and featured elements use a violet glow (`{colors.shadow-violet}`) that echoes the gradient system. Border-radius stays in the 5–15px range — soft enough to feel modern, tight enough to signal infrastructure rather than consumer software. **Key Characteristics:** - Signature Postman Orange (`{colors.primary}`) as the sole CTA and brand anchor — orange-first, always - Orange-to-violet gradient (`{colors.primary}` → `{colors.violet}`) across heroes, marquees, and decorative borders - Degular Display at 55px with tight 0.90 line-height — compressed editorial authority for heroes - Inter for all functional UI copy — utilitarian legibility without personality conflict - IBM Plex Mono for code, terminal-style labels, and API response displays - Dark hero mode (`{colors.surface-dark}`) — cinematic near-black sections inside a white-dominant layout - Gentle 5–10px rounded corners (`{rounded.sm}`–`{rounded.lg}`) on all interactive components - Warm orange and cream gradients for section callouts (`{colors.gradient-warm-start}` to `{colors.gradient-warm-end}`) - Restrained shadow vocabulary: soft neutral drop shadow on hover, violet glow on featured elements - Motion at 150ms and 300ms with `cubic-bezier(0.4, 0, 0.2, 1)` — standard Material easing, crisply executed - Logo wall uses 60s linear scroll animation for social proof without friction ## Colors ### Primary - **Postman Orange** (`{colors.primary}`): The brand's loudest statement — every CTA, every active link, every gradient start. Applied sparingly so it retains impact. - **Warm White** (`{colors.background}`): Page canvas and card surfaces. Pure white with no tinting. - **Near-Black** (`{colors.ink}`): Primary text. At `#212121`, it reads warmer than pure black and softer than blue-based darks. ### Dark Mode Surface - **Deep Violet-Black** (`{colors.surface-dark}`): Hero section canvas. Not a gray, not a navy — a very dark desaturated purple that makes the orange gradients glow. ### Gradient Accent - **Postman Orange** (`{colors.primary}`): Gradient start — warm, saturated, energetic. - **Soft Violet** (`{colors.violet}`): Gradient end — the violet complement to orange. Used in decorative borders, glow effects, and the orange-violet gradient identity. - **Deep Violet** (`{colors.violet-deep}`): Appears in the hero's multi-stop gradient alongside orange and magenta. ### Interactive - **Link Blue** (`{colors.link-blue}`): Standard hyperlink color in editorial and documentation contexts. - **Focus Blue** (`{colors.focus-blue}`): Keyboard focus ring on all interactive elements. - **Orange Primary Deep** (`{colors.primary-deep}`): Hover state for orange CTAs — same hue, darker value. ### Neutral Scale - **Ink Secondary** (`{colors.ink-secondary}`): Secondary text, nav links at rest, footer copy. - **Ink Muted** (`{colors.ink-muted}`): Tertiary labels, icon fills, placeholder text. ### Borders - **Border Default** (`{colors.border}`): Card outlines, section dividers, nav bottom border. - **Border Light** (`{colors.border-light}`): Lighter stroke for secondary button outlines. - **Border Violet** (`{colors.border-violet}`): Violet-tinted decorative border on feature callout cards (originally `rgba(179,135,245,0.5)` — flattened to opaque for spec). ### Shadow & Depth - **Shadow Soft** (`{colors.shadow-soft}`): Neutral shadow base color. - **Shadow Violet** (`{colors.shadow-violet}`): Violet glow on featured/highlighted elements. ## Typography ### Font Family - **Display**: `degular` — self-hosted, semi-condensed display cut. Used exclusively at hero scale. - **Body/UI**: `Inter` — the workhorse. Comprehensive weight coverage, modern fallback stack. - **Monospace**: `IBM Plex Mono` — developer-grade code font with strong editorial personality at larger sizes. - **OpenType Features**: `"calt" 0` on all fonts — contextual alternates explicitly disabled for consistent rendering. Inter at selected weights enables `"calt", "clig", "kern", "liga"` for maximum rendering quality. ### Hierarchy The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`). | Token | Use | |---|---| | `display-hero` | 55px hero headlines — Degular's compressed authority | | `display` | 36px section heroes and feature headlines | | `heading-section` | 20px Inter for feature sub-headings | | `heading-label` | 16px uppercase-style section labels with positive tracking | | `body-large` | 22px lead copy and feature descriptions | | `body` | 16px standard reading text throughout | | `body-small` | 14px supporting copy, legal, footnotes | | `button-ui` | 16px Inter 600 — all primary and secondary CTAs | | `button-small` | 14px Inter 600 — compact action labels | | `nav-link` | 14px navigation links and UI affordances | | `mono-display` | 24px IBM Plex Mono 600 — bold code labels and API highlights | | `mono-body` | 20px IBM Plex Mono 400 — code blocks and terminal output | | `caption` | 12px IBM Plex Mono — micro labels, uppercase category tags | ### Principles - **Three-font hierarchy, strict role separation**: Degular Display owns the hero scale; Inter owns UI and body; IBM Plex Mono owns code. They never bleed into each other's territory. - **Positive tracking on display**: Unlike most modern systems that go negative at display size, Degular at 55px uses +0.6px tracking — the font's semi-condensed silhouette is tight enough that the slight opening reads as confident airiness. - **Light negative tracking on Inter**: All Inter body sizes use -0.16px letter-spacing — barely perceptible but collectively improves reading density on paragraph text. - **Semibold as the functional weight**: Inter 600 for all interactive elements (buttons, active nav, section labels). Inter 400 for reading text. No 700 in the UI layer. - **Mono at large sizes**: IBM Plex Mono at 20–24px is distinctive enough to signal "this is live API data" — it blurs the line between hero content and actual terminal output. ## Layout ### Spacing System The complete spacing scale lives in the `spacing:` token block above. Base unit is ~20px (the dominant grid atom). Notable: 5px is the single most common padding value (94 occurrences in dembrandt data), reflecting Postman's use of very compact internal component padding inside its PrimeReact/Fluent component library. ### Grid & Container - Max content width: approximately 1200px - Hero: full-width dark section (`{colors.surface-dark}`) with centered content, ~120px vertical padding - Feature sections: alternating 2-column text+media layouts - Integration/partner grids: 4–6 column icon grids with generous gutters - Full-width marquee strip for logo wall — scrolls at 60s linear ### Whitespace Philosophy - **Developer density, editorial breathing room**: Postman navigates between two modes. Above-the-fold features generous editorial whitespace; below the fold, developer feature sections pack more content into tighter grids. - **Dark sections reset the rhythm**: Every time the background shifts to `{colors.surface-dark}`, vertical padding resets and the eye perceives the section as a new chapter. - **20px as the atomic unit**: The dominant measured spacing value aligns to a 20px base rather than the typical 8px grid — a subtle choice that gives everything slightly more presence. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | Flat (Level 0) | No shadow | Text content, background surfaces | | Hover Lift (Level 1) | `0px 2px 8px 0px rgba(0,0,0,0.2)` | Card hover states — subtle lift without drama | | Inset Orange Ring | `rgb(255,108,55) 0px 0px 0px 1px inset` | Active/selected component highlight | | Violet Glow (Level 2) | `rgb(179,135,245) 0px 4px 24px 0px` | Featured elements, highlighted callouts | | Focus Ring | `2px solid {colors.focus-blue}` | Keyboard navigation accessibility | **Shadow Philosophy**: Postman's shadow vocabulary is deliberately compact. Most surfaces are flat — cards use 1px solid borders (`{colors.border}`) rather than box-shadows for their resting state. The shadow system only activates in two specific moments: when a card is hovered (where the neutral drop shadow provides a crisp, functional lift) and when an element needs to be spotlit as featured (where the violet glow echoes the orange-violet gradient identity). The inset orange ring is Postman's most distinctive depth element — an `inset` box-shadow that draws a 1px orange outline inside the element border, used for active component states. ## Shapes The complete radius scale lives in the `rounded:` token block above. The system uses: | Token | Value | Use | |---|---|---| | `none` | 0px | Full-bleed images and video containers | | `xs` | 2px | Inline code snippets, micro tags | | `sm` | 5px | Buttons, form inputs — the workhorse radius | | `md` | 9px | Menu dropdowns, overlay panels | | `lg` | 10px | Cards, content containers | | `xl` | 15px | Video embeds, larger media cards | | `pill` | 9999px | Full pill shapes (rare) | The system's dominant story is 5px for all interactive elements and 10px for containers — a clean two-tier system where interaction radius is half of container radius. The 9px menu radius adds a slightly softer tier for overlay surfaces. ## Components The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`). ### Button Variants - **`button-primary`** — Postman Orange solid, white text, 5px radius, 10px 20px padding. The only primary accent in the system — never dilute with secondary oranges. - **`button-small`** — Compact 14px variant of the orange CTA. Same radius, 8px 16px padding. - **`button-secondary`** — White surface with light border (`{colors.border-light}`). On hover, border shifts to orange and text to `{colors.primary}` — a teaser of the brand accent before click. ### Cards - **`card`** — White surface, `1px solid {colors.border}` border, `{rounded.lg}` corners. Subtle hover lift via neutral drop shadow. The standard container throughout editorial and feature sections. - **`card-dark`** — Deep violet-black (`{colors.surface-dark}`) with white text and violet gradient accents. Used for immersive dark feature callouts. ### Inputs - **`input`** — White surface, `{colors.border}` border, `{rounded.sm}` corners, standard Inter body text. Focus ring uses `{colors.focus-blue}` border shift. No shadow on focus — clean field boundary. ### Badges - **`badge`** — Warm cream background (`{colors.gradient-warm-start}`), orange text, mono caption type. Signals "new" or category labels in editorial contexts. - **`badge-violet`** — Dark surface (`{colors.surface-dark}`), violet text — for feature labels inside dark sections. ### Code Blocks - **`code-block`** — Dark surface, white text, IBM Plex Mono, 10px radius. The terminal aesthetic connects marketing content to the actual Postman product experience. ### Navigation - **`nav-bar`** — White sticky header with 1px bottom border. Inter 14px 400 for links at rest; links shift to `{colors.ink}` on hover. Orange "Sign Up" button right-aligned. Logo left-aligned with orange postman-icon logomark. ### Marquee / Logo Wall Horizontal infinite scroll at 60s linear. Grayscale partner logos in a horizontal strip. Provides social proof without visual weight. ## Do's and Don'ts ### Do - Reserve `{colors.primary}` orange exclusively for CTAs, active links, and gradient starts — its scarcity is its power - Use Degular Display only at display sizes (36px+); let Inter handle everything below - Pair the orange gradient with `{colors.violet}` as the complementary stop — not with red, yellow, or green - Use `{colors.surface-dark}` for immersive hero sections — complete the transition by restoring `{colors.background}` immediately after - Apply `{rounded.sm}` (5px) to all interactive elements (buttons, inputs, selects) consistently - Use IBM Plex Mono for any content that references live API data, code, or technical output — it anchors the developer trust signal - Use inset orange ring (`rgb(255,108,55) 0px 0px 0px 1px inset`) for active/selected component states - Keep motion at 150–300ms with `cubic-bezier(0.4, 0, 0.2, 1)` — fast enough to feel responsive, smooth enough to feel premium ### Don't - Don't use Degular Display at body or UI sizes — its compressed proportions become awkward below 36px - Don't introduce warm yellows or reds as brand accents — orange already occupies the warm anchor position - Don't skip the orange-to-violet gradient direction — reversing it (violet-first) loses the brand warmth - Don't use heavy shadows (>0.2 opacity, >16px blur) — the system reads as flat-first with accent elevation - Don't use pill-shaped buttons for primary CTAs — `{rounded.sm}` (5px) is the brand shape, not capsule - Don't use `{colors.link-blue}` for primary interactive elements — it belongs to hyperlink/editorial contexts only, not UI buttons - Don't vary the Degular Display tracking from +0.6px at hero scale — the slight positive spacing is what gives it its distinctive open-compressed tension - Don't present IBM Plex Mono text at weights above 600 in large display contexts — it risks feeling too heavy against the Degular headers --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |---|---|---| | Mobile Small | <410px | Single column, minimal padding, hero text reduces | | Mobile | 410–576px | Stacked layout, hamburger nav, CTA full-width | | Mobile Large | 576–768px | 2-column begins for some feature grids | | Tablet | 768–992px | Full nav visible, feature cards 2-column | | Desktop Small | 992–1165px | 3-column grids, full hero layout | | Desktop | 1165–1200px | Standard desktop, full marquee speed | | Large Desktop | >1200px | Centered at max-width, generous lateral margins | ### Touch Targets - Primary buttons use 10px 20px padding — adequate for touch targets above 44px height at 16px font - Navigation links at 14px have generous padding via the nav component spec - Mobile CTA buttons expand to full width for large tap target - Card-level tap targets use the full card footprint ### Collapsing Strategy - Hero: 55px Degular → 32–36px on mobile, maintaining the tight 0.90 line-height for visual consistency - Navigation: horizontal feature links + CTA → hamburger toggle at 992px breakpoint - Dark hero section: maintains full-width dark treatment at all breakpoints, reducing internal padding - Feature cards: 3-column → 2-column → single column - Logo marquee: maintains 60s scroll speed but reduces logo count visible at once - Section vertical padding: `{spacing.4xl}` (120px) → `{spacing.3xl}` (60px) on mobile ### Image Behavior - Product screenshots and video embeds maintain `{rounded.xl}` (15px) border treatment at all breakpoints - The orange-to-violet gradient hero graphic simplifies on mobile — fewer gradient stops, broader bands - Integration grid icons: 4–6 column → 2–3 column on tablet/mobile --- ## Agent Prompt Guide ### Quick Color Reference - Background: `{colors.background}` - Primary text: `{colors.ink}` - Secondary text: `{colors.ink-secondary}` - Brand CTA: `{colors.primary}` (Postman Orange) - CTA hover: `{colors.primary-deep}` - Dark surface: `{colors.surface-dark}` - Border: `{colors.border}` - Link: `{colors.link-blue}` - Gradient partner: `{colors.violet}` ### Example Component Prompts - "Create a hero section on dark background (`{colors.surface-dark}`). Headline at 55px Degular Display weight 600, line-height 0.90, letter-spacing 0.6px, color `{colors.on-dark}`. Subtitle at 22px Inter weight 400, line-height 1.63, color `{colors.on-dark}` at 80% opacity. Orange CTA button (`{colors.primary}` background, white text, Inter 16px 600, 5px radius, 10px 20px padding) plus ghost secondary (white border, white text). Below the dark section: smooth transition to white `{colors.background}` for the feature content zone." - "Design a feature card: white `{colors.surface}` background, 1px solid `{colors.border}` border, 10px border-radius (`{rounded.lg}`), 24px padding. On hover: box-shadow `0px 2px 8px 0px rgba(0,0,0,0.2)` and slight translateY(-2px). Title at 20px Inter weight 600, letter-spacing -0.32px, color `{colors.ink}`. Body at 16px Inter weight 400, line-height 1.53, color `{colors.ink-secondary}`." - "Build an orange CTA button: background `{colors.primary}`, text `{colors.on-primary}`, font Inter 16px weight 600, border-radius 5px (`{rounded.sm}`), padding 10px 20px. Hover state: background `{colors.primary-deep}`. Include a secondary ghost button alongside: white background, `{colors.border-light}` 1px border, `{colors.ink}` text. Secondary hover: border shifts to `{colors.primary}`, text shifts to `{colors.primary}`." - "Create a code block component: background `{colors.surface-dark}`, text `{colors.on-dark}`, font IBM Plex Mono 20px weight 400, line-height 1.20, letter-spacing -0.16px, border-radius 10px (`{rounded.lg}`), padding 20px 24px. Add a category label above the code block using IBM Plex Mono 12px weight 400, uppercase, color `{colors.violet}` — this signals 'API response' to the reader." - "Design a navigation bar: white `{colors.background}`, Postman orange logomark left-aligned. Center links in Inter 14px weight 400, `{colors.ink-secondary}` at rest, hover to `{colors.ink}`. Right side: 'Sign In' ghost link in `{colors.ink}` + 'Sign Up for Free' orange button (`{colors.primary}` background, white text, 5px radius, 8px 16px padding). 1px `{colors.border}` bottom border. Sticky on scroll." ### Iteration Guide 1. Start with `{colors.background}` white as the canvas — then decide which sections earn the `{colors.surface-dark}` treatment. Dark sections should be used 1–2 times per page for drama. 2. Every primary CTA is `{colors.primary}` orange. If you find yourself reaching for a second accent color for buttons, pull back — the orange-only rule is what gives it its stamp quality. 3. Deploy the orange-to-violet gradient (`{colors.primary}` → `{colors.violet}`) in decorative zones only: hero backgrounds, marquee border strips, featured card outlines. Not on buttons. 4. Headlines use Degular Display at 36px+ with +0.6px tracking. Body and UI use Inter. Code uses IBM Plex Mono. These lanes never cross. 5. Border-radius is binary at the interaction layer: 5px for all interactive elements, 10px for all containers. Add 15px only for media (video, screenshot) embeds. 6. Shadow activates only on hover (neutral lift) and featured elements (violet glow `{colors.shadow-violet}`). Resting cards use border, not shadow. 7. The inset orange ring (`rgb(255,108,55) 0px 0px 0px 1px inset`) is Postman's selected-state signature — use it for active component states inside the dark surface sections. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Postman. Brand names and trademarks belong to their respective owners.