# Pocketsuite Design System

> Professional utility meets high-contrast clarity, anchored by a deep slate primary and geometric Poppins display type.

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

## TL;DR
Pocketsuite utilizes a high-contrast, professional palette dominated by "Slate Blue" (#314a68) and pure "Black" (#000000) against a clean white canvas. The system relies on **Poppins** for bold, geometric display headings and **DM Sans** for functional UI and body text. Components favor rounded geometries, specifically 8px to 12px radii for cards and controls, with a distinctive 50px "pill" radius for large section containers. Layouts are structured with generous vertical pacing, often using 120px section gaps to separate dense feature blocks.

## Signature DNA
1. **Slate Primary Anchoring:** The use of #314a68 as the primary action color and heading color creates a "trust-first" professional atmosphere that avoids the typical neon-blue of SaaS (Home, Pricing).
2. **Geometric Type Pairing:** High-weight Poppins (600-700) for display headers paired with the humanist clarity of DM Sans for navigation and body (Home, Pricing).
3. **Softened Utility:** The consistent application of 8px-12px corner radii on interactive elements and cards to soften the high-contrast "Black/White" foundation (Pricing cards, CTA buttons).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.primary}` | `#314a68` | Primary CTA bg, headings, borders | 136 | 0.8 | computed_style |
| `{color.black}` | `#000000` | Primary text, secondary buttons | 248 | 1.0 | `--wp--preset--color--black` |
| `{color.white}` | `#ffffff` | Page canvas, button text, card bg | 116 | 1.0 | `--wp--preset--color--white` |
| `{color.gray.medium}` | `#555555` | Secondary body text | 206 | 0.8 | computed_style |
| `{color.gray.dark}` | `#111111` | Pricing tier headings | 45 | 0.8 | computed_style |
| `{color.border.light}` | `#c4c4c4` | Default 1px section/input borders | 26 | 0.8 | computed_style |
| `{color.surface.muted}` | `#eef1f4` | Card backgrounds, section fills | 8 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.accent.blue}` | `#6b95b4` | Decorative section backgrounds | 5 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Poppins** | 400, 500, 600, 700 | Display, Hero, Section Heads | Poppins (Google Fonts) | OFL |
| **DM Sans** | 400, 700 | Navigation, Body, UI Labels | DM Sans (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 80px | 89.6px | normal | 600 | Hero H2 | `h2` |
| `{type.display.md}` | 48px | 53.76px | normal | 600 | Section Hero | `h2:nth-of-type(1)` |
| `{type.display.sm}` | 44px | 66px | normal | 700 | Sub-section display | `h4` |
| `{type.heading.lg}` | 36px | 54px | normal | 700 | Section headings | `h3` |
| `{type.heading.md}` | 28px | 42px | normal | 400 | Intro paragraphs | `p` |
| `{type.heading.sm}` | 26px | 31.2px | normal | 700 | Card titles | `h5` |
| `{type.nav}` | 20px | 24px | normal | 400 | Top navigation | `li#menu-item-23` |
| `{type.body.lg}` | 18px | 23.4px | normal | 400 | Feature descriptions | `div.case__box` |
| `{type.body.md}` | 16px | 19.2px | normal | 400 | Default body text | `p` |

### Principles
- **Display Boldness:** Display titles (80px) use weight 600-700 to establish immediate hierarchy.
- **Humanist Utility:** DM Sans is reserved for high-density information (navigation, pricing tables) to maintain legibility.
- **Vertical Breathing:** Line heights for display type are kept tight (1.1-1.2), while body text expands (1.5) for readability.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 12px | 11 |
| `{space.sm}` | 16px | 92 |
| `{space.md}` | 24px | 39 |
| `{space.lg}` | 32px | 12 |
| `{space.xl}` | 40px | 4 |
| `{space.section}` | 120px | 13 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Default surfaces | 621 occurrences |
| `{radius.input}` | 4px | Form fields, small buttons | Pricing buttons |
| `{radius.control}` | 8px | UI Panels, pricing cards | Pricing surface |
| `{radius.card}` | 12px | Feature cards, primary CTAs | Home hero buttons |
| `{radius.pill}` | 50px | Large section containers | Section backgrounds |

## Elevation
Not captured in source (System uses flat design with 1px borders).

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** https://pocketsuite.io, https://pocketsuite.io/pricing
**Spec:** Background `{color.primary}` (#314a68) or `{color.black}` (#000000) / Text `{color.white}` (#ffffff) / Radius 12px or 5px / Padding 25px 24px / Typography `{type.heading.md}` (28px)
**States observed:** Default | Hover: captured | Focus: not captured | Active: not captured

#### Surface
**Role:** Structural containers and dividers
**Pages observed:** https://pocketsuite.io, https://pocketsuite.io/pricing
**Spec:** Background transparent / Border `{color.border.light}` (#c4c4c4) / Border-width 1px / Radius 0px
**States observed:** Default: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Benefit and feature highlights
**Pages observed:** https://pocketsuite.io
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.black}` (#000000) / Radius 12px / Padding 14px 18px 18px / Typography `{type.body.lg}` (18px)
**States observed:** Default: captured

#### Pricing Card
**Role:** Subscription tier display
**Pages observed:** https://pocketsuite.io/pricing
**Spec:** Background `{color.white}` (#ffffff) / Border `{color.black}` (#000000) / Radius 8px / Padding 20px / Typography `{type.body.md}` (16px)
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Section Container (Pill)
**Role:** High-level content grouping
**Pages observed:** https://pocketsuite.io
**Spec:** Background `{color.surface.muted}` (#eef1f4) / Radius 50px / Padding 120px 0px
**States observed:** Default: captured

#### Navigation Item
**Role:** Header menu links
**Pages observed:** https://pocketsuite.io, https://pocketsuite.io/pricing
**Spec:** Text `{color.primary}` (#314a68) / Typography `{type.nav}` (20px) / Weight 400
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max content width | 1200px (approx) |
| Section Gap | 120px |
| Column Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Stacked feature cards, reduced display type size |

## Imagery & decoration
Pocketsuite uses clean, high-fidelity app screenshots within device frames (iPhone/Desktop) and simple vector iconography with circular backgrounds. It avoids heavy shadows, preferring 1px borders and solid color blocks to define depth.

## Do's
- Use **Poppins 600** for all primary section headings.
- Apply **#314a68** for primary call-to-action backgrounds.
- Maintain **120px vertical spacing** between major content sections.
- Use **12px border radius** for primary feature cards.
- Ensure all body text is set in **DM Sans** at 16px or 18px.

## Don'ts
- **Wrong:** Using #0693e3 (Vivid Cyan Blue) for primary buttons. **Right:** Use #314a68. **Reason:** #0693e3 is a legacy WP token not used for primary brand actions in validated evidence.
- Do not use Poppins for long-form body copy; reserve for headings.
- Avoid sharp 0px corners on interactive buttons; use at least 4px-12px.
- Do not use pure black (#000000) for secondary body text; use #555555.

## Similar brands
- Clio
- HoneyBook
- Jobber
- FreshBooks

## Quick start

### CSS Custom Properties
```css
:root {
  --ps-color-primary: #314a68;
  --ps-color-black: #000000;
  --ps-color-white: #ffffff;
  --ps-color-gray-medium: #555555;
  --ps-font-display: 'Poppins', sans-serif;
  --ps-font-body: 'DM Sans', sans-serif;
  --ps-radius-card: 12px;
  --ps-radius-pill: 50px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #314a68;
  --color-gray-medium: #555555;
  --font-display: "Poppins";
  --font-body: "DM Sans";
  --radius-card: 12px;
  --radius-pill: 50px;
}
```

## Agent prompt examples
- "Create a feature section with a Poppins 600 heading in #314a68, followed by a DM Sans body paragraph in #555555, and a 12px rounded button using #314a68 background."
- "Generate a pricing card with an 8px border radius, a 1px border in #c4c4c4, and a primary CTA button in #000000."
- "Design a hero section with an 80px Poppins heading and a 120px bottom margin."

## Known gaps
- Hover and active states for buttons were not fully captured in the computed style pipeline.
- Mobile-specific typography scale for display headers (h1/h2) was not explicitly extracted.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://pocketsuite.io | Desktop 1440 | 2026-06-06 |
| Pricing | https://pocketsuite.io/pricing | Desktop 1440 | 2026-06-06 |