# Presteligence Design System

> High-contrast industrial yellow and deep obsidian anchored by heavy Roboto display weights.

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

## TL;DR
Presteligence utilizes a high-visibility "caution" palette, pairing a vibrant primary yellow (`#fee000`) with deep charcoal (`#212533`) and absolute black (`#000000`). The system is built on a heavy typographic foundation using **Roboto**, specifically leveraging the 900 weight for massive 72px display headlines. Components favor sharp or slightly softened geometry (3px to 5px radii) for functional elements, while primary calls-to-action use a distinct pill-shaped 30px radius. The layout is structured around generous vertical rhythm and high-contrast sectioning, alternating between stark white and dark-mode surfaces.

## Signature DNA
1. **The Caution Primary** (The use of `#fee000` yellow as both a brand identifier and a functional interaction color across buttons, icons, and borders on both light and dark canvases.)
2. **Heavyweight Display** (Massive 72px Roboto headlines at weight 900 with tight -1.8px letter spacing, creating an authoritative, industrial presence.)
3. **High-Contrast Sectioning** (Abrupt transitions between white (`#ffffff`) and dark (`#212533`) backgrounds to define major content shifts.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background and text on dark surfaces | 191 | 1.0 | `--pres-main-bg-light` |
| `{color.ink}` | `#000000` | Primary text and dark surface backgrounds | 112 | 1.0 | `--pres-main-fg-color` |
| `{color.ink.soft}` | `#333333` | Secondary text and button labels | 11 | 1.0 | `--pres-soft-black` |
| `{color.neutral.muted}` | `#666666` | Muted body text and upload UI | 7 | 1.0 | `--zsiqf-defualt-upload-bg` |
| `{color.neutral.light}` | `#efefef` | Subtle section backgrounds | 3 | 1.0 | `--pres-light-gray` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#fee000` | Primary brand color, CTA background, icon accents | 40 | 1.0 | `--pres-yellow` |
| `{color.primary.active}` | `#f9d000` | Hover/Active states for buttons and links | 14 | 0.8 | Computed style |
| `{color.accent.navy}` | `#212533` | Dark section backgrounds (Advantage section) | 3 | 0.6 | Computed style |
| `{color.accent.cream}` | `#f4f0df` | Decorative text on dark cards | 4 | 0.6 | Computed style |

### Semantic
| Token | Hex | Role | Source |
|---|---|---|---|
| `{color.error}` | `#dd1c1c` | Error icons and thumbnails | `--zsiqf-media-thumbnail-icon-bg` |
| `{color.link}` | `#0000ee` | Standard inline text links | Computed style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Roboto | 400, 700, 900 | Headlines, UI, Navigation | Roboto (Google Fonts) | Apache 2.0 |
| Helvetica Neue | 400 | Cookie banners, secondary UI | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.lg}` | 72px | normal | -1.8px | 900 | Hero headlines | `div.largeHeading` |
| `{type.display.md}` | 40px | 38px | normal | 700 | Solution navigation | `div.solNavHeading` |
| `{type.h1}` | 32px | 96px | normal | 700 | Footer headers | `div.footerHeader` |
| `{type.h2}` | 32px | normal | -0.8px | 900 | Section sub-headers | `div.smallHeading` |
| `{type.h3}` | 24px | 30px | normal | 900 | Feature titles | `a` |
| `{type.nav}` | 18px | normal | normal | 900 | Main navigation items | `a.mainNavItem` |
| `{type.body.lg}` | 18px | 40px | normal | 700 | Section labels | `div.sectionLabel` |
| `{type.body}` | 16px | 24px | normal | 400 | Standard paragraph text | `p` |
| `{type.body.sm}` | 14px | 40px | normal | 400 | Dropdown menu items | `a#sectionItem_27` |
| `{type.caption}` | 10px | 30px | normal | 400 | Video player time | `div.vjs-current-time-display` |

### Principles
1. **Tight Display Tracking:** Headlines above 32px use negative letter-spacing (-0.8px to -1.8px) to maintain visual density.
2. **Extreme Weight Contrast:** Heavy 900 weight is used for navigation and display to contrast against 400 weight body copy.
3. **Vertical Breathing:** Large line-heights (up to 96px) are used on headers to create section separation.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 80 |
| `{space.sm}` | 10px | 85 |
| `{space.md}` | 15px | 44 |
| `{space.lg}` | 20px | 24 |
| `{space.xl}` | 30px | 14 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Section containers, main cards | 269 occurrences |
| `{radius.sm}` | 3px | Form inputs, small surfaces | `Text Input` |
| `{radius.md}` | 5px | Feature cards, secondary buttons | `Card` |
| `{radius.lg}` | 20px | Floating overlay cards | `Card (observed once)` |
| `{radius.pill}` | 30px | Primary CTA buttons | `Rounded Button` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Default state for most cards/buttons | Standard component spec |
| `{shadow.card}` | `rgba(0, 0, 0, 0.07) -5px 5px 10px 0px` | Dark mode feature cards | `Card` component |
| `{shadow.focus}` | `rgb(0, 0, 0) 0px 0px 0px 4px` | High-visibility button focus | `Rounded Button` |

## Components

### Tier 1: Foundational

#### Primary CTA (Pill)
**Role:** Main conversion actions (Explore, Request Demo)
**Pages observed:** https://presteligence.com, https://presteligence.com/about
**Spec:** Background `{color.primary}` (#fee000) / Text `{color.ink.soft}` (#333333) / Radius `{radius.pill}` (30px) / Padding 0px 20px / Typography `{type.body}` (16px/700)
**States observed:** Default | Active: Captured (uses #f9d000)

#### Text Input
**Role:** Search and form entry
**Pages observed:** https://presteligence.com, https://presteligence.com/about
**Spec:** Background `{color.canvas}` (#ffffff) / Border 1px `#aaaaaa` / Radius `{radius.sm}` (3px) / Padding 0px 35px 0px 10px
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Feature Card (Dark)
**Role:** Highlighting specific value propositions
**Pages observed:** https://presteligence.com, https://presteligence.com/about
**Spec:** Background `#050505` / Text `{color.accent.cream}` (#f4f0df) / Radius `{radius.md}` (5px) / Shadow `{shadow.card}`
**States observed:** Default

#### Solution Button (Square)
**Role:** Secondary actions within feature blocks
**Pages observed:** https://presteligence.com, https://presteligence.com/about
**Spec:** Background `{color.primary.active}` (#f9d000) / Text `#050505` / Border 2px `#f9d000` / Radius `{radius.md}` (5px)
**States observed:** Default

### Tier 3: Surface-specific

#### Dark Section Surface
**Role:** High-contrast background for "Advantage" section
**Pages observed:** https://presteligence.com, https://presteligence.com/about
**Spec:** Background `{color.accent.navy}` (#212533) / Text `{color.canvas}` (#ffffff) / Radius `{radius.sharp}` (0px)
**States observed:** Default

#### Cookie Consent Banner
**Role:** Legal compliance overlay
**Pages observed:** https://presteligence.com
**Spec:** Background `rgba(0, 0, 0, 0.9)` / Text `{color.canvas}` (#ffffff) / Radius `{radius.sharp}` (0px) / Padding 50px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max content width | ~1200px |
| Section Padding | 50px to 100px vertical |
| Grid | 4-column (Advantage), 3-column (News) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Product list becomes accordion; Padding reduces to 15px. |

## Do's
- Use `#fee000` for all primary interaction points.
- Set hero headlines in Roboto 900 with negative tracking.
- Maintain sharp corners (`0px`) for major layout containers.
- Use absolute black (`#000000`) for footer and dark-mode headers.
- Ensure 30px radius is reserved specifically for primary "Pill" buttons.

## Don'ts
- **Wrong:** Using `#007aff` (Swiper theme) for brand CTAs. **Right:** Use `#fee000`. **Reason:** Blue is a third-party library default, not a Presteligence brand color.
- **Wrong:** Applying soft shadows to all cards. **Right:** Keep most surfaces flat. **Reason:** The brand relies on flat color blocks for its industrial aesthetic.
- Do not use weights lighter than 400 for body text.
- Do not use yellow text on a white background (contrast ratio 1.3:1).

## Similar brands
- Caterpillar (CAT)
- DeWalt
- Nikon
- Stanley Tools

## Quick start

```css
/* CSS Custom Properties */
:root {
  --pres-yellow: #fee000;
  --pres-yellow-active: #f9d000;
  --pres-black: #000000;
  --pres-navy: #212533;
  --pres-white: #ffffff;
  --font-display: 'Roboto', sans-serif;
}
```

```json
/* Style Dictionary */
{
  "color": {
    "primary": { "value": "#fee000" },
    "surface": {
      "dark": { "value": "#212533" },
      "ink": { "value": "#000000" }
    }
  }
}
```

## Agent prompt examples
- "Generate a primary button using the Presteligence pill style: #fee000 background, #333333 text, and a 30px border radius."
- "Create a hero section with a 72px Roboto 900 headline, -1.8px letter spacing, on a #ffffff background."
- "Design a feature card for the dark surface: #050505 background, 5px radius, and #f4f0df text color."

## Known gaps
- Hover states for secondary navigation items were not explicitly captured in the token set.
- Precise grid gutter values are inferred from rendered spacing rather than declared tokens.
- Success and Warning semantic colors (beyond Error red) were not present in the analyzed pages.

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