# Proprofskb Design System

> A structured utility canvas of corporate blue and high-contrast grayscale, anchored by pill-shaped actions and Roboto-driven clarity.

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

## TL;DR
Proprofskb utilizes a "monochrome-plus-one" system where a foundational grayscale palette (#ffffff, #4d4d4d) is punctuated by a specific functional blue (#1870d5). The interface is characterized by high-density information layouts, generous use of 50px pill-shaped containers for both buttons and cards, and a clear typographic hierarchy using Roboto. Visual depth is achieved through subtle 1px borders (#e9e9e9) and soft, directional shadows (3px horizontal offset) rather than heavy blurs. The system prioritizes legibility and utility, often using orange (#df7000) as a secondary semantic accent for emphasis in headings.

## Signature DNA
1. **The 50px Pill Standard** (The primary geometric signature used for both CTA buttons and feature cards, creating a consistent "stadium" container language across all pages.)
2. **Blue-to-Orange Emphasis** (Headlines frequently pair primary blue #1870d5 with high-contrast orange #df7000 to highlight key value propositions like "80% Tickets Automatically".)
3. **Offset Shadow Depth** (Unlike standard centered glows, the system uses a specific right-leaning shadow `3px 0px 6px` to lift primary interactive elements.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Page background, card surface, button text | 218 | 1.0 | Computed |
| `{color.ink.primary}` | `#4d4d4d` | Primary body text, navigation labels | 541 | 0.8 | Computed |
| `{color.ink.heading}` | `#2e2e2e` | Darker emphasis for subheadings | 98 | 0.8 | Computed |
| `{color.border.light}` | `#e9e9e9` | Default section and card dividers | 23 | 0.8 | Computed |
| `{color.surface.soft}` | `#f7f7f7` | Alternating section backgrounds | 16 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#1870d5` | Primary CTA background, active borders | 51 | 0.8 | Computed |
| `{color.accent.blue}` | `#3b5998` | Link text, secondary button text | 188 | 0.8 | Computed |
| `{color.accent.orange}` | `#df7000` | Heading emphasis, decorative borders | 24 | 0.8 | Computed |
| `{color.accent.sky}` | `#3c8ac9` | Tertiary borders (decorative_only) | 4 | 0.6 | Computed |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.error}` | `#d42c02` | Critical alerts and pricing highlights |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Roboto** | 300, 400, 500, 600, 700 | All headings, body, and UI | Roboto (Google Fonts) | Apache 2.0 |
| **Arial** | 400 | Form inputs, fallback body | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 54px | 64px | normal | 700 | Hero H1 | `h1.h1headingtag` |
| `{type.display.lg}` | 42px | 52px | normal | 500 | Section H2 | `h2.h3headingtag` |
| `{type.heading.md}` | 30px | 400px | normal | 500 | Sub-section head | `div.head` |
| `{type.heading.sm}` | 26px | 32px | normal | 500 | Feature titles | `h4` |
| `{type.body.lg}` | 18px | 30px | normal | 400 | Intro paragraphs | `p.para-med` |
| `{type.body.md}` | 17px | normal | normal | 400 | Nav / Header | `header.header` |
| `{type.body.sm}` | 14px | 24px | normal | 400 | Footer / List items | `li` |
| `{type.caption}` | 10px | normal | normal | 500 | Tags / Badges | `span.uc-tag` |

### Principles
1. **Tight Display Leading:** Large display sizes (54px) maintain a tight 1.18 line-height ratio to keep headlines cohesive.
2. **Medium Weight Emphasis:** Roboto 500 is the standard for interactive elements and sub-headers, avoiding 700 except for the primary H1.
3. **Body Breathability:** Standard body text (18px) uses a generous 1.66 line-height (30px) for maximum legibility in long-form content.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 108 |
| `{space.sm}` | 10px | 131 |
| `{space.md}` | 15px | 139 |
| `{space.lg}` | 20px | 61 |
| `{space.xl}` | 30px | 53 |
| `{space.section}` | 50px | 40 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Main layout sections | 938 occurrences |
| `{radius.sm}` | 8px | Content cards | `Card` component |
| `{radius.md}` | 10px | Surface panels | `Surface` component |
| `{radius.pill}` | 50px | Primary CTAs, Feature Cards | `Rounded Button` |
| `{radius.full}` | 999px | Badges, Avatars | `Pill / Badge` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `0px 1px 2px 1px #e8e8e8` | Standard content cards | pricing page |
| `{shadow.primary}` | `3px 0px 6px 0px #bfbfbf` | Primary Blue Buttons | homepage hero |
| `{shadow.floating}` | `0px 0px 25px 0px #7a7a7a` | Modal/Floating elements | pricing page |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary call to action
**Pages observed:** homepage, pricing
**Spec:** Background: `#1870d5` | Text: `#ffffff` | Border: `1px #1870d5` | Radius: `50px` | Padding: `12px 32px` | Typography: `16px/500` | Shadow: `3px 0px 6px #bfbfbf`
**States observed:** Default | Active: captured

#### Navigation
**Role:** Global site header
**Pages observed:** homepage, pricing
**Spec:** Background: `#ffffff` | Text: `#4d4d4d` | Border: `none` | Radius: `0px` | Padding: `0px` | Typography: `17.1px/400`
**States observed:** Default: captured

### Tier 2: Patterns

#### Feature Card (Pill)
**Role:** Highlighting specific tool suites or categories
**Pages observed:** homepage, pricing
**Spec:** Background: `#1870d5` | Text: `#ffffff` | Border: `1px #1870d5` | Radius: `50px` | Padding: `7px 18px` | Typography: `16px/400`
**States observed:** Default: captured

#### Text Input
**Role:** Search and lead capture
**Pages observed:** homepage, pricing
**Spec:** Background: `#ffffff` | Text: `#777777` | Border: `1px rgba(204, 204, 204, 0.28)` | Radius: `26px` | Padding: `13px` | Typography: `14px/400`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Pricing Surface
**Role:** Container for plan details
**Pages observed:** pricing
**Spec:** Background: `transparent` | Text: `#4d4d4d` | Border: `1px #ffffff80` | Radius: `10px` | Padding: `28px 35px`
**States observed:** Default: captured

#### Content Chip
**Role:** Metadata or category tagging
**Pages observed:** homepage
**Spec:** Background: `transparent` | Text: `#4b5563` | Border: `1px #f1c79d` | Radius: `999px` | Padding: `10px 20px` | Typography: `16px/400`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Padding | 50px (vertical) |
| Grid Gutter | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Desktop | 1440px | Multi-column feature grids, full horizontal nav |
| Mobile | 390px | Stacked cards, hidden nav menu, reduced H1 size |

## Imagery & decoration
The brand uses clean, line-art style icons with thin strokes. Decorative elements include orange underlines and "hand-drawn" circles around key text. Backgrounds are kept strictly achromatic (#ffffff or #f7f7f7) to let the blue and orange accents drive focus.

## Do's
- Use `#1870d5` for all primary interactive backgrounds.
- Apply `50px` border-radius to primary buttons to maintain the "pill" signature.
- Use Roboto 500 for subheadings to ensure weight contrast against 400 body text.
- Highlight key metrics or "magic" features using `#df7000` orange.
- Maintain a `30px` line-height for body paragraphs to ensure readability.

## Don'ts
- **Wrong:** Using `#3b5998` (Secondary Blue) for primary CTA backgrounds. **Right:** Use `#1870d5`. **Reason:** #3b5998 is reserved for text links and secondary actions.
- **Wrong:** Applying heavy blurs to card shadows. **Right:** Use the offset `3px 0px 6px` shadow. **Reason:** The brand identity relies on directional, crisp elevation.
- **Wrong:** Using Roboto 700 for body text. **Right:** Use 400 or 500. **Reason:** Bold weights are reserved for H1 and specific UI labels.
- Do not use sharp `0px` corners for interactive elements; always use at least `2px` for inputs or `50px` for buttons.
- Do not use orange for body text; it is strictly a heading and border accent.

## Similar brands
- Zendesk (Clean, utility-focused blue)
- Help Scout (Soft rounded corners, friendly professional)
- Intercom (High-contrast typography, functional grayscale)

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #1870d5;
  --color-accent-blue: #3b5998;
  --color-accent-orange: #df7000;
  --color-ink: #4d4d4d;
  --color-canvas: #ffffff;
  --radius-pill: 50px;
  --shadow-primary: 3px 0px 6px 0px rgba(191, 191, 191, 1);
  --font-main: 'Roboto', sans-serif;
}
```

## Known gaps
- Hover states for secondary links were not explicitly captured in the computed style tokens.
- The specific transition timing for the "pill" button expansion on mobile was not recorded.
- Dark mode tokens are currently unavailable as the site is strictly light-mode.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://proprofskb.com | 1440x900 | 2026-06-06 |
| Pricing | https://proprofskb.com/pricing | 1440x900 | 2026-06-06 |
| Mobile Home | https://proprofskb.com | 390x844 | 2026-06-06 |