# Hillintl Design System

> Industrial-strength infrastructure identity defined by heavy Roboto Condensed headlines, a sharp-edged grid, and high-contrast Hill Red accents.

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

## TL;DR
Hillintl utilizes a high-contrast monochrome foundation of white (#ffffff) and dark gray (#313131), punctuated by a singular primary accent: Hill Red (#aa0000). The typography is dominated by Roboto Condensed, using heavy weights (700-900) and large scales (up to 100px) to project an image of structural stability and scale. Layouts are strictly orthogonal with a 0px border-radius standard for all primary UI components, reinforcing a rigid, engineering-led aesthetic. Depth is achieved through rare, high-offset soft shadows (24px) rather than traditional layering.

## Signature DNA
1. **The Red Punctuation** (Hill Red #aa0000 is used exclusively for primary actions, critical headings, and structural dividers, creating a clear navigational path against the grayscale canvas).
2. **Structural Typography** (Roboto Condensed at 700+ weight acts as a visual "beam," particularly the 100px display headers and 24px subheads that anchor section starts).
3. **Hard-Edge Geometry** (A non-negotiable 0px border-radius on buttons, cards, and input fields mirrors the literal edges of the infrastructure projects the brand manages).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Primary surface, button text on red | 365 | 1 | `css_variable:--white` |
| `{color.dark-gray}` | `#313131` | Primary body text, dark surfaces | 337 | 1 | `css_variable:--hill-dark-gray` |
| `{color.black}` | `#000000` | High-contrast text, deep shadows | 4 | 1 | `css_variable:--black` |
| `{color.off-white}` | `#eeeeee` | Secondary surfaces, hover states | 3 | 1 | `css_variable:--hill-off-white` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.hill-red}` | `#aa0000` | Primary CTA, brand headers, borders | 53 | 1 | `css_variable:--hill-red` |
| `{color.hill-blue}` | `#57a3ff` | Decorative only (infrequent) | 2 | 1 | `decorative_only` |

### Semantic
| Token | Hex | Role |
|------|-----|------|
| `{color.danger}` | `#aa0000` | Error states and critical alerts (shared with brand primary) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Roboto Condensed | 400, 700, 900 | Display, Headings, UI | Roboto Condensed (Google) | Apache 2.0 |
| Material Icons | 400 | UI Iconography | Material Icons | Apache 2.0 |
| Arial | 400 | System fallback, Translation UI | Sans-serif | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 100px | 105px | normal | 700 | Hero Display | `h1.pt-2.pl-2` |
| `{type.display-lg}` | 50px | 52.5px | normal | 700 | Section Headings | `h2` |
| `{type.heading-md}` | 32px | 24px | normal | 700 | Link Headings | `a` |
| `{type.heading-sm}` | 24px | 25.2px | normal | 700 | Sub-section labels | `h5.text-hill-red` |
| `{type.heading-heavy}` | 24px | 25.2px | normal | 900 | Emphasis | `strong` |
| `{type.nav}` | 18px | 27px | normal | 700 | Top Navigation | `a.nav-link` |
| `{type.body}` | 16px | 24px | normal | 400 | Default Prose | `header#header` |
| `{type.body-spaced}` | 16px | 24px | 3.2px | 400 | Tracking emphasis | `span` |
| `{type.button}` | 16px | 24px | normal | 700 | CTA Labels | `a.btn.btn` |

### Principles
1. **Condensed for Impact:** All display and heading levels must use Roboto Condensed.
2. **Vertical Rhythm:** Line heights for display type are tightly controlled at 1.05x the font size.
3. **Uppercase Utility:** Brand sub-headers frequently utilize `text-capitalize` or uppercase transforms to maintain industrial authority.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 75 |
| `{space.sm}` | 13px | 98 |
| `{space.md}` | 16px | 53 |
| `{space.lg}` | 20px | 105 |
| `{space.xl}` | 32px | 45 |
| `{space.xxl}` | 48px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Buttons, Cards, Inputs | 508 occurrences |
| `{radius.full}` | 50% | Icon containers, Avatars | 8 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.deep}` | `rgba(0, 0, 0, 0.07) 24px 24px 44px 0px` | Floating cards/surfaces | Observed on 14 elements |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** hillintl.com
**Spec:** Background `{color.hill-red}` (#aa0000) / Text `{color.white}` (#ffffff) / Border 1px `{color.hill-red}` / Radius 0px / Padding 8px 32px / Typography `{type.button}`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Ghost Button (Inverted)
**Role:** Secondary actions on white backgrounds
**Pages observed:** hillintl.com
**Spec:** Background transparent / Text `{color.hill-red}` (#aa0000) / Border 1px transparent / Radius 0px / Padding 0px 48px 0px 0px / Typography `{type.button}`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Content Card
**Role:** News and project highlights
**Pages observed:** hillintl.com
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.dark-gray}` (#313131) / Border 0px / Radius 0px / Padding 32px / Shadow `{shadow.deep}`
**States observed:** Default | Hover: Not captured

#### Navigation Link
**Role:** Top-level site navigation
**Pages observed:** hillintl.com
**Spec:** Background transparent / Text `{color.dark-gray}` (#313131) / Typography `{type.nav}`
**States observed:** Default | Active: Not captured

### Tier 3: Surface-specific

#### Dark Section Surface
**Role:** High-impact team/recruitment bands
**Pages observed:** hillintl.com
**Spec:** Background `{color.dark-gray}` (#313131) / Text `{color.white}` (#ffffff) / Radius 0px / Padding 48px
**States observed:** Default

#### Search Trigger
**Role:** Header utility
**Pages observed:** hillintl.com
**Spec:** Background `{color.white}` (#ffffff) / Text `{color.dark-gray}` (#313131) / Typography 16px / Padding 16px 20px
**States observed:** Default

## Layout
| Property | Value |
|------|-------|
| Max Content Width | 1440px |
| Standard Section Padding | 64px 0px |
| Grid Gap | 20px |

## Responsive
| Breakpoint | Width | Key changes |
|------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; Display headers scale down; Grid stacks 1-column. |
| Desktop | 1440px | Multi-column grid (up to 4-up); Full horizontal navigation. |

## Imagery & decoration
- **Photography:** Focuses on large-scale infrastructure (ports, skylines, satellite imagery) with high contrast.
- **Graphic Motifs:** Diagonal "slash" backgrounds in Hill Red or Blue used behind hero text.
- **Iconography:** Material Icons used at 24px and 32px sizes, often in Hill Red.

## Do's
- Use **Roboto Condensed** for all structural headings.
- Maintain a **0px border-radius** on all interactive elements.
- Use **Hill Red (#aa0000)** for the primary CTA of any page.
- Apply **24px offset shadows** only to cards on white backgrounds.
- Ensure **dark gray (#313131)** is used for body text to maintain 7.0:1+ contrast.

## Don'ts
- **No Rounded Corners:** Never apply border-radius to buttons or cards; the brand is strictly rectilinear.
- **No Gradient Buttons:** CTAs must be flat Hill Red or flat White.
- **Wrong:** Using Hill Blue (#57a3ff) for a primary CTA. **Right:** Use Hill Red (#aa0000). **Reason:** Blue is a decorative token only.
- **Wrong:** Using standard Roboto. **Right:** Use Roboto Condensed. **Reason:** The condensed width is a core brand signature.

## Similar brands
- Bechtel
- AECOM
- Fluor Corporation
- Kiewit

## Quick start

### CSS Custom Properties
```css
:root {
  --hill-red: #aa0000;
  --hill-dark-gray: #313131;
  --hill-off-white: #eeeeee;
  --white: #ffffff;
  --font-primary: 'Roboto Condensed', sans-serif;
  --radius-sharp: 0px;
  --shadow-deep: 24px 24px 44px 0px rgba(0, 0, 0, 0.07);
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #aa0000;
  --color-surface: #ffffff;
  --color-text-main: #313131;
  --font-display: "Roboto Condensed";
  --radius-none: 0px;
  --shadow-brand: 24px 24px 44px 0px rgba(0, 0, 0, 0.07);
}
```

## Agent prompt examples
- "Create a hero section with a background image of a construction site, a 100px Roboto Condensed bold headline in Hill Red, and a sharp-edged primary button."
- "Design a 3-column news grid using white cards with 0px radius, 32px internal padding, and a 24px offset soft shadow."
- "Generate a dark footer using #313131 background with white Roboto Condensed text and Hill Red dividers."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the source CSS variables or computed styles.
- Secondary navigation depth (dropdowns) was not analyzed.
- Form validation states (Success/Warning) were not present in the analyzed pages.

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