# Clearview-intelligence Design System

> High-contrast infrastructure aesthetic pairing deep royal purple with safety-vest yellow and structured slab typography.

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

## TL;DR
Clearview Intelligence utilizes a high-visibility palette rooted in a "Theme Purple" (#734580) and "Theme Yellow" (#fedb00). The system is built on a foundation of pure white (#ffffff) and near-black (#080808) surfaces, often using large-scale purple blocks for contact and footer sections. Typography is strictly divided between **Roboto Slab** for authoritative, structured headings and **Roboto** for clean, functional body text. Components are characterized by sharp 0px corners, with the exception of specific 12px rounded controls, creating a technical and industrial feel.

## Signature DNA
1. **The Safety Contrast** (The pairing of #734580 purple and #fedb00 yellow is used for primary CTAs and information cards, mimicking industrial safety signage. Observed on Homepage and About pages.)
2. **Slab-Serif Authority** (Roboto Slab is used for all display and heading levels up to 62px, providing a grounded, engineering-led aesthetic. Observed across all analyzed pages.)
3. **Monolithic Color Blocking** (Large sections of the page are flooded with #61326e or #734580 to denote transitions to interactive or contact areas. Observed in the "Get in touch" and Footer sections.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Primary canvas, text on dark, borders | 226 | 1 | `css_variable:--white` |
| `{colors.black}` | `#000000` | Primary text, button text | 176 | 1 | `css_variable:--black` |
| `{colors.theme-black}` | `#080808` | Secondary text, dark surface background | 14 | 1 | `css_variable:--theme-black` |
| `{colors.light-grey}` | `#f0f0f0` | Default 1px borders | 8 | 1 | `css_variable:--theme-light-grey` |
| `{colors.pale-grey}` | `#f9f9f9` | Subtle section backgrounds | 1 | 1 | `css_variable:--theme-pale-grey` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.theme-purple}` | `#734580` | Primary brand color, surface backgrounds | 6 | 1 | `css_variable:--theme-purple` |
| `{colors.theme-yellow}` | `#fedb00` | Primary CTA background, card accents | 6 | 1 | `css_variable:--theme-yellow` |
| `{colors.dark-purple}` | `#61326e` | Footer background, deep section headers | 3 | 1 | `css_variable:--theme-dark-purple` |
| `{colors.mid-purple}` | `#552264` | Decorative only | 1 | 1 | `css_variable:--theme-mid-purple` |
| `{colors.signal-blue}` | `#0d6efd` | Inline text links | 26 | 0.8 | `computed_style` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Roboto Slab | 300, 400, 500, 600 | All headings and display copy | N/A (Google Font) | Apache 2.0 |
| Roboto | 300, 400, 500, 600 | Body text, navigation, and labels | N/A (Google Font) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 62px | 65.016px | -1.44px | 500 | Hero display | `h1.wp-block-heading` |
| `{type.h2}` | 38px | 44.16px | -0.64px | 500 | Section heads | `h2.wp-block-heading` |
| `{type.h4}` | 25px | 30.45px | normal | 600 | Card titles | `h4` |
| `{type.intro}` | 22px | 29.12px | normal | 500 | Lead paragraphs | `p.is-style-intro-style` |
| `{type.h5}` | 20px | 25.37px | normal | 400 | Minor headings | `h5` |
| `{type.body-lg}` | 19px | 27.84px | normal | 300 | Large body text | `p.is-style-large` |
| `{type.body}` | 18px | 26.4px | normal | 300 | Default running text | `li#menu-item-4699` |
| `{type.body-sm}` | 14px | 21px | normal | 300 | Small body/Footer | `p.font-x-small` |
| `{type.caption}` | 12px | 16.32px | normal | 300 | Captions/Synopsis | `p.static-synopsis` |

### Principles
1. **Slab for Structure:** Use Roboto Slab for any text that acts as a structural anchor (headings, card titles, intro text).
2. **Light Weight Body:** Running body text defaults to weight 300 for a modern, airy feel against heavy headings.
3. **Negative Display Tracking:** Large display headings (62px) must use -1.44px letter spacing to maintain visual density.

## Spacing
**Base unit:** 4px (inferred from common multiples)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 12 |
| `{space.sm}` | 12px | 33 |
| `{space.md}` | 16px | 87 |
| `{space.lg}` | 24px | 24 |
| `{space.section}` | 80px | 4 |
| `{space.section-lg}` | 96px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Default for cards, buttons, and inputs | `Surface`, `Text Input` |
| `{radius.md}` | 12px | Specific interactive cards | `Card` (observed once) |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.deep}` | `rgba(0, 0, 0, 0.16) 0px 4px 54px 0px` | Floating cards/Modals | `Surface` (8 occurrences) |
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.08) 0px 2px 8px 0px` | Navigation bar | `Navigation` (2 occurrences) |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global site header
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` | Text: `#212529` | Radius: `0px` | Shadow: `{shadow.subtle}`
**States observed:** Default | Hover: captured

#### Text Input
**Role:** Form fields in contact sections
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` | Border: `1px #f0f0f0` | Radius: `0px` | Padding: `0px 8px`
**States observed:** Default | Focus: not captured

### Tier 2: Patterns

#### Primary Button (Yellow)
**Role:** Main call to action
**Pages observed:** Homepage, About
**Spec:** Background: `#fedb00` | Text: `#000000` | Typography: `Roboto 500 16px` | Radius: `0px`
**States observed:** Default | Hover: captured

#### Secondary Button (Purple)
**Role:** Secondary actions/Form submission
**Pages observed:** Homepage
**Spec:** Background: `#734580` | Text: `#ffffff` | Radius: `0px` | Padding: `0px 16px`
**States observed:** Default | Hover: captured

### Tier 3: Surface-specific

#### Feature Card
**Role:** Service and product highlights
**Pages observed:** Homepage
**Spec:** Background: `#fedb00` | Text: `#000000` | Radius: `0px` | Typography: `Roboto Slab 600`
**States observed:** Default | Hover: captured

#### Footer
**Role:** Global site footer
**Pages observed:** Homepage, About
**Spec:** Background: `#61326e` | Text: `#ffffff` | Padding: `80px 12px 96px`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding | 80px - 96px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; padding-inline reduced to 12px |
| Desktop | 1440px | Multi-column grid (3-up feature cards) |

## Imagery & decoration
Clearview uses high-contrast, full-bleed photography of infrastructure (highways, traffic systems) often overlaid with purple gradients. Decorative "ghost type" (large, low-opacity Roboto Slab words like "MISSION" or "VISION") is used as a background layer behind content.

## Do's
- Use **Roboto Slab** for all headings to maintain authority.
- Apply **#fedb00** yellow for primary "More details" or "Download" actions.
- Use **0px border-radius** for all standard UI components.
- Ensure text on **#734580** surfaces is always **#ffffff**.
- Maintain **96px vertical spacing** between major homepage sections.

## Don'ts
- **Wrong:** Using #0d6efd (Signal Blue) for primary buttons. **Right:** Use #fedb00. **Reason:** Blue is reserved for inline text links only.
- **Wrong:** Applying rounded corners to form inputs. **Right:** Keep inputs at 0px radius.
- **Wrong:** Using Roboto (Sans) for H1 or H2 headings. **Right:** Always use Roboto Slab.
- **Wrong:** Placing #000000 text on a #734580 background. **Reason:** Contrast fails accessibility standards.

## Similar brands
- Caterpillar (CAT)
- Network Rail
- 3M (Transportation Safety)
- Siemens Mobility

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-purple: #734580;
  --color-yellow: #fedb00;
  --color-dark-purple: #61326e;
  --color-black: #080808;
  --color-white: #ffffff;
  --font-heading: 'Roboto Slab', serif;
  --font-body: 'Roboto', sans-serif;
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Generate a hero section with a #734580 purple background, a 62px Roboto Slab heading in white, and a #fedb00 yellow button with 0px radius."
- "Create a 3-column grid of cards using #fedb00 backgrounds and 25px Roboto Slab titles."
- "Design a contact form with 0px radius white inputs and a #734580 purple submit button."

## Known gaps
- Hover states for navigation items were not explicitly captured in the token data.
- Active/Focus states for text inputs were not captured in the source evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://clearview-intelligence.com | 1440px | 2026-06-06 |
| About Us | https://clearview-intelligence.com/about | 1440px | 2026-06-06 |