# Hitachi-solutions.co.uk Design System

> Corporate precision meets Microsoft-ecosystem blue, anchored by sharp-edged geometry and generous white space.

**Source:** https://hitachi-solutions.co.uk | **Captured:** 2026-06-06
**Brand layer:** parent | **Related brands:** None

## TL;DR
Hitachi Solutions utilizes a high-contrast, professional palette dominated by a deep corporate blue `#004596` and pure white `#ffffff`. The system is built on the custom **HitachiSans** typeface, which maintains a consistent 700 weight for headings to establish clear hierarchy. Layouts are characterized by significant vertical spacing (up to 56px) and a mix of sharp 0px corners for foundational sections and soft 25px radii for interactive cards. Subtle depth is achieved through wide, soft shadows (`rgba(12, 12, 12, 0.08)`) rather than heavy borders.

## Signature DNA
1. **The Corporate Anchor** (Deep blue `#004596` used as the primary interactive signal for borders, text links, and button outlines across all pages).
2. **HitachiSans Bold Headers** (Consistent use of 700 weight at 40px for display and 20px-22px for sub-headers, creating an authoritative, stable information architecture).
3. **Hybrid Geometry** (The juxtaposition of sharp 0px containers for page-width sections with 21px-25px rounded corners for feature cards and buttons).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Primary page background and card surface | 20 | 1.0 | Computed |
| `{color.black}` | `#000000` | Primary text and shadow base | 23 | 1.0 | Token |
| `{color.ink}` | `#0c0c0c` | Default body text | 92 | 0.8 | Computed |
| `{color.charcoal}` | `#222222` | Secondary text and card content | 25 | 0.8 | Computed |
| `{color.ice}` | `#f4f9fd` | Subtle section backgrounds | 3 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#004596` | Primary brand blue; buttons, borders, links | 23 | 0.8 | Computed |
| `{color.navy}` | `#091533` | Dark accent text | 8 | 0.6 | Computed |
| `{color.blue-vivid}` | `#0064fa` | High-visibility text links | 4 | 0.6 | Computed |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| HitachiSans | 300, 400, 700 | All headings, body, and UI | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display}` | 40px | 48px | normal | 700 | Main section heads | `h2` |
| `{text.heading-sm}` | 22px | 26.88px | normal | 700 | Icon grid titles | `h3.repeater-icon__item-heading` |
| `{text.subheading}` | 20px | 24px | normal | 700 | Card titles | `h3.repeater-page__item-heading` |
| `{text.category}` | 20px | 32px | normal | 300 | Card labels | `p.card__category` |
| `{text.body-lg}` | 18px | 31.5px | normal | 400 | Stats/Intro text | `p.stats__item--heading` |
| `{text.body}` | 16px | 25.6px | normal | 400 | Default paragraph | `p.repeater-page__subheading` |
| `{text.button}` | 16px | 16px | normal | 700 | CTA labels | `a.button` |
| `{text.body-sm}` | 14px | 22.4px | normal | 300 | Card excerpts | `p.card__excerpt` |

### Principles
1. **Weight as Hierarchy:** Bold (700) is strictly reserved for titles and interactive labels; Light (300) is used for metadata and excerpts.
2. **Vertical Breathing:** Line heights for body text are generous (1.6x) to improve readability on dense corporate pages.
3. **No Letter Spacing:** The system relies on the natural kerning of HitachiSans; no tracking adjustments are applied.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 3 |
| `{space.sm}` | 16px | 33 |
| `{space.md}` | 32px | 38 |
| `{space.lg}` | 48px | 3 |
| `{space.xl}` | 56px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Main containers, section blocks | 144 occurrences |
| `{radius.card}` | 16px | Secondary feature cards | Card component |
| `{radius.button}` | 21px | Primary pill buttons | Rounded Button component |
| `{radius.panel}` | 25px | Main content cards | Card component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.soft}` | `rgba(12, 12, 12, 0.08) 0px 0px 36px 17px` | Feature cards on white canvas | Card component |

## Components

### Tier 1: Foundational
#### Surface
**Role:** Standard content container
**Pages observed:** All
**Spec:** Background `#ffffff` | Text `#0c0c0c` | Border `0px` | Radius `0px` | Padding `0px`
**States observed:** Default: captured | Hover: not captured

#### Rounded Button
**Role:** Primary site navigation and section CTAs
**Pages observed:** https://hitachi-solutions.co.uk, https://hitachi-solutions.co.uk/about
**Spec:** Background `transparent` | Text `#004596` | Border `1px solid #004596` | Radius `21px` | Padding `14px 56px` | Typography `16px/700`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns
#### Feature Card
**Role:** Industry and service highlights
**Pages observed:** https://hitachi-solutions.co.uk
**Spec:** Background `#ffffff` | Text `#222222` | Border `1px solid transparent` | Radius `25px` | Padding `32px 24px` | Shadow `{shadow.soft}`
**States observed:** Default: captured | Hover: captured (border transition to primary blue)

#### Stats Card
**Role:** Data visualization and proof points
**Pages observed:** https://hitachi-solutions.co.uk
**Spec:** Background `#f4f9fd` | Text `#0c0c0c` | Border `2px solid #d9d9da` | Radius `16px` | Padding `32px`
**States observed:** Default: captured

### Tier 3: Surface-specific
#### About Section Panel
**Role:** Large content blocks on the About page
**Pages observed:** https://hitachi-solutions.co.uk/about
**Spec:** Background `transparent` | Text `#0c0c0c` | Radius `30px` | Padding `48px 32px 56px`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Gap | 56px |
| Grid | 3-column (Desktop) / 1-column (Mobile) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; 3-up grids stack vertically; padding reduced to 16px. |
| Desktop | 1440px | Full horizontal navigation; 3-up card grids. |

## Imagery & decoration
- **Photography:** High-quality professional portraits with soft-focus backgrounds.
- **Accents:** Occasional use of thin horizontal rules in brand blue `#004596`.
- **Avoids:** Skeuomorphism, heavy gradients, or rounded corners on main page-width sections.

## Do's
- Use `#004596` for all primary interactive elements.
- Maintain 700 weight for all `h2` and `h3` elements.
- Use `{shadow.soft}` only on cards with white backgrounds.
- Ensure 56px vertical spacing between major content blocks.
- Keep main section containers at `{radius.none}`.

## Don'ts
- **Wrong:** Using a generic blue like `#0693e3` for buttons. **Right:** Use brand blue `#004596`. **Reason:** Brand consistency and contrast requirements.
- **Wrong:** Setting body text to 700 weight. **Right:** Use 300 or 400 weight for readability.
- **Wrong:** Applying `{radius.card}` to the main navigation bar.
- Do not use shadows on dark or colored backgrounds.
- Do not mix multiple font families; stick to HitachiSans.

## Similar brands
- Microsoft (Partner alignment)
- Accenture
- Deloitte
- IBM

## Quick start

### CSS Variables
```css
:root {
  --hitachi-blue: #004596;
  --hitachi-black: #0c0c0c;
  --hitachi-white: #ffffff;
  --hitachi-shadow: rgba(12, 12, 12, 0.08) 0px 0px 36px 17px;
  --radius-card: 25px;
  --radius-button: 21px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #004596;
  --color-surface: #ffffff;
  --font-sans: "HitachiSans", sans-serif;
  --shadow-soft: 0 0 36px 17px rgba(12, 12, 12, 0.08);
  --radius-button: 21px;
}
```

## Agent prompt examples
- "Create a feature card using a 25px border radius, a white background, and the soft shadow `rgba(12, 12, 12, 0.08) 0px 0px 36px 17px`."
- "Design a primary button with a 1px border in `#004596`, a 21px radius, and HitachiSans Bold text at 16px."
- "Generate a section header using HitachiSans 700 at 40px with a 48px line height."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Form input styles and validation states (Semantic colors) were not present on the analyzed pages.

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