# How asml.com is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/asml.com-design)

Last updated: 2026-08-10

## Captured pages

[![ASML at a glance page with blue navigation overlay showing Company, Careers, Technology, Products, News, Investors menu items and employee statistics on light background](https://pin.fontofweb.com/2375?format=jpg)](https://design.withfudge.com/share/pin-2375)

[ASML at a glance page with blue navigation overlay showing Company, Careers, Technology, Products, News, Investors menu items and employee statistics on light background](https://design.withfudge.com/share/pin-2375)

[![ASML footer section with four-column link grid, social media icons, blue Manage cookie settings button, and copyright text on light gray background](https://pin.fontofweb.com/2374?format=jpg)](https://design.withfudge.com/share/pin-2374)

[ASML footer section with four-column link grid, social media icons, blue Manage cookie settings button, and copyright text on light gray background](https://design.withfudge.com/share/pin-2374)

[![ASML Related content section with deep blue background, three image cards for About ASML, How we innovate, and Careers with yellow accent underlines](https://pin.fontofweb.com/2373?format=jpg)](https://design.withfudge.com/share/pin-2373)

[ASML Related content section with deep blue background, three image cards for About ASML, How we innovate, and Careers with yellow accent underlines](https://design.withfudge.com/share/pin-2373)

[![ASML at a glance hero with large blue headline, clean white background, technician photograph, and four key statistics with icons in horizontal row](https://pin.fontofweb.com/2372?format=jpg)](https://design.withfudge.com/share/pin-2372)

[ASML at a glance hero with large blue headline, clean white background, technician photograph, and four key statistics with icons in horizontal row](https://design.withfudge.com/share/pin-2372)

## Overview

The ASML design system presents a disciplined, engineering-forward visual language that reflects the company's position as a leading supplier to the semiconductor industry. The system is built on a foundation of deep institutional blue, clean Swiss-inspired typography, and rigorous grid-based layouts that communicate precision and technological authority. Every element serves a functional purpose: generous whitespace creates breathing room for complex information, bold display typography establishes clear hierarchy, and a restrained accent palette keeps attention focused on content rather than decoration.

The visual character is distinctly corporate-technical without feeling cold. Photography of cleanroom environments, technicians in protective gear, and precision machinery humanizes the brand while reinforcing expertise. The system alternates between light canvas surfaces for readability and deep blue immersive sections for impact, creating a rhythmic reading experience that guides users through dense informational content. Navigation is direct and unambiguous, with clear labels and consistent placement that prioritizes task completion over exploration.

## Colors

The ASML color system is intentionally narrow, deriving its power from contrast and disciplined application rather than variety. The palette centers on a signature deep blue that functions as both brand identifier and functional surface, supported by a single warm accent and neutral grounds for extended reading.

| token | value | use |
|---|---|---|
| brand-blue | #0000A0 | Primary brand color, navigation backgrounds, headlines, icons, statistic values, and interactive elements |
| brand-yellow | #FFD700 | Accent underline on content cards, active navigation states, and highlight moments |
| ink-primary | #000000 | Body text, footer links, and secondary content on light surfaces |
| ink-inverse | #FFFFFF | Text on deep blue backgrounds, navigation overlay text, and button labels |
| surface-canvas | #FFFFFF | Primary page background, hero sections, and content areas requiring maximum readability |
| surface-muted | #F0F0F0 | Footer background, secondary sections, and subtle content grouping |
| surface-deep | #0000A0 | Immersive sections, navigation overlay, related content panels, and high-impact moments |
| border-subtle | #E0E0E0 | Grid lines, dividers, and structural boundaries on light surfaces |

The color logic follows a clear pattern: light surfaces carry dark text for extended reading, while deep blue surfaces carry white text for emphasis and section breaks. The yellow accent appears sparingly as a thin horizontal rule beneath card titles, providing a warm counterpoint to the cool blue without competing for attention. Photography integrates naturally with this system—the blue tones in technical imagery resonate with the brand color, while the yellow accent echoes safety markings and technical indicators found in semiconductor environments.

## Typography

ASML employs a single type family in three weights, creating a cohesive typographic system that scales from monumental headlines to compact labels without introducing visual fragmentation. The typeface is a contemporary grotesk with clean geometry and open apertures, optimized for clarity at all sizes. The supplied font families are N Haas Grotesk Ds Pro 55 Rg-Romanwfkit 2 K 1 S E for regular weight, N Haas Grotesk Ds Pro 65 Md for medium weight, and N Haas Grotesk Ds Pro 75 Bd-Boldwfkit 2 K 1 S E for bold weight.

| token | family | size | weight | leading | tracking | use |
|---|---|---:|---:|---:|---:|---|
| hero-display | N Haas Grotesk Ds Pro 75 Bd-Boldwfkit 2 K 1 S E | 4rem | 700 | 1.05 | -0.02em | Page headlines, major section titles |
| section-display | N Haas Grotesk Ds Pro 75 Bd-Boldwfkit 2 K 1 S E | 3rem | 700 | 1.1 | -0.01em | Subsection headings, card titles |
| body-large | N Haas Grotesk Ds Pro 55 Rg-Romanwfkit 2 K 1 S E | 1.5rem | 400 | 1.4 | 0em | Lead paragraphs, introductory text |
| body | N Haas Grotesk Ds Pro 55 Rg-Romanwfkit 2 K 1 S E | 1rem | 400 | 1.5 | 0em | General content, descriptions, footer links |
| label | N Haas Grotesk Ds Pro 65 Md | 0.875rem | 500 | 1.3 | 0.05em | Category labels, uppercase navigation headers, metadata |
| navigation | N Haas Grotesk Ds Pro 65 Md | 1.25rem | 500 | 1.2 | 0em | Primary navigation items, menu links |
| statistic | N Haas Grotesk Ds Pro 75 Bd-Boldwfkit 2 K 1 S E | 2.5rem | 700 | 1 | -0.01em | Numerical data, key figures |

The type system relies on weight and size contrast rather than style variation. Bold weights carry structural and numerical information, medium weights handle navigation and labels, and regular weights manage body content. Letter spacing is slightly tightened for display sizes to create cohesive word shapes, while body sizes use neutral spacing for comfortable reading. Uppercase treatment is reserved for small label text with expanded tracking, creating a clear distinction between navigational cues and content.

The font families are designed by Christian Schwartz and distributed by Linotype GmbH. Verify licensing for these families before production use.

## Layout

The ASML layout system is built on a strict columnar grid that organizes content into clear vertical rhythms. Desktop compositions use a multi-column structure with consistent gutters, creating alignment across disparate content types. The grid is visible in the interface through subtle vertical rules that separate content zones, reinforcing the engineered precision of the brand.

Page sections are generously proportioned, with substantial vertical padding that allows content to breathe. The hero area pairs asymmetrically weighted text and imagery—headlines occupy left-aligned column positions while photographs extend to the right edge, creating dynamic tension within the rigid grid. Below the hero, content flows in structured bands that alternate between full-width light surfaces and contained deep blue panels.

The navigation overlay demonstrates the system's spatial thinking: it occupies a fixed left portion of the viewport with a solid blue ground, while the underlying page remains partially visible, establishing clear hierarchy without fully disconnecting the user from context. Footer content organizes into four equal columns with consistent internal spacing, maintaining the grid discipline to the bottom of the page.

Spacing follows a modular approach based on a 0.25rem unit. Major sections receive 6rem of vertical separation, component groups sit 2rem apart, and grid gaps maintain 1.5rem for related items. This limited set of spacing values creates predictable rhythms that support scanning and comprehension of dense technical content.

## Visual language

The ASML visual language communicates precision engineering through systematic restraint. Every element is aligned, measured, and purposeful. The aesthetic avoids decorative flourish in favor of functional clarity—borders are sharp, corners are minimally rounded, and transitions between sections are clean cuts rather than gradual fades.

Photography plays a central role in humanizing the technical subject matter. Images show people in controlled environments: technicians in cleanroom suits, engineers examining components, researchers at precision equipment. These photographs are treated documentary-style with natural color and clear focus, never heavily filtered or abstracted. The presence of human subjects within technical settings bridges the gap between corporate capability and individual expertise.

Iconography is line-based and geometric, matching the weight and precision of the typography. Icons accompany statistics and navigation items, drawn with consistent stroke weight and open forms that remain legible at small sizes. The icon style avoids filled shapes in favor of outlined constructions that feel light and technical.

The yellow accent appears only as a thin horizontal rule—approximately 2-3 pixels in height—beneath card titles in the related content section. This minimal application makes the accent more impactful when it does appear, functioning as a subtle indicator of interactivity or section identity rather than a dominant brand element.

## Components

### Primary navigation

The primary navigation exists in two states: a compact header bar and an expanded overlay. The compact state shows the ASML wordmark in bold blue, accompanied by a hamburger menu icon and search icon. The expanded overlay reveals a full-height blue panel with large white navigation links organized by category: Company, Careers, Technology, Products, News, Investors. Secondary links for Contact us, SupplierNet, and CustomerNet appear below in smaller text. The active category receives yellow accent treatment.

- Anatomy: Wordmark, menu trigger, search trigger, category links, secondary links, close control
- Surface and text color: Blue background with white text; yellow for active state
- Typography: Navigation token for categories, body token for secondary links
- Shape: Full-height panel with minimal rounding, effectively sharp edges
- Spacing: Generous padding around links, clear separation between category and secondary groups
- Composition: Left-fixed panel occupying approximately 40% of viewport width

### Hero section

The hero section combines typographic impact with documentary photography. A breadcrumb trail in muted text precedes the headline, establishing location within the site hierarchy. The headline uses hero-display sizing in brand blue, followed by a body-large subtitle in lighter weight. To the right, a large photograph extends to the viewport edge, showing technical environments or personnel.

- Anatomy: Breadcrumb, headline, subtitle, hero image
- Surface and text color: White canvas with blue headline and gray subtitle
- Typography: Hero-display for headline, body-large for subtitle
- Shape: Rectangular image with minimal rounding
- Spacing: Substantial vertical padding, asymmetric horizontal distribution
- Composition: Text left-aligned in grid columns, image right-aligned bleeding to edge

### Statistic blocks

Statistic blocks present key figures in a horizontal row with consistent internal structure. Each block contains an icon, a large numerical value, and a descriptive label. The icons are simple line drawings representing concepts: founding year, employees, nationalities, locations. Values use the statistic token in brand blue, while labels use a smaller medium weight in the same color.

- Anatomy: Icon, numerical value, descriptive label
- Surface and text color: White or light background with blue text and icons
- Typography: Statistic token for values, label token for descriptions
- Shape: No containing shape, elements stacked vertically with consistent alignment
- Spacing: Equal horizontal distribution across available width, generous vertical separation from surrounding content
- Composition: Four-column grid on desktop, equal spacing between items

### Content cards

Content cards appear in immersive blue sections, presenting related articles or destinations. Each card contains a photograph, a bold title, descriptive text, and a yellow accent underline. The cards are arranged horizontally with consistent gaps, creating a browsable row of options.

- Anatomy: Image, title, description, accent underline
- Surface and text color: Deep blue background with white text, yellow accent
- Typography: Section-display for titles, body for descriptions
- Shape: Rectangular images with minimal rounding, sharp card edges
- Spacing: Internal padding around text, consistent gap between cards
- Composition: Three-column grid with equal card widths

### Footer

The footer organizes extensive link hierarchies into a structured grid. Four columns carry category headers in uppercase with expanded tracking, followed by related links in regular weight. Social media icons appear in a horizontal row with consistent spacing. A prominent blue button for cookie settings anchors the right side. Legal links and copyright occupy the bottom edge in smaller text.

- Anatomy: Category columns, social icons, cookie button, legal links, copyright
- Surface and text color: Muted gray background with black text, blue button with white text
- Typography: Label token for category headers, body token for links
- Shape: Button with minimal rounding
- Spacing: Generous vertical padding, consistent column gutters
- Composition: Four-column link grid, social row, legal bar at bottom

## Responsive behavior

The grid system should adapt gracefully to narrower viewports. The multi-column statistic row should stack vertically on mobile, maintaining icon-value-label structure while occupying full width. Content cards should scroll horizontally or stack to single column, preserving image-aspect ratios. The navigation overlay should expand to full width on small screens, eliminating the partial-page visibility that works on desktop.

Typography should scale down proportionally: hero-display reduces to section-display size, body-large maintains readability at a reduced size. The four-column footer grid should collapse to two columns on tablet and single column on mobile, with category headers functioning as expandable sections if vertical space becomes constrained.

The yellow accent underlines should remain visible at all sizes, serving as consistent interactive indicators. Photography should maintain prominence even as layouts compress, prioritizing visual storytelling over text density on small screens.

## Practical implementation guidance

### Preserve
- The strict grid alignment with visible vertical rules on desktop
- The deep blue as the dominant brand color, not merely an accent
- The single-type-family approach with weight-based hierarchy
- The documentary photography style showing people in technical environments
- The minimal yellow accent application as thin horizontal rules only
- The effectively sharp corners and minimal rounding on all components
- The generous section spacing that allows content to breathe

### Avoid
- Introducing additional accent colors beyond blue, yellow, and neutrals
- Applying significant border radius to buttons, cards, or images
- Using decorative gradients or shadows for depth
- Replacing line icons with filled or illustrative alternatives
- Condensing vertical spacing to fit more content above the fold
- Applying the yellow accent to large areas or text blocks

### Recommended build order
1. Establish the grid system with visible column rules for development reference
2. Implement the type scale with all three weights of the grotesk family
3. Build the navigation overlay with its fixed positioning and category structure
4. Create the hero section with asymmetric text-image composition
5. Develop statistic blocks with icon integration and horizontal distribution
6. Construct content cards for immersive blue sections
7. Assemble the footer with its four-column link grid and cookie button

### Accessibility
- Ensure sufficient contrast between blue text and white backgrounds (the deep blue meets WCAG AA for large text but should be verified at body sizes)
- Provide visible focus indicators on all interactive elements, using the yellow accent or an outline treatment
- Maintain keyboard navigation order through the overlay menu that matches visual hierarchy
- Add appropriate aria labels to icon-only controls in the header and statistic blocks
- Ensure the cookie settings button remains discoverable and actionable at all viewport sizes
- Consider reducing motion for users who prefer it, particularly for any overlay transitions

## Scope note

This guide covers the ASML corporate website's public-facing pages including the "at a glance" company overview and homepage surfaces. It does not include interior product pages, investor relations data presentations, or the CustomerNet and SupplierNet portal interfaces. Motion behavior, hover states, and mobile-specific layouts are not documented from the available material. Measurements are practical adaptation targets.

## More website design guides

[Browse website design guides by pattern and website](/design-guides).