# Pandium Design System

> A clean, developer-centric canvas defined by high-contrast slate typography and vibrant purple-to-blue primary actions.

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

## TL;DR
Pandium utilizes a structured monochrome foundation of pure white surfaces (`#ffffff`) and deep slate text (`#101828`, `#475467`) to maintain a professional, technical atmosphere. Brand energy is injected through a primary purple accent (`#7f56d9`) used for high-priority CTAs and subtle background washes (`#f4ebff`). Typography is a dual-font system pairing the rounded, friendly geometry of Comfortaa for headlines with the high-legibility utility of Inter for body and UI. Layouts rely on generous vertical spacing (up to 64px) and soft-radius containers (16px) to organize complex technical information into digestible, approachable sections.

## Signature DNA
1. **Rounded Technicality** (The pairing of Comfortaa headlines with 16px border radii creates a "soft-tech" aesthetic that feels accessible rather than clinical, seen across all landing pages).
2. **The Purple Pivot** (Primary actions and key brand moments use `#7f56d9`, providing a singular focal point against the otherwise achromatic slate and white grid).
3. **Layered Grays** (A sophisticated scale of slates from `--gray900` to `--gray100` is used to create information hierarchy without relying on color, maintaining a developer-first "docs" feel).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--white` | `#ffffff` | Page background, button text, card surface | 181 | 1 | `computed_style` |
| `--gray100` | `#f2f4f7` | Secondary section backgrounds, card fills | 18 | 1 | `--gray100` |
| `--gray200` | `#eaecf0` | Subtle dividers and borders | 6 | 1 | `--gray200` |
| `--gray300` | `#d0d5dd` | Standard input and component borders | 12 | 1 | `--gray300` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--primary600` | `#7f56d9` | Primary CTA background, active borders | 77 | 1 | `--primary600` |
| `--gray900` | `#101828` | Primary display headings, dark button text | 51 | 1 | `--gray900` |
| `--gray600` | `#475467` | Default body text, secondary icons | 401 | 1 | `--gray600` |
| `--primary100` | `#f4ebff` | Brand-tinted section backgrounds | 12 | 1 | `--primary100` |
| `--blue600` | `#1570ef` | Secondary product accents (Pricing) | 5 | 1 | `--blue600` |
| `--primary700` | `#6941c6` | Hover states for primary buttons | 8 | 1 | `--primary700` |
| `--primary400` | `#b692f6` | Decorative accents (decorative_only) | 1 | 1 | `--primary400` |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `--success700` | `#027a48` | Success indicators, "New" badges | 4 | 1 | `--success700` |
| `--success50` | `#ecfdf3` | Success badge background | 2 | 1 | `--success50` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Comfortaa | 400, 600 | Display, Headings | Comfortaa (Google Fonts) | SIL Open Font |
| Inter | 300, 400, 500, 600, 700 | Body, UI, Buttons | Inter (Google Fonts) | SIL Open Font |
| system-ui | 400, 500, 600 | Fallback, Footer labels | Sans-serif | Foundation |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `display-lg` | 48px | 57.6px | -0.96px | 600 | Hero H1 | `h1.heading-large` |
| `display-md` | 36px | 46.8px | -0.72px | 600 | Section Headings | `h2.heading-medium` |
| `display-sm` | 30px | 39px | normal | 600 | Sub-section Headings | `h2.heading-small` |
| `heading-sm` | 24px | 28.8px | -0.48px | 600 | Card Titles | `h3.text-size-xlarge` |
| `body-lg` | 20px | 30px | normal | 400 | Intro Paragraphs | `div.text-size-large` |
| `body-md` | 16px | 24px | normal | 400 | Default Body | `header.section` |
| `body-sm` | 14px | 21px | normal | 500 | Labels, Footer links | `label.field-label-2` |
| `caption` | 12px | 18px | normal | 300 | Small annotations | `div.uui-badge-small` |

### Principles
- **Headings are Rounded:** Comfortaa is strictly reserved for H1 through H3 to maintain brand friendliness.
- **UI is Utility:** Inter handles all interactive elements and long-form prose for maximum legibility.
- **Tight Display Tracking:** Large display sizes (36px+) use negative letter-spacing (-0.72px to -0.96px) to maintain visual tension.

## Spacing
**Base unit:** 4
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `--spacing-xs` | 8px | 91 |
| `--spacing-sm` | 12px | 75 |
| `--spacing-md` | 16px | 16 |
| `--spacing-lg` | 24px | 28 |
| `--spacing-xl` | 32px | 34 |
| `--spacing-section` | 64px | 15 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `radius-control` | 8px | Buttons, Text Inputs | `Rounded Button`, `Text Input` |
| `radius-card` | 16px | Feature Cards, Pricing Tiers | `Card`, `Surface` |
| `radius-pill` | 99px | Badges, Search Bars | `Card` (observed_once) |
| `radius-max` | 160px | Success Badges | `Card` (Success badge) |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `shadow-sm` | `rgba(16, 24, 40, 0.05) 0px 1px 2px 0px` | Standard Buttons | `Rounded Button` |
| `shadow-lg` | `rgba(0, 0, 0, 0.08) 0px 12px 16px -4px` | Hovered Pricing Cards | `Card` (Pricing) |
| `shadow-inset` | `rgba(0, 0, 0, 0.1) 2px 2px 5px 0px inset` | Search/Input fields | `Card` (Search bar) |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action (e.g., "Get a demo", "Start building")
**Pages observed:** All
**Spec:** Background: `#7f56d9` | Text: `#ffffff` | Radius: `8px` | Padding: `10px 18px` | Font: `Inter 600 16px` | Shadow: `shadow-sm`
**States observed:** Default: Captured | Hover: Not captured (Token `--primary700` inferred) | Active: Captured

#### Text Input
**Role:** Lead capture and contact forms
**Pages observed:** https://pandium.com
**Spec:** Background: `#ffffff` | Text: `#475467` | Border: `1px solid #d0d5dd` | Radius: `8px` | Padding: `8px 14px`
**States observed:** Default: Captured | Focus: Not captured

### Tier 2: Patterns
#### Feature Card
**Role:** Highlighting platform capabilities
**Pages observed:** https://pandium.com, https://pandium.com/about
**Spec:** Background: `#f4ebff` | Text: `#475467` | Radius: `16px` | Padding: `64px` | Border: `none`
**States observed:** Default: Captured

#### Pricing Tier Card
**Role:** Displaying plan options
**Pages observed:** https://pandium.com/pricing
**Spec:** Background: `#ffffff` | Border: `1px solid #eaecf0` | Radius: `16px` | Padding: `32px` | Shadow: `shadow-lg` (on hover/featured)
**States observed:** Default: Captured

### Tier 3: Surface-specific
#### Success Badge
**Role:** Status indicators or "New" labels
**Pages observed:** https://pandium.com/pricing, https://pandium.com/about
**Spec:** Background: `#ecfdf3` | Text: `#027a48` | Radius: `160px` | Padding: `2px 8px` | Font: `12px`
**States observed:** Default: Captured

#### Secondary Ghost Button
**Role:** Tertiary actions or navigation links
**Pages observed:** https://pandium.com/pricing, https://pandium.com/about
**Spec:** Background: `transparent` | Text: `#475467` | Border: `1px solid transparent` | Radius: `8px` | Padding: `10px 18px`
**States observed:** Default: Captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1280px (estimated from 1440px capture) |
| Section Padding (Vertical) | 64px |
| Grid Gutter | 24px |
| Card Padding | 32px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Stacked card layouts, 100% width buttons, reduced H1 size |
| Desktop | 1440px | Multi-column grids (3-up feature cards), horizontal navigation |

## Imagery & decoration
Pandium uses high-fidelity software screenshots and abstract "connector" diagrams. The visual metaphor focuses on nodes and paths, often using the primary purple and blue colors. It avoids generic stock photography of people, preferring technical visualizations.

## Do's
- Use **Comfortaa** for all main section headings (`h1`, `h2`).
- Apply a **16px border radius** to all content containers and cards.
- Use **#7f56d9** as the primary background for the most important page action.
- Maintain a **64px vertical rhythm** between major page sections.
- Use **#f2f4f7** (`--gray100`) for secondary background bands to break up long pages.

## Don'ts
- **Don't** use Comfortaa for body text; it is strictly for display roles.
- **Don't** use pure black (#000000) for text; use **#101828** for high-contrast headings.
- **Don't** mix border radii on a single page; stick to the **8px/16px** system.
- **Wrong:** Using `#1570ef` (Blue) for a primary "Get Started" button. **Right:** Use `#7f56d9` (Purple). **Reason:** Blue is a secondary product accent, Purple is the brand primary.

## Similar brands
- **Stripe** (Developer-first, clean typography, structured grays)
- **Segment** (Technical integration focus, clean card-based UI)
- **Zapier** (Automation space, friendly but professional aesthetic)

## Quick start
```css
/* CSS Variables */
:root {
  --primary-600: #7f56d9;
  --gray-900: #101828;
  --gray-600: #475467;
  --gray-100: #f2f4f7;
  --radius-card: 16px;
  --font-display: 'Comfortaa', sans-serif;
  --font-body: 'Inter', sans-serif;
}
```

## Agent prompt examples
- "Create a pricing card using a white background, a 1px border of #eaecf0, and a 16px border radius. Use Comfortaa 600 for the price and Inter 400 for the feature list."
- "Generate a primary CTA button with a #7f56d9 background, white text in Inter 600, and an 8px border radius."
- "Design a section header with a Comfortaa 600 title in #101828 and an Inter 400 subtext in #475467."

## Known gaps
- Hover and Active states for buttons were not fully captured in the static evidence.
- Specific mobile breakpoint transitions (e.g., 768px) were not sampled.
- Dark mode tokens were not present in the source pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://pandium.com | 1440x900 | 2026-06-06 |
| Pricing | https://pandium.com/pricing | 1440x900 | 2026-06-06 |
| About | https://pandium.com/about | 1440x900 | 2026-06-06 |