Intel Brand Design System Deep Dive

1. Brand Overview

Intel’s digital design language is exactly what you’d expect from a legacy tech giant that’s been defining “inside” for decades — high-contrast, engineered precision, and a confidence that borders on rigidity. The vibe is corporate, but not stale. They’ve stripped away unnecessary ornamentation, kept the palette lean, and pushed typography into a clean, modern sans space.

This is a system built for engineers, IT buyers, enterprise decision-makers, and developers — people who value clarity over flourish. But it’s also been polished for consumer-facing technology launches. You see flashes of bold blues and crisp whites in CTAs, but the canvas leans toward dark neutrals and disciplined spacing.

Navigation is tight. Breakpoints span from tiny mobile widths (375px) up to massive 1800px screens. Components are consistent: pill-shaped buttons, clean link states, and text-heavy layouts that rely on hierarchy rather than decoration.

Intel’s design system feels like hardware schematics translated into UI — everything is measured, everything aligns to grid multiples, and every pixel has a job. This works because the brand’s trust comes from precision. If Apple says “design is the product,” Intel says “engineering is the product — and design should respect that.”

2. Color System

2.1 Primary Colors

The main semantic “primary” is rgb(38, 38, 38) (#262626). That’s a deep neutral — almost black — used in footers, headers, and primary link text. It’s unusual to see a brand call a dark neutral “primary” instead of their signature blue, but it fits Intel’s corporate tone: the blue is an accent, not the default surface.

The blues (#0071c5, #0046c8, #0195ff, #2d76ff, #005fcc) are the emotional hooks — CTAs, hover states, and link highlights. They’re bright, high-saturation, and instantly signal “Intel.” The blues are always paired with white text for maximum contrast.

Comparatively, competitors like AMD lean into red-orange warmth. Intel’s cooler palette says “trust, stability, performance.”

2.2 Complete Palette

Plus CSS variables:

• --ighf-h-color-classic-blue-shade1: #004a86
• --ighf-h-base-border-color: #d7d7d7
• --ighf-h-link-color: #0068b5
• --ighf-h-link-selected-border-color: #00c7fd
• --ighf-h-color-black: #000

2.3 Color Relationships

Contrast stays high. White on #262626 passes WCAG AAA for normal text. Blue on white is comfortably above AA minimums. There’s no low-contrast pastel pairing here — everything is engineered for clarity.

Dark mode? Not really. The palette already leans toward dark neutrals, so flipping would be redundant. Instead, they use white as the “light mode” background, with dark footers and headers.

2.4 Usage Guide

• Pair #0071c5 with white for CTAs — never with black text.
• Use #262626 for footer backgrounds, never for large body text blocks (too heavy).
• Avoid pairing #0046c8 with #0195ff — too close in hue, no hierarchy.
• Keep greys (#999fa9, #656d7a) for secondary or disabled states.

3. Typography

3.1 Font Families

Two main families:

• intel-one-display-medium (custom) — headings, display text. Fallbacks: Helvetica, Arial.
• intel-one-body-text (custom) — body, links, buttons. Fallbacks: Helvetica, Arial.
• system-ui — used in some headings, buttons, captions. Fallbacks include -apple-system, Segoe UI, Roboto, Ubuntu, Helvetica Neue, Oxygen, Cantarell.

No Google Fonts, no Adobe Fonts — these are proprietary.

3.2 Type Scale

…and many more small variations down to 12px and 13px sizes.

3.3 Hierarchy

Headings step down sharply from 56px to 32px, then into low-20px territory. That’s a compressed scale — keeps things tight and consistent. Body and link text mostly hover at 14–20px, which is legible across devices. Uppercase transforms are reserved for buttons and some captions, adding emphasis without extra size.

4. Spacing & Layout

4.1 Spacing Scale

The base grid is 8px. They stick to multiples, but also sprinkle in odd values like 6px and 11.5px where needed.

4.2 Layout

Breakpoints are dense: 375px, 426px, 600px, 768px, 992px, 1024px, 1200px, 1440px, 1650px, 1800px. This suggests a fluid grid with targeted tweaks for many device widths. No single “container max width” is given, but the spread shows they care about ultra-wide desktop layouts.

5. Visual Elements

Border Radius

Ranges from sharp (0px) to fully rounded (50%, 100px).

• 2px — inputs, preference center buttons
• 3px — divs, tabpanels
• 4px — selects
• 32px — buttons, links (pill shapes)
• 100px — tabs
• 50% — circular icons

They clearly differentiate functional UI (small radius) from interactive CTAs (large pills).

Shadows

Sparse use:

• rgba(0,0,0,0.3) 0px 2px 2px — subtle depth
• Occasional soft shadows for modals/cards No heavy drop shadows — depth comes from contrast and borders.

Borders

1px solid in greys, blues, or white. Often used for hover outlines. Rarely more than 1px — keeps things crisp.

6. Components

6.1 Buttons

Primary (btn btn-primary)

• Default: bg #ffffff, color #000f28, padding 0px 18px, radius 32px, border none, opacity 0.01 (!). This opacity trick suggests buttons fade in via animation.
• Hover: color #2d76ff, transparent bg, 1px solid #2d76ff.
• Active: bg #2c6415, color #fff, border 1px solid rgba(162,192,169,0.5), outline #101010 solid 2px.
• Focus: bg #1eaedb, color #fff, box-shadow rgba(255,255,255,0.12) 0 0 0 8px.

Secondary (cmp-button)

• Default: bg #eef4fe, color #000, padding 32px, radius 0px.
• Hover: same hover style as primary (blue border).
• Active/Focus: matches primary’s focus styles.

6.2 Links

Five variants:

• Dark text (#000f28) → hover bright blue (#1883fd)
• White text (#fff) → hover blue
• Bright blue (#0195ff) → hover deep blue (#0046c8)
• Black (#000) → hover white (#fff)
• Grey (#262626) → hover bright blue

No underlines — all rely on color change.

6.3 Forms

Text Inputs

• Default: transparent bg, white text, no border.
• Focus: bg #1eaedb, white text, black border 1px, box-shadow #2196f3 0 0 1px.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-primary-neutral: #262626;
  --color-deep-navy: #000f28;
  --color-grey: #525252;
  --color-intel-blue: #0071c5;
  --color-deep-blue: #0046c8;
  --color-light-grey: #999fa9;
  --color-steel-grey: #656d7a;
  --color-bright-blue: #0195ff;
  --color-hover-blue: #2d76ff;
  --color-focus-blue: #005fcc;
  --ighf-h-color-classic-blue-shade1: #004a86;
  --ighf-h-base-border-color: #d7d7d7;
  --ighf-h-link-color: #0068b5;
  --ighf-h-link-selected-border-color: #00c7fd;
  --ighf-h-color-black: #000;

  /* Typography */
  --font-heading: "intel-one-display-medium", Helvetica, Arial;
  --font-body: "intel-one-body-text", Helvetica, Arial;
  --font-system: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Oxygen, Cantarell;

  /* Spacing */
  --space-1: 1px;
  --space-5: 5px;
  --space-6: 6px;
  --space-7: 7px;
  --space-8: 8px;
  --space-10: 10px;
  --space-11_5: 11.5px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-120: 120px;

  /* Border Radius */
  --radius-none: 0px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-pill: 32px;
  --radius-full: 50%;
  --radius-tab: 100px;

  /* Shadows */
  --shadow-subtle: rgba(0,0,0,0.3) 0px 2px 2px;
}

8. AI Coding Assistant Prompt

# Intel Design System Specification

You are an Intel design expert. Build UIs matching their visual language exactly.

## Brand Context
Intel’s design system is engineered precision — minimal ornamentation, high-contrast neutrals, and bold blues for interaction. Typography is custom, sans-serif, and disciplined. Spacing is on an 8px grid with occasional odd values for alignment.

## Color Palette
- White: #ffffff — Page backgrounds, text on dark surfaces
- Black: #000000 — Header text, borders
- Primary Neutral: #262626 — Footer/header backgrounds
- Deep Navy: #000f28 — Button backgrounds, hero sections
- Grey: #525252 — Form controls
- Intel Blue: #0071c5 — CTAs, primary actions
- Deep Blue: #0046c8 — Alternate link hover
- Light Grey: #999fa9 — Secondary text
- Steel Grey: #656d7a — Secondary text
- Bright Blue: #0195ff — Link accents
- Hover Blue: #2d76ff — Hover/focus states
- Focus Blue: #005fcc — Focus outlines
- Classic Blue Shade1: #004a86 — Thematic accents
- Link Color: #0068b5 — Default link text
- Link Selected Border: #00c7fd — Active link border
- Base Border Grey: #d7d7d7 — Dividers and input borders

## Typography
- Headings: "intel-one-display-medium", Helvetica, Arial
- Body: "intel-one-body-text", Helvetica, Arial
- System UI fallback: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Oxygen, Cantarell

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 56px | 500 | 1.20 | Page titles |
| H2 | 32px | 500 | 1.20 | Section headings |
| H2 | 32px | 500 | 1.10 | Compact headings |
| Body-lg | 21px | 400 | 1.00 | Intro text |
| Body-md | 20px | 500 | 1.20 | Emphasized body |
| Link | 20px | 400 | 1.25 | Navigation links |
| Caption | 14px | 400 | 1.25 | Small labels |
| Button | 12px | 500 | 1.50 | CTA buttons |

## Spacing & Grid
Base: 8px grid. Scale values: 1px, 5px, 6px, 7px, 8px, 10px, 11.5px, 12px, 16px, 20px, 24px, 32px, 48px, 120px.

Map:
- Button padding: 0px 18px
- Card padding: 32px
- Section gaps: 48px+
- Form field padding: 1px 2px

## Border Radius
- none: 0px — tables, hard-edge components
- sm: 2px — inputs
- md: 3px — tabpanels
- lg: 4px — selects
- pill: 32px — buttons, link pills
- tab: 100px — tab elements
- full: 50% — circular icons

## Shadows & Depth
- rgba(0,0,0,0.3) 0px 2px 2px — subtle component depth
- Avoid heavy shadows — use borders for separation

## Component Specifications

### Primary Button
Default:
```css
.btn-primary {
  background-color: #ffffff;
  color: #000f28;
  padding: 0px 18px;
  border-radius: 32px;
  border: none;
  font-weight: 500;
  font-size: 12px;
  opacity: 0.01;
}
.btn-primary:hover {
  color: #2d76ff;
  background-color: transparent;
  border: 1px solid #2d76ff;
}
.btn-primary:focus {
  background-color: #1eaedb;
  color: #ffffff;
  box-shadow: rgba(255,255,255,0.12) 0px 0px 0px 8px;
  outline: rgba(255,255,255,0.6) solid 1px;
}
```

### Secondary Button
```css
.cmp-button {
  background-color: #eef4fe;
  color: #000000;
  padding: 32px;
  border-radius: 0px;
  font-weight: 400;
  font-size: 16px;
}
.cmp-button:hover {
  color: #2d76ff;
  border: 1px solid #2d76ff;
}
```

### Navigation Links
- Default: no underline, brand color
- Hover: color shift to bright blue or deep blue
```css
.nav-link {
  text-decoration: none;
  font-weight: 500;
}
```

### Input Fields
```css
.input-text {
  background-color: transparent;
  color: #ffffff;
  border: none;
  padding: 1px 2px;
}
.input-text:focus {
  background-color: #1eaedb;
  color: #ffffff;
  border: 1px solid #000000;
  box-shadow: #2196f3 0px 0px 1px;
}
```

## Layout & Responsive Rules
Breakpoints:
- Mobile: < 426px
- Small tablet: 600px
- Tablet: 768px
- Desktop: 1024px+
- Large desktop: 1440px+
- Ultra-wide: 1650px, 1800px

## Interaction Rules
- State changes: 150ms ease
- Focus indicators: 1px solid focus color or 8px box-shadow
- Hover: color change + border reveal

## DO List
- Use only palette colors
- Maintain 8px grid, allow odd values only when specified
- Use intel-one-display for headings
- Keep CTA buttons pill-shaped
- Ensure text contrast meets WCAG AA

## DON'T List
- Add drop shadows beyond subtle spec
- Use underlines on links
- Mix sharp and rounded corners within the same component
- Invent new blue shades

## Code Examples

Primary Button:
```css
.btn-primary {
  background: #ffffff;
  color: #000f28;
  padding: 0px 18px;
  border-radius: 32px;
  font-weight: 500;
  font-size: 12px;
}
```

Card:
```css
.card {
  background: #ffffff;
  padding: 32px;
  border-radius: 4px;
  border: 1px solid #d7d7d7;
}
```

Input:
```css
.input {
  background: transparent;
  color: #ffffff;
  border: none;
  padding: 1px 2px;
}
```

9. Summary

TL;DR — Intel’s design system is precision engineering translated into UI: dark neutrals as the base, bold blues for interaction, custom sans typography, and an 8px grid underpinning everything. The components are clean, consistent, and designed for clarity.

Brand Keywords:

• engineering-precision
• high-contrast
• corporate-minimal
• tech-authority
• grid-disciplined