# Packiot Design System

> High-contrast industrial precision meeting warm mechanical amber.

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

## TL;DR
Packiot utilizes a high-contrast industrial aesthetic, grounding a pure white canvas (`#ffffff`) with deep slate-blues and absolute black (`#000000`) for structural elements. The primary "voltage" of the brand is a vibrant mechanical amber (`#f9a01b` / `#ffa61a`), used exclusively for high-priority calls to action and critical highlights. Typography is clean and functional, prioritizing legibility in manufacturing contexts. The system relies on heavy section banding and pill-shaped geometry to organize complex industrial data narratives.

## Signature DNA
1. **The Amber Pulse** (A specific mechanical orange `#f9a01b` used for primary CTAs and "efficiency" highlights, cutting through the otherwise monochrome and slate-blue environment.)
2. **Industrial Banding** (Deep slate-blue `#32567d` and dark charcoal `#555555` full-width bands used to compartmentalize the "4.0 Journey" and "Let's Talk" sections.)
3. **Pill-Form Hierarchy** (Rounded pill geometry for buttons and status indicators, contrasting against the sharp 90-degree edges of content cards.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-canvas` | `#ffffff` | Primary page background | High | 100% | Rendered |
| `--color-ink` | `#000000` | Primary headings and field labels | High | 100% | Token |
| `--color-slate-deep` | `#32567d` | Section backgrounds (CTA bands) | Medium | 90% | Rendered |
| `--color-charcoal` | `#555555` | Footer and contact section background | Medium | 90% | Rendered |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--color-amber` | `#f9a01b` | Primary CTA background | High | 100% | Rendered |
| `--color-ocean` | `#066aab` | Secondary buttons (Newsletter) | Low | 100% | Token |
| `--color-mint` | `#1abc9c` | Cookie consent / Success accent | Low | 90% | Rendered |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--wpforms-label-error-color` | `#d63637` | Form validation errors | Low | 100% | Token |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Sans-Serif (System) | 400, 600, 700 | All copy and display | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{typography.hero}` | 48px | 1.1 | -0.02em | 700 | Main Hero H1 | `h1` |
| `{typography.h2}` | 32px | 1.2 | 0 | 700 | Section Headers | `h2` |
| `{typography.h3}` | 24px | 1.3 | 0 | 700 | Card Titles | `h3` |
| `{typography.body-lg}` | 18px | 1.5 | 0 | 400 | Intro Paragraphs | `p.large` |
| `{typography.body}` | 16px | 1.6 | 0 | 400 | Standard Body | `p` |
| `{typography.label}` | 14px | 1.0 | 0.05em | 600 | Form Labels | `label` |
| `{typography.button}` | 15px | 1.0 | 0 | 700 | CTA Text | `button` |
| `{typography.footer}` | 13px | 1.4 | 0 | 400 | Footer Links | `footer a` |

### Principles
1. **Uppercase for Action:** Primary CTAs use all-caps to increase visual weight.
2. **High Contrast Ratios:** Black text on white or white text on deep slate-blue is strictly maintained.
3. **Tight Display Leading:** Large headlines use reduced line-height (1.1) to maintain structural density.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{spacing.sm}` | 12px | Internal card padding |
| `{spacing.md}` | 24px | Element grouping |
| `{spacing.lg}` | 48px | Section vertical padding |
| `{spacing.xl}` | 80px | Hero and major section breaks |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Content cards, section bands | Screenshots |
| `{radius.pill}` | 9999px | Primary CTAs, status pills | Screenshots |
| `{radius.sm}` | 8px | Form inputs | Rendered |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elevation.flat}` | none | Standard sections | Default |
| `{elevation.card}` | `0 10px 30px rgba(0,0,0,0.05)` | Solution cards | Rendered |

## Components

### Tier 1: Foundational

#### Primary Button (Amber)
**Role:** Main conversion point (Schedule Diagnosis)
**Pages observed:** https://packiot.com
**Spec:** Background `#f9a01b` | Text `#ffffff` | Radius `9999px` | Padding `15px 35px` | Typography `15px/700/Uppercase`
**States observed:** Default | Hover: Not captured

#### Form Input
**Role:** Lead generation fields
**Pages observed:** https://packiot.com
**Spec:** Background `#ffffff` | Border `1px solid #000000` | Radius `9999px` | Padding `12px 20px`
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Solution Card
**Role:** Displaying service offerings (MES, Analytics)
**Pages observed:** https://packiot.com
**Spec:** Background `#ffffff` | Border `1px solid #e5e5e5` | Radius `0px` | Shadow `subtle`
**States observed:** Default

#### Section Band (Slate)
**Role:** High-impact messaging transition
**Pages observed:** https://packiot.com
**Spec:** Background `#32567d` | Text `#ffffff` | Padding `80px 0`
**States observed:** Default

### Tier 3: Surface-specific

#### Efficiency Highlight
**Role:** Emphasizing key metrics in prose
**Pages observed:** https://packiot.com
**Spec:** Text `#f9a01b` | Weight `700` | Decoration `Underline (Amber)`
**States observed:** Default

#### Footer Newsletter Bar
**Role:** Secondary conversion
**Pages observed:** https://packiot.com
**Spec:** Background `#066aab` | Text `#ffffff` | Radius `0px`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px |
| Grid | 12-column desktop |
| Section Gap | 80px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; 3-up cards stack vertically. |
| Desktop | 1440px | Full horizontal navigation; side-by-side hero split. |

## Imagery & decoration
- **Industrial Photography:** High-key, bright factory environments with human subjects using tablets.
- **Iconography:** Thin-stroke white icons on slate-blue circular backgrounds.
- **Logos:** Grayscale client logo grid to maintain brand neutrality.

## Do's
- Use `#f9a01b` exclusively for the most important action on the screen.
- Maintain 80px vertical padding between major content bands.
- Use pill-shaped inputs for all lead generation forms.
- Ensure all text on slate-blue backgrounds is pure white `#ffffff`.
- Keep solution cards perfectly square-edged (`radius: 0`).

## Don'ts
- **Wrong:** Using `#066aab` for the main hero CTA. **Right:** Use `#f9a01b`. **Reason:** Amber is the primary conversion signal; blue is for secondary footer actions.
- Do not use drop shadows on full-width section bands.
- Do not use rounded corners on the "Solution Cards."
- Do not use the Amber color for body text, only for specific "Efficiency" highlights.

## Similar brands
- Rockwell Automation
- Siemens Digital Industries
- Honeywell Connected Plant

## Quick start

```css
/* CSS Custom Properties */
:root {
  --packiot-amber: #f9a01b;
  --packiot-slate: #32567d;
  --packiot-charcoal: #555555;
  --packiot-black: #000000;
  --packiot-white: #ffffff;
  --radius-pill: 9999px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using the Packiot Amber `#f9a01b` with a pill-shaped border radius and white uppercase text."
- "Create a contact form section with a charcoal background `#555555` and white pill-shaped input fields."
- "Design a feature card with a 1px light gray border, zero border radius, and a centered slate-blue icon."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Specific font family names were not declared in tokens; system sans-serif is the fallback.

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