W3C Design Tokens
3 filesCross-tool design-token spec (DTCG/W3C). Light + dark mode siblings.
Intel
Intel Corporation is the silicon company behind the Core, Xeon, and Arc lines and the modern Intel Foundry business. The 2020 brand refresh replaced Intel's long-running "swoosh" identity with a flat, geometric wordmark in Intel Classic Blue (#0068B5), paired with a bright Intel Energy Blue (#00C7FD) for highlights and active states. The voice on intel.com is technical and enterprise-leaning; the visual treatment is light-first with a near-white canvas, carbon greys for surfaces and text, and the two blues carrying primary action and accent roles.
1 palette 3 fonts 0 assets 8 rules
Preview prompt
Use the [email protected] brand from brand-atoms.com.
Fetch https://brand-atoms.com/dist/brands/intel/1.0.0/json/brand.json
and apply its role mappings (primary, accent, identity, etc.),
reference the fonts in references.fonts, and honor every rule where
severity is "error". Surface any deviation you choose to make.Downloads
All converter outputs for [email protected]. Served from
/dist/brands/intel/1.0.0/.
JSON
1 filePlain JSON mirror of the resolved brand — palette, fonts, roles, rules.
CSS variables
1 fileCSS custom properties on :root with prefers-color-scheme dark.
SCSS
1 fileSCSS variables + Sass maps for swatches, roles, and fonts.
Tailwind config
1 fileTailwind v3 theme.extend.colors + fontFamily.
Figma Tokens
1 fileFigma Tokens plugin JSON (Tokens Studio compatible).
Swift
1 fileSwift enums for SwiftUI / UIKit color + font tokens.
Kotlin / Compose
1 fileKotlin objects for Jetpack Compose color + typography tokens.
Markdown guide
1 fileHuman-readable brand guide. Same source as the on-page Brand Guide.
Brand Guide
Inline rendering of the Markdown brand guide. Same source as the
markdown/brand-guide.md download.
Intel
Intel Corporation is the silicon company behind the Core, Xeon, and Arc lines and the modern Intel Foundry business. The 2020 brand refresh replaced Intel's long-running "swoosh" identity with a flat, geometric wordmark in Intel Classic Blue (#0068B5), paired with a bright Intel Energy Blue (#00C7FD) for highlights and active states. The voice on intel.com is technical and enterprise-leaning; the visual treatment is light-first with a near-white canvas, carbon greys for surfaces and text, and the two blues carrying primary action and accent roles.
Tags: intel, hardware, cpu, silicon, semiconductor, blue, enterprise
Atoms
Palette
Intel · [email protected] · Proprietary — All Rights Reserved
Intel's 2020 brand refresh moved the company off its long-standing navy "Intel Blue" onto a paired-blue system: Intel Classic Blue (#0068B5) as the primary identity blue used on the logo and CTAs, with Intel Energy Blue (#00C7FD) as the bright accent for highlights and active states. The supporting palette declared on the live site is a tight neutral ramp from near-white (#F7F7F7) through carbon greys to a dark canvas (#262626), with deeper navy variants (#004A86, #0046C8, #000F28) reserved for hover / pressed states and for high-emphasis hero surfaces.
Fonts
| Role | Font | License | Classification |
|---|---|---|---|
heading |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
body |
Inter ([email protected]) |
OFL-1.1 | sans-serif |
mono |
JetBrainsMono Nerd Font ([email protected]) |
OFL-1.1 | monospace |
Swatches
| ID | Name | Value |
|---|---|---|
classic-blue |
Intel Classic Blue | #0068B5 |
energy-blue |
Intel Energy Blue | #00C7FD |
blue-700 |
Blue 700 | #004A86 |
blue-800 |
Blue 800 | #0046C8 |
blue-900 |
Blue 900 | #000F28 |
carbon-web |
Carbon Web | #F7F7F7 |
carbon-100 |
Carbon 100 | #E7E7E7 |
carbon-200 |
Carbon 200 | #D7D7D7 |
carbon-400 |
Carbon 400 | #999FA9 |
carbon-500 |
Carbon 500 | #6A6D75 |
carbon-600 |
Carbon 600 | #525252 |
carbon-800 |
Carbon 800 | #262626 |
white |
White | #FFFFFF |
black |
Black | #000000 |
Mode role mappings
Light mode
| Role | Swatch | Hex |
|---|---|---|
background |
white |
#FFFFFF |
surface |
carbon-web |
#F7F7F7 |
surface-elevated |
white |
#FFFFFF |
text-primary |
carbon-800 |
#262626 |
text-secondary |
carbon-600 |
#525252 |
text-tertiary |
carbon-500 |
#6A6D75 |
primary |
classic-blue |
#0068B5 |
primary-hover |
blue-700 |
#004A86 |
accent |
energy-blue |
#00C7FD |
accent-hover |
classic-blue |
#0068B5 |
border |
carbon-200 |
#D7D7D7 |
Dark mode
| Role | Swatch | Hex |
|---|---|---|
background |
blue-900 |
#000F28 |
surface |
carbon-800 |
#262626 |
surface-elevated |
blue-800 |
#0046C8 |
text-primary |
white |
#FFFFFF |
text-secondary |
carbon-200 |
#D7D7D7 |
text-tertiary |
carbon-400 |
#999FA9 |
primary |
energy-blue |
#00C7FD |
primary-hover |
classic-blue |
#0068B5 |
accent |
energy-blue |
#00C7FD |
accent-hover |
classic-blue |
#0068B5 |
border |
carbon-600 |
#525252 |
Brand semantic roles
Colors
| Role | Swatch | Hex |
|---|---|---|
identity |
white |
#FFFFFF |
on-identity |
carbon-800 |
#262626 |
primary |
classic-blue |
#0068B5 |
primary-hover |
blue-700 |
#004A86 |
accent |
energy-blue |
#00C7FD |
accent-hover |
classic-blue |
#0068B5 |
mark |
classic-blue |
#0068B5 |
background-light |
white |
#FFFFFF |
background-dark |
blue-900 |
#000F28 |
surface-light |
carbon-web |
#F7F7F7 |
surface-dark |
carbon-800 |
#262626 |
text-primary-light |
carbon-800 |
#262626 |
text-primary-dark |
white |
#FFFFFF |
text-secondary-light |
carbon-600 |
#525252 |
text-tertiary-light |
carbon-500 |
#6A6D75 |
border-light |
carbon-200 |
#D7D7D7 |
Typography
| Role | Font role key |
|---|---|
display |
heading |
prose |
body |
code |
mono |
Rules
🛑 error (6)
colorChoice → roles.colors.mark
- allowed: classic-blue, black, white
- forbidden: energy-blue, blue-700, blue-800, carbon-400, carbon-600
The 2020 wordmark fills with Intel Classic Blue (#0068B5) on light surfaces, or with monochrome black-on-light / white-on-dark when a one-color treatment is required. Energy Blue is the accent — used as a highlight color alongside the mark, never as the mark fill itself.
forbiddenTreatment → logo
- treatments: stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined
The Intel mark is a fixed-proportion geometric wordmark. Recoloring (e.g., filling with Energy Blue or with a carbon grey), skewing, gradient-filling, drop-shadowing, or placing the mark on a busy photo conflicts with the restrained 2020 identity as it appears on intel.com.
contrastRatio → text-primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Carbon 800 (#262626) on white (#FFFFFF) measures ~14:1 — clears WCAG AA at the body-text floor of 4.5:1 with meaningful headroom. The enterprise reading posture on intel.com justifies the AA target as a hard floor.
contrastRatio → roles.colors.primary
- against:
background - minRatio:
4.5 - standard:
WCAG-AA
Classic Blue (#0068B5) on white measures ~5.6:1 — clears WCAG AA for body text, important because intel.com uses Classic Blue for inline links inside paragraph text where the 4.5:1 body-text floor (not the 3:1 large-text floor) applies.
colorChoice → roles.colors.primary
- allowed: classic-blue, blue-700, energy-blue
- forbidden: blue-800, blue-900, carbon-800
The identity-primary role is filled by Classic Blue (default) or Energy Blue (on dark surfaces, where Classic Blue loses contrast). The deeper saturated blues (#0046C8, #000F28) are hero-canvas colors, not action colors — using them as the primary affordance breaks the established 2020 hierarchy.
accessibilityRequirement → *
- standard:
WCAG-AA - criterion:
1.4.3
WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The carbon-on-white text pairings and Classic Blue links all clear AA at the body-text floor. AA is the appropriate target for an enterprise marketing surface with mixed-density information.
⚠️ warning (1)
contextRestriction → roles.colors.accent
- forbiddenContexts: body-text, long-form-reading
- allowedContexts: highlight, active-state, data-viz, hover-affordance
Energy Blue (#00C7FD) is the bright accent introduced in the 2020 refresh. It functions at highlight and active- state scales but falls below the AA body-text contrast floor on the white canvas (~2.1:1) and must not be used for running text.
💡 recommendation (1)
fontPairing → typography.display
- requires:
prose - minSizeRatio:
1.3
Intel's marketing surfaces use Intel One Body Text (proprietary) for both display and body, distinguished by size and weight rather than two families. Maintain at least a 1.3× ratio between display and prose to preserve hierarchy when one family carries both roles.
Provenance
- Source: https://www.intel.com/
- License:
Proprietary — All Rights Reserved - Attribution: Intel Corporation — identity values captured from the deployed stylesheet on intel.com (clientlib-base.min.css and intel-fonts.css under the --ighf-h-color-* / Intel One font- family declarations). Intel, the Intel logo, Intel Core, Intel Xeon, Intel Arc, Intel Foundry, Intel One, and Intel Clear are trademarks of Intel Corporation.
- Imported:
2026-05-18 - Notes: Derived from live site CSS at https://www.intel.com/ on 2026-05-18; published brand guide at intel.com/content/www/us/en/company-overview/brand-guidelines.html is unavailable (returns 404 to non-browser clients). The proprietary brand typeface family (Intel One, Intel Clear) is declared on intel.com but not publicly distributed. This atom references Inter@1 as the open-source rendering substitute. Scope is the parent corporate identity only — Core, Xeon, Arc, and Foundry sub-brands are deferred. assets: [] per the encyclopedia's trademark-redistribution policy.
Generated by the brand-atoms converter. Source: [email protected] from the encyclopedia.
Components — same template, themed by Intel
Every block below renders from the resolved palette + font references on this brand. Swap the brand and the same template re-themes — no per-brand component code required.
Intel
A clear hierarchy in Intel's typeface
Tertiary heading — supporting structure
Body copy renders in the brand's prose font on the brand's background.
Inline links and highlighted phrases pick up
the brand's primary and highlight roles. Code spans like brand.references.palette
fall back to the monospace face.
A blockquote uses the brand's accent color as its rule. Useful for pulling tagline copy out of running prose.
Bulleted list
- Bullet markers inherit the brand's primary color.
- Item spacing reads as a deliberate vertical rhythm.
- Nested items still resolve to the same primary.
- Second-level item using the accent.
- Third bullet wraps cleanly at narrow widths.
Numbered list
- Open the brand's resolved spec.
- Apply roles to the component template.
- Render the surface in the brand's identity.
- Audit the output against the typed rules.
Callout boxes
Info
Neutral status — provides supplemental context without urgency. Uses the brand's primary as the rule.
Success
Confirms a completed action — palette role success determines the rule color.
Warning
Calls out something that needs attention but isn't an error — palette role warning.
Error
Surfaces a failure that blocks progress — palette role error. Use sparingly.
Table
| Role | Resolves to | Mode |
|---|---|---|
| primary | brand color #1 | light + dark |
| accent | brand color #2 | light + dark |
| warning | brand warning | light + dark |
| error | brand error | light + dark |
Atoms
Brand semantic roles
Brand-level role overrides on top of palette-default mappings. Each role resolves to a concrete swatch or font reference.
Colors
accent
→ energy-blue #00C7FD accent-hover
→ classic-blue #0068B5 background-dark
→ blue-900 #000F28 background-light
→ white #FFFFFF border-light
→ carbon-200 #D7D7D7 identity
→ white #FFFFFF mark
→ classic-blue #0068B5 on-identity
→ carbon-800 #262626 primary
→ classic-blue #0068B5 primary-hover
→ blue-700 #004A86 surface-dark
→ carbon-800 #262626 surface-light
→ carbon-web #F7F7F7 text-primary-dark
→ white #FFFFFF text-primary-light
→ carbon-800 #262626 text-secondary-light
→ carbon-600 #525252 text-tertiary-light
→ carbon-500 #6A6D75 Typography
code
→ mono JetBrainsMono Nerd Font display
→ heading Inter prose
→ body Inter Palette mode mappings (from intel)
Light mode (11 roles)
accent
→ energy-blue accent-hover
→ classic-blue background
→ white border
→ carbon-200 primary
→ classic-blue primary-hover
→ blue-700 surface
→ carbon-web surface-elevated
→ white text-primary
→ carbon-800 text-secondary
→ carbon-600 text-tertiary
→ carbon-500 Dark mode (11 roles)
accent
→ energy-blue accent-hover
→ classic-blue background
→ blue-900 border
→ carbon-600 primary
→ energy-blue primary-hover
→ classic-blue surface
→ carbon-800 surface-elevated
→ blue-800 text-primary
→ white text-secondary
→ carbon-200 text-tertiary
→ carbon-400 Rules (8 typed constraints)
error · 6 rules
colorChoice roles.colors.mark allowed classic-blue, black, white forbidden energy-blue, blue-700, blue-800, carbon-400, carbon-600 The 2020 wordmark fills with Intel Classic Blue (#0068B5) on light surfaces, or with monochrome black-on-light / white-on-dark when a one-color treatment is required. Energy Blue is the accent — used as a highlight color alongside the mark, never as the mark fill itself.
forbiddenTreatment logo treatments stretched, rotated, recolored, drop-shadow, gradient-fill, on-busy-photo, outlined The Intel mark is a fixed-proportion geometric wordmark. Recoloring (e.g., filling with Energy Blue or with a carbon grey), skewing, gradient-filling, drop-shadowing, or placing the mark on a busy photo conflicts with the restrained 2020 identity as it appears on intel.com.
contrastRatio text-primary against background minRatio 4.5 standard WCAG-AA Carbon 800 (#262626) on white (#FFFFFF) measures ~14:1 — clears WCAG AA at the body-text floor of 4.5:1 with meaningful headroom. The enterprise reading posture on intel.com justifies the AA target as a hard floor.
contrastRatio roles.colors.primary against background minRatio 4.5 standard WCAG-AA Classic Blue (#0068B5) on white measures ~5.6:1 — clears WCAG AA for body text, important because intel.com uses Classic Blue for inline links inside paragraph text where the 4.5:1 body-text floor (not the 3:1 large-text floor) applies.
colorChoice roles.colors.primary allowed classic-blue, blue-700, energy-blue forbidden blue-800, blue-900, carbon-800 The identity-primary role is filled by Classic Blue (default) or Energy Blue (on dark surfaces, where Classic Blue loses contrast). The deeper saturated blues (#0046C8, #000F28) are hero-canvas colors, not action colors — using them as the primary affordance breaks the established 2020 hierarchy.
accessibilityRequirement * standard WCAG-AA criterion 1.4.3 WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) — Level AA. The carbon-on-white text pairings and Classic Blue links all clear AA at the body-text floor. AA is the appropriate target for an enterprise marketing surface with mixed-density information.
warning · 1 rule
contextRestriction roles.colors.accent forbiddenContexts body-text, long-form-reading allowedContexts highlight, active-state, data-viz, hover-affordance Energy Blue (#00C7FD) is the bright accent introduced in the 2020 refresh. It functions at highlight and active- state scales but falls below the AA body-text contrast floor on the white canvas (~2.1:1) and must not be used for running text.
recommendation · 1 rule
fontPairing typography.display requires prose minSizeRatio 1.3 Intel's marketing surfaces use Intel One Body Text (proprietary) for both display and body, distinguished by size and weight rather than two families. Maintain at least a 1.3× ratio between display and prose to preserve hierarchy when one family carries both roles.
Provenance
- Source
- https://www.intel.com/
- License
Proprietary — All Rights Reserved- Attribution
- Intel Corporation — identity values captured from the deployed stylesheet on intel.com (clientlib-base.min.css and intel-fonts.css under the --ighf-h-color-* / Intel One font- family declarations). Intel, the Intel logo, Intel Core, Intel Xeon, Intel Arc, Intel Foundry, Intel One, and Intel Clear are trademarks of Intel Corporation.
- Imported
2026-05-18- Notes
- Derived from live site CSS at https://www.intel.com/ on 2026-05-18; published brand guide at intel.com/content/www/us/en/company-overview/brand-guidelines.html is unavailable (returns 404 to non-browser clients). The proprietary brand typeface family (Intel One, Intel Clear) is declared on intel.com but not publicly distributed. This atom references Inter@1 as the open-source rendering substitute. Scope is the parent corporate identity only — Core, Xeon, Arc, and Foundry sub-brands are deferred. assets: [] per the encyclopedia's trademark-redistribution policy.