# Pynhq Design System

> High-contrast editorial canvas where sharp black geometry meets fluid, iridescent glassmorphism.

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

## TL;DR
Pynhq utilizes a sophisticated "Dark Editorial" aesthetic that pairs high-contrast achromatic foundations with vibrant, multi-chromatic accents. The system is anchored by **Domaine Display** and **Reckless Neue**, two high-character serifs that provide an authoritative, magazine-like feel. While the primary interface relies on a stark white (#ffffff) and deep black (#000000) palette, the brand voltage is delivered through iridescent 3D objects and soft, multi-color background gradients. Layouts are characterized by generous vertical spacing (up to 160px) and a strict adherence to sharp corners (0px radii), except for specific interactive "pill" elements.

## Signature DNA
1. **The Serif Hierarchy** (Domaine Display for massive display moments at 106px, transitioning to Reckless Neue for section headers. This creates a literary, high-end consulting atmosphere across all pages.)
2. **Iridescent Glassmorphism** (Vibrant, multi-colored 3D shapes and background "blooms" provide the only chromatic relief against a strictly monochrome UI, seen on the homepage and pricing headers.)
3. **Sharp-to-Pill Contrast** (A rigid 0px border-radius for surfaces and cards is punctuated only by 9999px "pill" buttons and badges, creating a clear distinction between structure and action.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| Pynhq (Parent) | #6b7280 | Iridescent 3D Shapes | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary background and button text | 8 | 1.0 | computed_style |
| `{color.ink}` | `#000000` | Primary text, surface backgrounds, and borders | 167 | 0.8 | computed_style |
| `{color.off-white}` | `#faf9f7` | Secondary surface backgrounds and footer text | 25 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.slate}` | `#6b7280` | Secondary body text and deemphasized labels | 10 | 0.6 | computed_style |
| `{color.ash}` | `#9ca3af` | Tertiary text and placeholder states | 8 | 0.6 | computed_style |
| `{color.sunset}` | `#eb8355` | Pricing highlights and "Includes" labels | 8 | 0.6 | computed_style |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.focus-ring}` | `#3b82f6` | Interactive focus states (declared token `--tw-ring-color`) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Domaine Display | 400 | Mega Display | Playfair Display | Licensed |
| Reckless Neue | 100, 300, 400 | Headlines & Body | Libre Baskerville | Licensed |
| Beausite Classic | 300, 500, 700 | UI Labels & Subheadings | Inter | Licensed |
| ui-sans-serif | 300, 400, 500 | Functional Body & Buttons | System Sans | OS |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-mega}` | 106px | 95.4px | normal | 400 | Hero Display | `p` (Homepage Hero) |
| `{type.display-lg}` | 48px | 55.2px | normal | 300 | Section Display | `p` |
| `{type.heading-md}` | 36px | 41.4px | normal | 300 | Section Headings | `h3.reckless-neue` |
| `{type.heading-sm}` | 26px | 28.16px | normal | 400 | Sub-headings | `h1` |
| `{type.body-lg}` | 18px | 25.2px | normal | 100 | Lead Paragraphs | `p` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Standard Body | `section.relative` |
| `{type.label-caps}` | 16px | 19.2px | 0.64px | 700 | Small Headings | `h1` |
| `{type.caption}` | 12px | 13.2px | 1.2px | 500 | Overlines/Badges | `div.beausite-classic.uppercase` |

### Principles
1. **Serif for Narrative:** Use Reckless Neue or Domaine Display for any text that tells the brand story or introduces a section.
2. **Sans for Utility:** Use `ui-sans-serif` or Beausite Classic for buttons, navigation, and technical metadata.
3. **Light Weights for Large Type:** Display sizes (48px+) should use weight 300 or 400; never bold the primary brand serifs.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 33 |
| `{space.md}` | 32px | 9 |
| `{space.xl}` | 64px | 4 |
| `{space.section}` | 128px | 7 |
| `{space.hero}` | 160px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Cards, Sections, Pricing Tiers | 185 occurrences |
| `{radius.sm}` | 2px | Form Inputs, Pricing Buttons | Pricing page |
| `{radius.pill}` | 9999px | Primary CTAs, Badges | Homepage/Pricing |

## Elevation
The system is predominantly flat. Depth is achieved through color blocking and iridescent 3D assets rather than shadows.
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All cards and surfaces | `shadow: none` in evidence |

## Components

### Tier 1: Foundational

#### Primary Button (Pill)
**Role:** Main call to action (e.g., "Book Demo")
**Pages observed:** Homepage, About
**Spec:** Background: #ffffff / Text: #000000 / Radius: 9999px / Padding: 10px 24px (estimated) / Typography: ui-sans-serif 500
**States observed:** Default | Hover: Not captured

#### Secondary Button (Sharp)
**Role:** Secondary actions or pricing buttons
**Pages observed:** Pricing
**Spec:** Background: transparent / Text: #000000 / Border: 1px solid #000000 / Radius: 2px / Padding: 16px 32px
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Accordion
**Role:** List of capabilities with expandable details
**Pages observed:** Homepage
**Spec:** Background: transparent / Text: #000000 / Border-bottom: 1px solid #e5e7eb / Radius: 0px
**States observed:** Default | Active: Expanded state shows light-weight Reckless Neue body text.

#### Pricing Card
**Role:** Tiered service options
**Pages observed:** Pricing
**Spec:** Background: #ffffff / Border: 1px solid #000000 / Radius: 0px / Padding: 32px
**States observed:** Default | Recommended: Features a `{color.sunset}` (#eb8355) top badge.

### Tier 3: Surface-specific

#### Testimonial Grid
**Role:** Social proof blocks
**Pages observed:** Homepage
**Spec:** Background: #000000 / Text: #ffffff / Radius: 0px / Padding: 40px
**States observed:** Default

#### Newsletter Signup
**Role:** Footer conversion point
**Pages observed:** Homepage, Pricing, About
**Spec:** Background: #ffffff / Border: 1px solid #000000 / Radius: 0px / Height: 48px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1280px (estimated) |
| Section Padding (Vertical) | 128px - 160px |
| Column Gap | 32px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Display type scales down; 1-column stacking for grids. |
| Desktop | 1440px | Full horizontal navigation; Multi-column grids (3-up for pricing). |

## Imagery & decoration
- **Iridescent Glass:** 3D rendered shapes with high-saturation gradients (pink, orange, blue, purple).
- **Background Blooms:** Soft radial gradients behind text to improve legibility on dark backgrounds.
- **Photography:** High-quality, candid-style professional photography with natural lighting.

## Do's
- Use **Domaine Display** for the single largest text element on a page.
- Maintain **0px border-radius** for all structural containers and cards.
- Use **#faf9f7** (Off-white) for large section backgrounds to soften the contrast against black text.
- Ensure **9999px pill radius** is used for the primary global CTA.
- Keep letter spacing at **1.2px** for uppercase captions in Beausite Classic.

## Don'ts
- **Don't** use border-radii on cards (e.g., 8px or 12px); keep them sharp (0px).
- **Don't** use the accent color #eb8355 for primary buttons; it is reserved for labels and highlights.
- **Don't** bold the Reckless Neue headlines; the brand relies on light weights (100-300) for elegance.
- **Wrong:** Using #3b82f6 (Focus Blue) as a primary brand color. **Right:** Use #000000. **Reason:** #3b82f6 is a functional utility token, not a brand accent.

## Similar brands
- Linear (High contrast, dark mode depth)
- Vercel (Achromatic foundation, sharp geometry)
- Kinfolk (Editorial typography, generous whitespace)

## Quick start

```css
/* CSS Variables */
:root {
  --pyn-canvas: #ffffff;
  --pyn-ink: #000000;
  --pyn-off-white: #faf9f7;
  --pyn-accent-sunset: #eb8355;
  --pyn-text-secondary: #6b7280;
  --pyn-radius-sharp: 0px;
  --pyn-radius-pill: 9999px;
  --font-display: "Domaine Display", serif;
  --font-heading: "Reckless Neue", serif;
}
```

## Agent prompt examples
- "Generate a hero section with a 106px Domaine Display headline in #000000, a pill-shaped button with #000000 background and #ffffff text, and a sharp 0px radius container."
- "Create a pricing card with a 1px black border, 0px border-radius, and a small #eb8355 label at the top in all-caps Beausite Classic."
- "Design a testimonial block with a #000000 background, #ffffff text in Reckless Neue weight 100, and no border radius."

## Known gaps
- Hover and Active states for primary buttons were not explicitly captured in the static evidence.
- The exact transition point for the mobile breakpoint was inferred from the 390px viewport sample.
- Shadow tokens were not present in the analyzed pages.

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