# Portonics Design System

> High-contrast monochrome precision anchored by deep forest accents and classical serif emphasis.

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

## TL;DR
Portonics utilizes a "monochrome plus one" strategy, where a stark white canvas (#ffffff) and neutral grays are punctuated by a singular deep forest green (#13362d). The system relies on a sophisticated typographic pairing: **Playfair Display** for high-impact italicized keywords and **Helvetica Neue** for structural clarity. Buttons are either high-contrast dark pills or ghost-style outlines with significant 12px to 24px corner radii. The visual rhythm is defined by generous 64px vertical spacing and a strict 2px border weight on primary containers.

## Signature DNA
1. **The "Impact" Italic** (Playfair Display 700 is used exclusively for the final word of headlines, e.g., "Complexity into *Clarity*", creating a high-end consultancy feel. Observed on https://portonics.com hero and section headers.)
2. **Forest Deep Accents** (The primary brand color #13362d is reserved for text emphasis and primary button backgrounds, providing a professional alternative to pure black. Observed in `--colors--primary--800`.)
3. **Softened Geometry** (Despite the technical nature of the brand, UI elements use a 24px radius for cards and 12px for buttons, balancing precision with accessibility. Observed in component `Card` and `Rounded Button`.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--color--b-w--white` | `#ffffff` | Page background, primary surface | 228 | 1 | `css_variable` |
| `--colors--neutral--700` | `#231e1f` | Primary body text (Achromatic) | 29 | 1 | `computed_style` |
| `--colors--neutral--200` | `#d1d0d0` | Default borders and dividers | 196 | 1 | `css_variable` |
| `--colors--neutral--100` | `#f4f4f4` | Secondary surface, button backgrounds | 15 | 1 | `css_variable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--colors--primary--800` | `#13362d` | Brand primary text, deep emphasis | 253 | 1 | `css_variable` |
| `--colors--neutral--600` | `#0f172a` | High-contrast UI text | 360 | 1 | `css_variable` |
| `--colors--primary--600-p` | `#1f594b` | Interactive borders, button states | 3 | 1 | `css_variable` |
| `--colors--secondary--400` | `#84b130` | Decorative only (lime accent) | 1 | 1 | `decorative_only` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Playfair Display | 700 | Display (Italic emphasis) | Playfair Display (Google) | OFL |
| Helvetica Neue Bold | 700 | Primary Headings | Inter Bold | Proprietary |
| Helvetica Neue Medium | 500 | Subheadings, Buttons | Inter Medium | Proprietary |
| Helvetica neue normal | 400, 500 | Body, Navigation | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{display.xl}` | 64px | 73.6px | normal | 700 | Hero H1 | `h1.text-headingsh-1-2` |
| `{display.italic}` | 64px | 64px | normal | 700 | Hero Emphasis | `span.text-headings-play-7` |
| `{display.lg}` | 48px | 57.6px | normal | 700 | Section Header | `h3.main-heading-3` |
| `{heading.md}` | 32px | 38.4px | normal | 500 | Sub-section | `h5.text-headingsh-5` |
| `{heading.sm}` | 24px | 28.8px | normal | 500 | Card Title | `p.text-headingsh-6-3` |
| `{body.lg}` | 20px | 30px | normal | 400 | Lead Text | `a.solution-link` |
| `{body.md}` | 18px | 25.2px | normal | 400 | Default Body | `p.text-bodyb-3` |
| `{button}` | 16px | 24px | normal | 500 | CTA Label | `p.button-text` |
| `{caption}` | 14px | 24px | normal | 500 | Small Labels | `p.text-bodyb-4-med` |

### Principles
1. **The "Final Word" Rule:** Headlines often end with a single word in Playfair Display Italic to signal brand personality.
2. **Tight Display Leading:** Large display type (64px) uses a 1.15x line-height ratio, while body text (18px) uses a more generous 1.4x ratio.
3. **Achromatic Hierarchy:** Use #0f172a for structural text and #13362d only for brand-aligned emphasis.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 12px | 197 |
| `{space.sm}` | 14px | 184 |
| `{space.md}` | 32px | 195 |
| `{space.lg}` | 64px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sm}` | 12px | Buttons, Small Cards | `Rounded Button` |
| `{radius.md}` | 16px | Feature Cards | `Card (16px)` |
| `{radius.lg}` | 24px | Primary Content Cards | `Card (24px)` |
| `{radius.pill}` | 999px | Secondary Pill Buttons | `Pill Button` |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.soft}` | `rgba(18, 53, 44, 0.1) 0px 8px 16px 0px` | Floating CTAs | `Rounded Button` |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Action
**Pages observed:** 1
**Spec:** Background: `#1f594b` (alpha 0) / Text: `#ffffff` / Radius: `12px` / Padding: `12px 24px` / Shadow: `{shadow.soft}`
**States observed:** Default | Hover: captured | Active: not captured

#### Pill Button
**Role:** Secondary Navigation / Filter
**Pages observed:** 1
**Spec:** Background: `#f4f4f4` / Text: `#0000ee` / Radius: `999px` / Padding: `4px`
**States observed:** Default | Hover: not captured

### Tier 2: Patterns

#### Content Card
**Role:** Service and Case Study display
**Pages observed:** 1
**Spec:** Background: `#ffffff` / Text: `#0f172a` / Border: `2px solid #d1d0d0` / Radius: `24px` / Padding: `14px 32px 12px`
**States observed:** Default | Hover: captured

#### Feature Card (Gray)
**Role:** De-emphasized content blocks
**Pages observed:** 1
**Spec:** Background: `#f4f4f4` / Radius: `16px` / Padding: `24px 24px 32px`
**States observed:** Default

### Tier 3: Surface-specific

#### Navigation Link
**Role:** Top-level site navigation
**Pages observed:** 1
**Spec:** Typography: `Helvetica neue 18px/400` / Text: `#0f172a` / Padding: `0px`
**States observed:** Default | Hover: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px |
| Section Gutter | 64px |
| Card Grid Gap | 32px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding-inline reduces to 16px |
| Desktop | 1440px | Standard 12-column alignment |

## Do's
- Use **Playfair Display Italic** for exactly one word in a headline to create "Clarity".
- Apply **24px radius** to primary white cards with a **2px gray border** (#d1d0d0).
- Use **#13362d** for text that requires brand authority.
- Maintain **64px vertical spacing** between major content sections.
- Use **12px radius** for primary buttons to maintain a "soft-tech" feel.

## Don'ts
- **Wrong:** Using pure black (#000000) for body text. **Right:** Use #231e1f. **Reason:** Maintains the softer monochrome profile.
- **Wrong:** Using sharp 0px corners on cards. **Right:** Use 16px or 24px. **Reason:** Brand identity is built on softened geometry.
- **Wrong:** Mixing multiple serif fonts. **Right:** Only use Playfair Display for emphasis.
- **Wrong:** Using sub-brand colors (like the lime #84b130) for primary UI actions. **Right:** Use #13362d or #1f594b.

## Similar brands
- McKinsey & Company (Typographic authority)
- IDEO (Design consultancy layout)
- Stripe (Softened technical geometry)

## Quick start

```css
/* CSS Variables */
:root {
  --portonics-white: #ffffff;
  --portonics-forest: #13362d;
  --portonics-neutral-700: #231e1f;
  --portonics-gray-200: #d1d0d0;
  --portonics-radius-card: 24px;
  --portonics-shadow-soft: rgba(18, 53, 44, 0.1) 0px 8px 16px 0px;
}
```

## Agent prompt examples
- "Generate a service card using a 24px border radius, a 2px border in #d1d0d0, and a headline where the last word is italicized Playfair Display."
- "Create a primary button with a 12px radius, #13362d background, and 18px Helvetica Neue Medium text."
- "Design a hero section with a #ffffff background and 64px Helvetica Neue Bold text, using #13362d for the primary CTA."

## Known gaps
- Hover state transitions for the primary forest green buttons were not explicitly captured in the token set.
- Error and Success semantic states were not present on the analyzed landing pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://portonics.com | 1440x900 | 2026-06-06 |