PR Newswire Design System Deep-Dive

1. Brand Overview

PR Newswire’s interface is corporate journalism wrapped in a conservative, professional design language. This is not a playful startup aesthetic—it’s built for press release distribution, media professionals, and corporate communicators. The vibe is serious, trustworthy, and very “enterprise SaaS for communications.”

The color language tells you immediately: deep navy (rgb(12, 29, 59)) and an assertive burnt orange (rgb(204, 71, 30)) are the primary signals. The navy grounds everything in authority, while the orange steps forward only when PRN wants you to act—buttons, links on hover, CTAs. There’s no pastel softness here. This is a platform for publishing official statements, not for sharing cat photos.

Typography is equally pragmatic: Proxima Nova for most UI text, paired with the distinctive “Black Tie” in some headings and buttons. This isn’t decorative—Proxima Nova brings clean, geometric sans clarity; Black Tie adds a subtle brand signature without hurting readability. When combined with consistent font weights (200, 400, 600, 700) and a tightly controlled type scale, it gives hierarchy without noise.

Spacing follows a mostly 8px grid, but they aren’t religious about it—there are oddball values like 3px (used a lot: 728 occurrences), 6px, and 7px. That’s unusual. Possibly legacy CSS or pixel-perfect tweaks to align icons/tables. Layout breakpoints suggest they designed for a wide range, from tiny mobile (140px) up to absurdly large (10000px)—likely for large-screen publishing dashboards.

Overall philosophy: controlled, professional, action-oriented UI. No fluff. The system is built to handle dense content, structured data, and quick scanning.

2. Color System

2.1 Primary Colors

Primary brand color: Burnt Orange – rgb(204, 71, 30) / #CC471E. This is a high-contrast color against white, and visually warm. It communicates urgency and importance without the aggression of pure red.

Secondary brand color: Deep Navy – rgb(12, 29, 59) / #0C1D3B. Dark, authoritative, excellent for headers, backgrounds, and text over light surfaces.

These two are the anchors. Compared to competitors (e.g., Business Wire’s blue), PRN swaps the primary action color to orange—more urgency, less neutrality.

2.2 Complete Palette

2.3 Color Relationships

Burnt orange on deep navy fails WCAG for body text (low contrast), so they use it mainly as accent over navy, not for long-form text. Navy on white passes easily. Orange on white is fine for contrast.

Notably, hover states often flip the default: primary buttons go from orange background/white text to deep navy background/orange text on hover. That’s a bold inversion—keeps interaction obvious.

There’s no dark mode here. Palette is fixed for light UI.

2.4 Usage Guide

• Orange (#CC471E) is for high-priority actions. Don’t use for passive states.
• Navy (#0C1D3B) works for large text, backgrounds, and inactive buttons.
• Deep blue (#063369) is link color; hover turns it orange.
• Grays (#CAC8C8, #575757) are for borders, less-important text, and UI chrome.
• White is the base canvas.

Avoid mixing orange with medium gray—contrast is too low for accessibility.

3. Typography

3.1 Font Families

• Proxima Nova — main workhorse, geometric sans-serif. No fallbacks listed in data, but likely system sans fallback.
• Black Tie — used in headings and some buttons for brand flavor.
• Font Awesome Brands — icon fonts for social/brand icons.

No Google Fonts or Adobe Fonts loaded—likely self-hosted.

3.2 Type Scale

3.3 Hierarchy

H1s range from 28px–34px depending on font and weight. Buttons and links often use 16px or 21px—large enough for accessibility. Captions drop to 14px and below. Line heights are tight (0.59 for one H1 variant!)—this makes headings compact, fitting PRN’s dense layouts.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px grid with deviations. Common values:

The 3px spacing usage is huge—likely letter-spacing or border offsets.

4.2 Layout

Breakpoints from 140px to 2200px tell us they cover everything from tiny embedded widgets to large newsroom dashboards. Bootstrap + Vuetify grid systems are in play—container/row/col patterns.

5. Visual Elements

Border Radius

Values range from sharp (0px) to soft (14px) and pill (50px):

• 2px — buttons, images
• 4px — modals, buttons
• 8px — cards
• 14px — iframes, large blocks
• 50px — pill buttons, inputs
• 50% — circular divs

They keep small radii for most UI, reserving pills for search bar inputs.

Shadows

Sparse use of shadows. Most are subtle insets or low-opacity drops:

• rgba(110, 110, 110, 0.6) 0px 0px 8px inset — inner shadow, high count.
• rgba(0, 0, 0, 0.1) 0px 2px 4px -2px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px — soft drop.
• rgba(0, 0, 0, 0.176) 0px 6px 12px — card shadows.

No heavy material shadows—they stay restrained.

Borders

Borders are functional: 1px grays for dividers, 0px in many places to keep things clean. Orange borders appear only in active buttons.

6. Components

6.1 Buttons

Primary (omniture-hero-button btn btn-primary customBtn)

• Default: Orange bg (#CC471E), white text, 4px radius, 1px orange border, padding 13px 20px 14px.
• Hover: Navy bg (#063369), orange text, white border, 0.9 opacity, subtle shadow.
• Active: Teal bg (#00837E), black text, blue border (#003EFF), 0.6 opacity.
• Focus: Orange-tinted bg (rgba(226,101,64,0.2)), orange text, inset + glow shadow.

Secondary (btn btn-secondary)

• Default: Transparent bg, white text, 4px radius, blue border (#2078CA).
• Hover/Focus similar to primary.

Compact (cm__btn)

• Default: Brownish orange (#BD502D), white text, 2.5px radius, padding ~6.5px 23.6px.
• Hover: Darker brown (#A84A2F).
• Active: Bright blue (#007FFF).
• Focus: Blue glow (#0099FF).

Compact Secondary (cm__btn--secondary)

• Default: Navy (#0C1D3B), white text.

6.2 Links

Four variants:

1. Deep blue (#063369), underline; hover turns orange.
2. White text, underline; hover orange.
3. Dark gray (#373737), no underline; hover orange + underline.
4. Medium gray (#666666), no underline; hover orange.

6.3 Forms

Email input: White bg, dark gray text, pill radius (50px left side), padded 30px. No border, clean.

Select: Transparent bg, black text, pill radius, padded. Focus turns bg navy, text white.

6.4 Cards

Cards: Likely 8px radius, 1px light gray border (#EBECEF), occasional shadows.

7. Design Tokens

:root {
  /* Colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-deep-blue: #063369;
  --color-light-gray: #cac8c8;
  --color-medium-gray: #575757;
  --color-primary-orange: #cc471e;
  --color-secondary-navy: #0c1d3b;

  /* Typography */
  --font-proxima-nova: "proxima-nova", sans-serif;
  --font-black-tie: "Black Tie", sans-serif;
  --font-awesome-brands: "Font Awesome Brands";

  /* Spacing */
  --space-1: 1px;
  --space-3: 3px;
  --space-5: 5px;
  --space-8: 8px;
  --space-10: 10px;
  --space-15: 15px;
  --space-20: 20px;
  --space-35: 35px;

  /* Border Radius */
  --radius-2: 2px;
  --radius-2_5: 2.5px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-14: 14px;
  --radius-50: 50px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-inset-gray: rgba(110,110,110,0.6) 0px 0px 8px inset;
  --shadow-soft-drop: rgba(0,0,0,0.1) 0px 2px 4px -2px, rgba(0,0,0,0.1) 0px 4px 6px -1px;
  --shadow-medium-drop: rgba(0,0,0,0.176) 0px 6px 12px 0px;
}

8. AI Coding Assistant Prompt

# PR Newswire Design System Specification

You are a PR Newswire design expert. Build UIs matching their visual language exactly.

## Brand Context
PR Newswire’s design is professional, corporate, and action-oriented. It uses a restrained palette, geometric sans typography, and tight spacing to present dense information clearly. The brand prioritizes clarity, contrast, and authority.

## Color Palette
- Primary Orange: #CC471E — Primary buttons, key CTAs, hover link color
- Secondary Navy: #0C1D3B — Headers, footers, secondary buttons
- Deep Blue: #063369 — Default link color, headings
- Black: #000000 — Primary text, icons
- White: #FFFFFF — Backgrounds, text on dark
- Light Gray: #CAC8C8 — Dividers, table lines
- Medium Gray: #575757 — Secondary text

## Typography
Font Families:
- Proxima Nova (sans-serif) — headings, body, links
- Black Tie (sans-serif) — headings, some buttons
- Font Awesome Brands — icons

Type Sizes:
| Context | Font | Size | Weight | Line Height |
| heading-1 | proxima-nova | 34px | 200 | 0.59 |
| heading-1 | proxima-nova | 34px | 700 | 1.43 |
... (include full table from analysis)

## Spacing & Grid
Base: 8px grid with exceptions.
Values: 1px, 3px, 5px, 8px, 10px, 15px, 20px, 35px.
Use multiples of 8px for layout; smaller for fine-tuning borders/icons.

## Border Radius
- sm: 2px — buttons
- sm2: 2.5px — compact buttons
- md: 4px — modals, buttons
- lg: 8px — cards
- xl: 14px — iframes, blocks
- full: 50px — pill inputs
- circle: 50% — avatars

## Shadows & Depth
- Inset gray: rgba(110,110,110,0.6) 0px 0px 8px inset — input states
- Soft drop: rgba(0,0,0,0.1) 0px 2px 4px -2px, rgba(0,0,0,0.1) 0px 4px 6px -1px — buttons hover
- Medium drop: rgba(0,0,0,0.176) 0px 6px 12px — cards

## Component Specifications

### Primary Button
Default: bg #CC471E, text #FFFFFF, padding 13px 20px 14px, radius 4px, border 1px solid #CC471E, font-weight 700, font-size 16px.
Hover: bg #063369, text #CC471E, border 1px solid #FFFFFF, opacity 0.9, shadow soft drop.
Active: bg #00837E, text #000000, border 1px solid #003EFF, opacity 0.6.
Focus: bg rgba(226,101,64,0.2), text #CC471E, shadow inset + glow.

### Secondary Button
Default: transparent bg, text #FFFFFF, border 1px solid #2078CA, radius 4px.
Hover/Focus: same as primary.

### Compact Button (.cm__btn)
Default: bg #BD502D, white text, radius 2.5px, padding 6.56px 23.616px.
Hover: bg #A84A2F.

### Link
Deep blue text, underline; hover orange.

### Input Fields
Email: white bg, dark text, radius 50px left, padding 0 30px, no border.
Select: transparent bg, black text, radius 50px left; focus navy bg, white text.

## Layout & Responsive Rules
Breakpoints: 140px, 175px, 320px, 414px, ..., 2200px.
Bootstrap + Vuetify grid.

## Interaction Rules
Transitions: ~150ms ease on hover/focus.
Focus indicators: orange glow or outline.

## DO List
- Use only defined palette colors.
- Keep spacing in multiples of 8px except fine-tune values.
- Maintain consistent border radius per component type.
- Use Proxima Nova for body, Black Tie for brand headings.
- Invert colors on hover for buttons.

## DON'T List
- Don’t invent new colors.
- Don’t mix sharp and pill corners in same component.
- Don’t apply heavy shadows.
- Don’t reduce button padding below spec.

## Code Examples

```css
.btn-primary {
  background: #CC471E;
  color: #FFFFFF;
  padding: 13px 20px 14px;
  border-radius: 4px;
  font-weight: 700;
  font-size: 16px;
  border: 1px solid #CC471E;
  transition: background 150ms ease;
}
.btn-primary:hover {
  background: #063369;
  color: #CC471E;
  border: 1px solid #FFFFFF;
  opacity: 0.9;
  box-shadow: rgba(0,0,0,0.1) 0px 2px 4px -2px, rgba(0,0,0,0.1) 0px 4px 6px -1px;
}
```

```css
.input-email {
  background: #FFFFFF;
  color: #373737;
  border-radius: 50px 0 0 50px;
  padding: 0 30px;
  border: none;
}
.input-email:focus {
  outline: none;
}
```

```css
.card {
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #EBECEF;
  box-shadow: rgba(0,0,0,0.176) 0px 6px 12px;
  padding: 20px;
}
```

9. Summary

TL;DR — PR Newswire’s design system is corporate and precise. Orange calls to action, deep navy authority, Proxima Nova clarity, tight spacing. It’s built for dense content with minimal visual noise.

Brand Keywords — corporate-authority, action-accented, dense-content, restrained-color