# Principledtechnologies Design System

> Corporate white canvas punctuated by high-contrast red callouts and ultra-light Source Sans Pro display type.

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

## TL;DR
Principledtechnologies utilizes a high-contrast monochrome foundation (#ffffff canvas, #212529 text) energized by a singular, aggressive accent red (#ff3333). The typographic system is built entirely on Source Sans Pro, distinguished by an exceptionally light signature weight (200) for hero headlines that creates an airy, professional atmosphere. Layouts are strictly structured with sharp-edged geometry (0px radii) and subtle depth provided by soft gray shadows (#999999). Navigation and interactive elements rely on a classic blue accent (#007bff) for utility, while brand-level calls-to-action utilize the signature red.

## Signature DNA
1. **The Ultra-Light Display** (Source Sans Pro at weight 200 for H1 headers, creating a technical yet sophisticated editorial feel. Observed on Homepage and About pages.)
2. **Aggressive Red Punctuation** (Use of #ff3333 for primary hero banners and footer bands to break the monochrome grid. Observed on Homepage.)
3. **Sharp-Edge Geometry** (A near-total rejection of rounded corners, using 0px radius for surfaces and buttons to signal precision. Observed across all analyzed pages.)

## 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.white}` | `#ffffff` | Page background, button text, surface base | 27 | 1.0 | `--white` |
| `{color.dark-gray}` | `#212529` | Primary body text | 17 | 0.8 | Computed |
| `{color.medium-gray}` | `#444444` | Secondary text, headings | 67 | 0.8 | Computed |
| `{color.light-gray}` | `#cccccc` | Borders, dividers, disabled surfaces | 7 | 0.6 | Computed |
| `{color.black}` | `#000000` | High-contrast text, input borders | 10 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary-blue}` | `#007bff` | Utility links, primary blue token | 4 | 1.0 | `--primary` |
| `{color.link-blue}` | `#0088cc` | Active navigation and body links | 65 | 0.8 | Computed |
| `{color.brand-red}` | `#ff3333` | Hero banners, footer background | 6 | 0.6 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Source Sans Pro | 200, 300, 400, 600 | Display, Headings, Body | Source Sans 3 (Google Fonts) | OFL |
| Helvetica Neue | 400 | UI Inputs, Fallback | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 40px | 40px | normal | 200 | Hero H1 | `h1` |
| `{type.heading-lg}` | 32px | 48px | normal | 400 | Section Intro | `p` |
| `{type.heading-sm}` | 21px | 6.4px | normal | 300 | Nav Links | `a` |
| `{type.body-lg}` | 19px | 23.04px | normal | 300 | Primary Body | `p` |
| `{type.subheading}` | 19px | 19.2px | normal | 400 | Feature Headings | `h5` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Navigation | `nav.navbar` |
| `{type.body-sm}` | 14px | 20px | normal | 400 | Search Input | `input#search` |

### Principles
1. **Weight Contrast:** Pair weight 200 display text with weight 400 body text for maximum hierarchy.
2. **Tight Display Leading:** Display sizes (40px) use 1:1 line-height for a compact, architectural look.
3. **Achromatic Hierarchy:** Use shades of gray (#212529 to #777777) to differentiate content before introducing color.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 12 |
| `{space.sm}` | 10px | 12 |
| `{space.md}` | 16px | 12 |
| `{space.lg}` | 22px | 35 |
| `{space.xl}` | 35px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Buttons, Cards, Banners | 205 occurrences |
| `{radius.sm}` | 2px | Form Inputs | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.subtle}` | `0 0 8px 0 rgb(153, 153, 153)` | Floating UI elements | Homepage |

## Components

### Tier 1: Foundational

#### Surface
**Role:** Standard content container
**Pages observed:** Homepage, About
**Spec:** Background: #ffffff | Text: #212529 | Border: 1px #cccccc | Radius: 0px | Padding: 2px
**States observed:** Default: captured | Hover: not captured

#### Text Input
**Role:** Global search and form fields
**Pages observed:** Homepage
**Spec:** Background: #ffffff | Text: #000000 | Border: 1px #000000 | Radius: 2px | Padding: 1px 5px | Typography: 16px
**States observed:** Default: captured | Focus: captured

### Tier 2: Patterns

#### Hero Banner
**Role:** Primary brand callout
**Pages observed:** Homepage
**Spec:** Background: #ff3333 | Text: #ffffff | Radius: 0px | Padding: 0px 35px | Typography: 40px (Weight 200)
**States observed:** Default: captured

#### Navigation Bar
**Role:** Global site header
**Pages observed:** Homepage, About
**Spec:** Background: #ffffff | Text: #444444 | Typography: 16px | Height: 64px (inferred)
**States observed:** Default: captured | Hover: #0088cc

### Tier 3: Surface-specific

#### Footer Band
**Role:** Global site footer and social links
**Pages observed:** Homepage, About
**Spec:** Background: #ff3333 | Text: #ffffff | Radius: 0px | Typography: 16px
**States observed:** Default: captured

#### Cookie Notice
**Role:** Legal compliance overlay
**Pages observed:** Homepage, About
**Spec:** Background: #cccccc | Text: #212529 | Radius: 0px | Padding: 10px
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1140px (inferred from standard containers) |
| Section Gap | 32px-48px |
| Grid | 12-column bootstrap-style |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Hero text scales to 32px |
| Desktop | 1440px | Horizontal navigation; multi-column footer |

## Imagery & decoration
The brand uses high-quality photography of professional environments and people. Decorative elements are strictly geometric, using red polygons and sharp-edged overlays. It avoids rounded icons, soft gradients, and illustrative styles.

## Do's
- Use **Source Sans Pro 200** for all primary page headlines.
- Keep all button and card corners at **0px radius**.
- Use **#ff3333** sparingly for high-impact brand moments only.
- Maintain a white background for 90% of the page surface area.
- Use **#0088cc** for all inline text links.

## Don'ts
- **Wrong:** Using #007bff for a hero banner background. **Right:** Use #ff3333. **Reason:** Red is the brand's primary "voltage" color; blue is for utility.
- **Wrong:** Applying a 4px border radius to buttons. **Right:** Use 0px. **Reason:** The brand identity is built on sharp, precise geometry.
- **Wrong:** Using bold weights (700+) for display headers. **Right:** Use weight 200. **Reason:** The signature look relies on the elegance of light-weight type.
- Do not use gradients for surface backgrounds.
- Do not use #ff3333 for body text.

## Similar brands
- IBM (Type-first, monochrome with specific accent)
- Hewlett Packard Enterprise (Geometric, high-contrast)
- Reuters (Editorial, light type weights, red accents)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-brand-red: #ff3333;
  --color-primary-blue: #007bff;
  --color-text-main: #212529;
  --color-text-muted: #444444;
  --font-family-display: "Source Sans Pro", sans-serif;
  --weight-display: 200;
  --radius-none: 0px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-brand-red: #ff3333;
  --color-primary-blue: #007bff;
  --font-display: "Source Sans Pro";
  --font-weight-signature: 200;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Create a hero section with a white background, a sharp-edged red banner (#ff3333) containing text in Source Sans Pro weight 200."
- "Design a primary button with a 0px border radius, #ffffff background, and 1px #cccccc border."
- "Generate a typography stack using Source Sans Pro, setting the H1 to 40px and weight 200."

## Known gaps
- Hover and active states for the red hero banners were not captured.
- Specific mobile breakpoint values (e.g., 768px) were not explicitly declared in tokens.

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