# P3-group Design System

> High-contrast industrial precision meets electric lime accents on a foundation of deep midnight navy and pure white.

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

## TL;DR
P3-group utilizes a high-voltage "monochrome+" system where a deep navy foundation (`#00002d`) and pure white canvas (`#ffffff`) are punctuated by a signature electric lime (`#dbff55`). The typography is dominated by **Montserrat**, used at extreme weights (800) for display headers to create an industrial, authoritative presence. Layouts are characterized by large, saturated color blocks and high-contrast transitions, often using the primary lime for high-visibility CTAs and the navy for immersive content sections.

## Signature DNA
1. **The "Electric" CTA** (The use of `#dbff55` for primary buttons and icon accents against dark backgrounds to create maximum visual vibration and focus.)
2. **Heavyweight Industrial Type** (Montserrat at weight 800 for display and heading roles, often at sizes up to 100px, signaling engineering-grade stability.)
3. **High-Contrast Sectioning** (Hard-edge transitions between `#00002d` navy blocks and `#ffffff` white blocks, avoiding subtle gradients in favor of structural clarity.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background and text on dark surfaces | 52 | 1 | Computed Style |
| `{color.navy}` | `#00002d` | Section backgrounds, primary text, and footer surface | 91 | 0.8 | Computed Style |
| `{color.teal}` | `#005b4c` | Secondary brand accent, button backgrounds | 7 | 1 | `--dialog-button-accept-all-color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.lime}` | `#dbff55` | Primary CTA background, border accents, and highlights | 14 | 0.8 | Computed Style |
| `{color.blue}` | `#0000ff` | Decorative surface backgrounds and text | 15 | 0.8 | Computed Style |
| `{color.purple}` | `#6544fe` | Decorative surface background (About page) | 5 | 0.6 | Computed Style |
| `{color.coral}` | `#ff7f6a` | Decorative only — widget accent | 1 | 1 | `--widget-color` |

### Semantic
| Token | Hex | Role |
|-------|-----|------|
| `{color.error}` | `#cf2e2e` | Vivid red for critical alerts |
| `{color.link}` | `#2563eb` | Standard UI link color (blue) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Montserrat | 400, 600, 700, 800 | Display, Headings, UI | Montserrat (Google Fonts) | OFL |
| -apple-system | 400 | Body fallback, system UI | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-mega}` | 100px | 80px | normal | 800 | Counter numbers | `span.elementor-counter-number-prefix` |
| `{type.display-xl}` | 90px | 100px | normal | 800 | Hero headlines | `h3.premium-atext__headline` |
| `{type.display-lg}` | 70px | 80px | normal | 800 | Section headers | `h2.elementor-heading-title` |
| `{type.display-md}` | 50px | 60px | normal | 800 | Sub-section headers | `h2.elementor-heading-title` |
| `{type.heading-sm}` | 20px | 25px | normal | 800 | Small headings | `h1.elementor-heading-title` |
| `{type.body-lg}` | 18px | 25px | normal | 600 | Nav links / Bold body | `a`, `strong` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default running text | `li.elementor-icon-list-item` |
| `{type.button}` | 15px | 15px | normal | 600 | CTA Labels | `a.elementor-button` |
| `{type.caption}` | 12px | 25px | normal | 400 | Metadata / Labels | `li.elementor-icon-list-item` |

### Principles
1. **Display weight is fixed at 800.** All major headlines use the heaviest weight of Montserrat to maintain brand authority.
2. **Tight line-height for display.** Large headers use line-heights (0.8x to 1.1x) that are smaller than the font size to create compact, impactful text blocks.
3. **High-contrast legibility.** Text is strictly white on navy or navy on white/lime; no mid-tone gray text is used for primary content.

## Spacing
**Base unit:** 4px (inferred)
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 8px | 4 |
| `{space.sm}` | 11px | 7 |
| `{space.md}` | 15px | 6 |
| `{space.section}` | 114px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers, most cards | 146 occurrences |
| `{radius.input}` | 1px | Form fields and primary buttons | 7 occurrences |
| `{radius.panel}` | 50px | Rounded decorative panels | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All primary cards and sections | 100% of analyzed components |

## Components

### Tier 1: Foundational

#### Primary Button (Lime)
**Role:** Main call to action
**Pages observed:** https://p3-group.com
**Spec:** Background `#dbff55` / Text `#00002d` / Border `#dbff55` / Radius 1px / Padding 15px / Typography `{type.button}`
**States observed:** Default | Hover: captured (darker lime) | Focus: not captured

#### Ghost Button (Navy)
**Role:** Secondary action on light backgrounds
**Pages observed:** https://p3-group.com, https://p3-group.com/about
**Spec:** Background transparent / Text `#00002d` / Border 1px `#00002d` / Radius 1px / Typography `{type.button}`
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Update Card
**Role:** News and whitepaper listings
**Pages observed:** https://p3-group.com
**Spec:** Background `#ffffff` / Text `#00002d` / Border-top 2px `#00002d` / Radius 0px / Padding 20px
**States observed:** Default | Hover: captured

#### Counter Block
**Role:** Statistics display
**Pages observed:** https://p3-group.com/about
**Spec:** Background transparent / Text `#ffffff` / Typography `{type.display-mega}`
**States observed:** Default

### Tier 3: Surface-specific

#### Footer
**Role:** Global site navigation
**Pages observed:** https://p3-group.com, https://p3-group.com/about
**Spec:** Background `#00002d` / Text `#ffffff` / Typography `{type.body-md}` / Radius 0px
**States observed:** Default

#### Cookie Dialog
**Role:** Consent management
**Pages observed:** https://p3-group.com
**Spec:** Background `#ffffff` / Primary Button `#005b4c` / Text `#555555` / Radius 0px
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max content width | 1200px |
| Section padding (vertical) | 114px |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Headers scale to ~32px-40px; 1-column stack |
| Desktop | 1440px | Full 12-column grid; 100px display type |

## Imagery & decoration
- **Industrial Photography:** High-quality imagery of robotics, engineering, and professional environments.
- **Color Overlays:** Use of navy (`#00002d`) or blue (`#0000ff`) semi-transparent overlays on hero images.
- **Iconography:** Simple, thin-stroke icons often paired with the lime (`#dbff55`) accent.

## Do's
- Use Montserrat 800 for all primary headlines.
- Pair `#dbff55` buttons with `#00002d` backgrounds for maximum contrast.
- Maintain sharp 0px corners for all structural section containers.
- Use generous 114px vertical spacing between major content sections.
- Ensure all text on navy backgrounds is pure `#ffffff`.

## Don'ts
- **Wrong:** Using `#005b4c` (Teal) as the primary CTA color on the homepage. **Right:** Use `#dbff55` (Lime). **Reason:** Lime is the high-visibility brand signal; teal is reserved for secondary/utility actions like cookie dialogs.
- **Wrong:** Applying soft shadows to cards. **Right:** Use 1px borders or flat color changes. **Reason:** The brand DNA is flat and industrial.
- **Wrong:** Using Montserrat Light or Thin for body copy. **Right:** Use weight 400. **Reason:** Legibility and brand "weight" must be maintained.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --p3-navy: #00002d;
  --p3-lime: #dbff55;
  --p3-white: #ffffff;
  --p3-teal: #005b4c;
  --font-main: 'Montserrat', sans-serif;
}
```

## Known gaps
- Hover states for secondary navigation items were not fully captured in the automated run.
- Mobile-specific menu transition timings are missing from the evidence.

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