# Polymath.network Design System

> Corporate blue precision meets institutional white space, anchored by Inter-driven typography and high-contrast midnight accents.

**Source:** https://polymath.network | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Polymath.network utilizes a "Midnight and Azure" monochrome system that prioritizes legibility and institutional trust. The palette is built on a foundation of pure white (#ffffff) and soft gray (#ebf0f7) surfaces, punctuated by a primary brand blue (#1a56af) and deep midnight text (#152935). Typography is strictly Inter, utilizing a medium weight (500) for all display and interactive elements to maintain a technical, structured feel. Components favor generous 16px to 20px border radii for cards, while interactive controls use a tighter 8px or a full pill (100px) radius, creating a clear visual distinction between content containers and action triggers.

## Signature DNA
1. **Institutional Blue Anchors** (Primary blue #1a56af is used for critical actions and borders, while #002d61 provides high-contrast depth for footer and hero surfaces.)
2. **Medium-Weight Precision** (Headlines never exceed weight 500, avoiding heavy bolds in favor of a clean, "Inter" technical aesthetic across all scales from 12px to 48px.)
3. **Hybrid Geometry** (The system mixes sharp 0px layout edges with soft 16px-20px content cards and 100px pill-shaped badges/buttons.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{colors.canvas}` | `#ffffff` | Primary page background | 20 | 1 | `brand_page` |
| `{colors.surface-soft}` | `#ebf0f7` | Section dividers and secondary backgrounds | 6 | 1 | `--neutral--gray-5` |
| `{colors.surface-alt}` | `#f8f9fc` | Subtle background variation | 1 | 1 | `--background-grey` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{colors.primary}` | `#1a56af` | Primary CTA background and borders | 27 | 1 | `--primary--main` |
| `{colors.ink-midnight}` | `#152935` | Primary text and high-contrast overlays | 190 | 1 | `--neutral--gray-1` |
| `{colors.ink-subtle}` | `#5b6f7e` | Secondary body text | 28 | 1 | `--neutral--gray-2` |
| `{colors.primary-light}` | `#bbd7fb` | Secondary button backgrounds | 6 | 1 | `--primary--light` |
| `{colors.primary-darkest}` | `#002d61` | Dark mode surfaces (Footer/Hero) | 4 | 1 | `--primary--darkest` |
| `{colors.plum-accent}` | `#4d0198` | Decorative category labels | 4 | 1 | `--additional--plum-800` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Inter | 300, 400, 500 | Universal (Display, Body, UI) | Inter (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display}` | 48px | 58px | -1.056px | 500 | Hero headlines | `h2.white` |
| `{type.h3}` | 34px | 44px | -0.748px | 500 | Section titles | `h3.heading.h3` |
| `{type.h4}` | 24px | 32px | -0.456px | 500 | Sub-section heads | `h4` |
| `{type.h5}` | 20px | 27px | -0.34px | 500 | Card titles | `h5` |
| `{type.body}` | 16px | 24px | -0.176px | 400 | Default body text | `p.card-details` |
| `{type.body-medium}` | 16px | 27px | normal | 500 | Emphasized body | `strong` |
| `{type.ui-label}` | 14px | 24px | normal | 500 | Nav & Button labels | `div.nav-dropdown-link` |
| `{type.caption}` | 12px | 18px | 0.36px | 500 | Small badges/meta | `div.caption-small` |

### Principles
- **Weight Consistency:** Headlines and UI labels are locked to weight 500; weight 300 is reserved for navigation and metadata.
- **Negative Tracking on Display:** Letter spacing tightens significantly as size increases, reaching -1.056px at 48px.
- **Optical Body Sizing:** Standard body text (16px) uses a generous 1.5x line height (24px) for readability.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 22 |
| `{space.sm}` | 12px | 6 |
| `{space.md}` | 16px | 12 |
| `{space.lg}` | 24px | 36 |
| `{space.xl}` | 32px | 12 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Layout sections, sharp buttons | 228 occurrences |
| `{radius.sm}` | 8px | Standard UI buttons | Rounded Button component |
| `{radius.md}` | 16px | Content cards | Surface component |
| `{radius.lg}` | 20px | Feature cards | Card component |
| `{radius.pill}` | 100px | Badges and pill buttons | Card/Button components |

## Elevation
Table: | Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| Flat | none | All observed components | Component shadow: none |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** https://polymath.network
**Spec:** Background `{colors.primary}` (#1a56af) or `{colors.primary-light}` (#bbd7fb) / Text #ffffff or #002d61 / Border 1px / Radius 8px / Padding 12px 16px / Typography 14px 500
**States observed:** Default: captured | Hover: not captured

#### Pill Button
**Role:** Tertiary or Tag-like actions
**Pages observed:** https://polymath.network
**Spec:** Background transparent / Text `{colors.primary}` (#1a56af) / Border 1px solid `{colors.primary}` / Radius 100px / Padding 0px / Typography 14px 500
**States observed:** Default: captured

### Tier 2: Patterns

#### Content Card
**Role:** Feature highlights and blog posts
**Pages observed:** https://polymath.network
**Spec:** Background #ffffff / Text `{colors.ink-midnight}` (#152935) / Border 0px / Radius 16px / Padding 24px / Typography 16px 400
**States observed:** Default: captured

#### Status Badge
**Role:** Category labels (e.g., "Blog", "News")
**Pages observed:** https://polymath.network
**Spec:** Background `{colors.plum-accent}` (#f2e6ff) / Text #4d0198 / Border 0px / Radius 100px / Padding 2px 8px / Typography 12px 500
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Feature Surface
**Role:** Container for grouped feature lists
**Pages observed:** https://polymath.network
**Spec:** Background `{colors.surface-soft}` (#ebf0f7) / Text `{colors.ink-midnight}` (#152935) / Radius 100px / Padding 0px
**States observed:** Default: captured

#### Dark Section Container
**Role:** Hero and Footer backgrounds
**Pages observed:** https://polymath.network
**Spec:** Background `{colors.primary-darkest}` (#002d61) / Text #ffffff / Radius 0px / Padding 64px 0px
**States observed:** Default: captured

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1200px (approx) |
| Section padding | 64px - 96px |
| Card gap | 24px |

## Responsive
Table: | Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 16px. |

## Imagery & decoration
Polymath uses high-quality product screenshots and abstract blue-tinted photography. It avoids illustrative icons in favor of functional UI-based visuals.

## Do's
- Use `#152935` for all primary headings to ensure institutional contrast.
- Apply `{radius.md}` (16px) to all white content cards sitting on gray backgrounds.
- Keep Inter weight at 500 for all interactive labels.
- Use `{colors.surface-soft}` (#ebf0f7) for large alternating section backgrounds.
- Ensure buttons use an 8px radius unless they are explicitly category badges.

## Don'ts
- **Wrong:** Using `#4d0198` (Plum) as a primary action color. **Right:** Use `#1a56af`. **Reason:** Plum is a decorative category accent only.
- **Wrong:** Applying heavy drop shadows to cards. **Right:** Keep cards flat with 0px borders. **Reason:** The system relies on color blocking, not elevation.
- **Wrong:** Setting display headlines in Inter Bold (700). **Right:** Use Inter Medium (500). **Reason:** The brand DNA requires a lighter, technical weight.

## Similar brands
- IBM Carbon (for the blue/gray technical palette)
- Stripe (for the clean typography and card-based layout)
- Coinbase (for the institutional financial aesthetic)

## Quick start

### CSS Custom Properties
```css
:root {
  --polymath-primary: #1a56af;
  --polymath-midnight: #152935;
  --polymath-canvas: #ffffff;
  --polymath-gray-soft: #ebf0f7;
  --polymath-radius-card: 16px;
  --polymath-font-main: 'Inter', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #1a56af;
  --color-midnight: #152935;
  --color-canvas: #ffffff;
  --color-gray-soft: #ebf0f7;
  --radius-card: 16px;
  --font-inter: "Inter";
}
```

## Agent prompt examples
- "Create a feature card using Polymath.network styles: white background, 16px border radius, 24px padding, with an Inter 500 heading in #152935."
- "Generate a primary button using #1a56af background, 8px border radius, and 14px Inter Medium white text."
- "Design a section layout using #ebf0f7 background with 96px vertical padding and a centered H2 in #152935."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the CSS variable mapping.
- Success and Error semantic tokens were not present in the analyzed homepage evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://polymath.network | 1440px / 390px | 2026-06-06 |