# Pressrelations Design System

> High-contrast information architecture anchored by a signature emerald primary and structured monochrome grids.

**Source:** https://pressrelations.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Pressrelations utilizes a high-contrast monochrome foundation (#000000 on #ffffff) punctuated by a vibrant emerald primary accent (`--primary`: #00a35b). The system is characterized by heavy use of outlined containers, 1px borders, and circular "arrow-in-ring" iconography for all primary actions. Layouts are strictly grid-based, often utilizing alternating background bands of white and a muted teal-green for sectioning. Typography is clean and functional, prioritizing legibility in data-heavy contexts.

## Signature DNA
1. **The Emerald Vector** (The use of #00a35b for all interactive cues, including text links, button outlines, and the signature circular arrow icon, seen across all pages).
2. **Outlined Containment** (Cards and form inputs use a consistent 1px border, often in #00a35b or #e5e5e5, creating a technical, "monitored" aesthetic).
3. **The Ringed Arrow** (A specific UI pattern where CTAs are paired with a right-pointing arrow inside a thin circle, used for "Get a demo", "References", and "Send").

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| Canvas | `#ffffff` | Primary page background | High | High | Evidence |
| Ink | `#000000` | Primary text and headings | High | High | Evidence |
| Footer Canvas | `#444444` | Dark mode footer background | High | High | Evidence |
| Divider | `#e5e5e5` | Subtle section and card borders | High | Medium | Evidence |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| Primary Emerald | `#00a35b` | CTAs, icons, active borders, and links | High | High | `--primary` |
| News Band | `#56b09e` | Background for "NEWS" section | 2 | Medium | Evidence |
| Soft Mint | `#e6f4f1` | Hover states and card backgrounds | 3 | Medium | Evidence |

### Semantic
| Token | Hex | Role | Source |
|---|---|---|---|
| Success | `#28a745` | Confirmation states | `--green` |
| Error | `#f84620` | Validation and errors | `--red` |
| Warning | `#ffc107` | Alerts | `--yellow` |
| Info | `#17a2b8` | Neutral callouts | `--cyan` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Sans-Serif (System) | 400, 700 | All copy, UI, and headings | Inter | Standard |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{typography.h1}` | 42px | 1.2 | -0.02em | 700 | Hero headlines | `h1` |
| `{typography.h2}` | 32px | 1.25 | normal | 700 | Section headers | `h2` |
| `{typography.h3}` | 24px | 1.3 | normal | 700 | Card titles | `h3` |
| `{typography.body-lg}` | 18px | 1.6 | normal | 400 | Lead paragraphs | `.lead` |
| `{typography.body}` | 16px | 1.5 | normal | 400 | Standard body text | `p` |
| `{typography.label}` | 14px | 1.4 | 0.05em | 700 | Form labels, small caps | `label` |
| `{typography.caption}` | 12px | 1.4 | normal | 400 | Footer links, metadata | `footer a` |
| `{typography.button}` | 16px | 1.0 | normal | 700 | CTA text | `.btn` |

### Principles
1. **Emerald for Interaction:** All text that is clickable but not a button is rendered in #00a35b.
2. **High Contrast Headers:** Headlines are almost exclusively pure black (#000000) on white or light mint backgrounds.
3. **Uppercase Accents:** Small labels and "Stay Ahead" markers use uppercase with slight letter-spacing.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{spacing.xs}` | 8px | Internal component padding |
| `{spacing.md}` | 24px | Card internal padding |
| `{spacing.lg}` | 48px | Element grouping |
| `{spacing.xl}` | 80px | Section vertical padding |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Form inputs, primary buttons | Evidence (Form fields) |
| `{radius.sm}` | 4px | Image containers | Evidence |
| `{radius.full}` | 9999px | CTA Icon rings | Evidence |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | 0px | Default state for all cards | Evidence |
| Hover | 0 8px 24px rgba(0,0,0,0.08) | Card hover interaction | Evidence |

## Components

### Tier 1: Foundational
#### Icon CTA
**Role:** Primary navigational trigger
**Pages observed:** Home, Pricing, About
**Spec:** Text #00a35b / Weight 700 / Icon: 1px circle with arrow #00a35b
**States observed:** Default | Hover: {captured}

#### Form Input
**Role:** Lead generation and search
**Pages observed:** Home, 404
**Spec:** Border 1px #00a35b / Background #ffffff / Radius 0px / Text #000000
**States observed:** Default | Focus: {captured}

### Tier 2: Patterns
#### Feature Card
**Role:** Product and service highlights
**Pages observed:** Home
**Spec:** Border 1px #e5e5e5 / Padding 24px / Title #000000 (H3)
**States observed:** Default | Hover: Border changes to #00a35b

#### News Row
**Role:** Chronological updates
**Pages observed:** Home
**Spec:** Background transparent / Border-bottom 1px rgba(0,0,0,0.1) / Text #000000
**States observed:** Default | Hover: Background #e6f4f1

### Tier 3: Surface-specific
#### Contact Form Block
**Role:** Conversion point
**Pages observed:** Home
**Spec:** Background #f8f9fa / Grid 2-column / Inputs 100% width
**States observed:** Default

#### Footer Navigation
**Role:** Site-wide directory
**Pages observed:** All
**Spec:** Background #444444 / Text #ffffff / Border-top 1px #555555
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px |
| Column Gap | 32px |
| Section Spacing | 80px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; 2-column grids stack to 1-column. |
| Desktop | 1440px | Standard 12-column grid layout. |

## Imagery & decoration
- **Technical Illustrations:** Uses thin-stroke black and white line art with yellow accents (seen on 404 page).
- **Photography:** High-quality, atmospheric hero imagery (Earth from space, professional office environments).
- **Geometric Accents:** Use of 1px emerald lines to connect or frame content blocks.

## Do's
- Use #00a35b for all primary action icons and text links.
- Maintain 0px border radius on all form elements and primary buttons.
- Use pure black (#000000) for all primary headlines.
- Ensure all cards have a 1px border.
- Pair every "Get a demo" or "Read more" link with the ringed arrow icon.

## Don'ts
- **Wrong:** Using #007bff (Standard Blue) for links. **Right:** Use #00a35b. **Reason:** The brand primary is emerald, not standard browser blue.
- **Wrong:** Applying heavy drop shadows to cards. **Right:** Use 1px borders. **Reason:** The brand aesthetic is flat and technical.
- **Wrong:** Using rounded corners on inputs. **Right:** Use sharp 0px corners. **Reason:** Consistency with the architectural grid.

## Similar brands
- Reuters (Information-heavy, monochrome base)
- Bloomberg (Data-driven, high contrast)
- McKinsey & Company (Professional, structured grid)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --primary: #00a35b;
  --ink: #000000;
  --canvas: #ffffff;
  --border-subtle: #e5e5e5;
  --font-main: sans-serif;
}
```

## Agent prompt examples
- "Generate a feature card with a 1px #e5e5e5 border, an H3 title in #000000, and a 'Read More' link in #00a35b with a circular arrow icon."
- "Create a contact form with 0px border-radius inputs, 1px #00a35b borders, and a primary submit button using the ringed arrow pattern."
- "Design a section header using #000000 text at 32px bold, with a 4px emerald accent line above it."

## Known gaps
- Specific hover transition timings were not captured.
- Mobile menu expanded state details were limited.
- Exact font family name (beyond generic sans-serif) was not identified in the token set.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://pressrelations.com | 1440px | 2026-06-06 |
| Pricing | https://pressrelations.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://pressrelations.com | 390px | 2026-06-06 |