Siemens Industrial Experience Design System

Overview

Siemens Industrial Experience (iX) presents a commanding visual identity rooted in industrial precision and digital clarity. The system unfolds against an abyssal navy canvas ({colors.canvas} — #000028) that absorbs ambient light, allowing content to emerge with theatrical presence. This near-black foundation isn't merely aesthetic—it's a deliberate choice that amplifies the brand's signature voltage: a brilliant cyan ({colors.primary} — #00ccoli) that pulses through interactive elements, icon containers, and critical CTAs like electrical current through copper wiring.

The typographic voice belongs entirely to Siemens Sans, a proprietary grotesque engineered for technical legibility across screens ranging from control-room dashboards to mobile field devices. The typeface carries no decorative flourishes; its strength lies in neutral geometry and exceptional readability at every scale. Hierarchy emerges through size differentiation rather than weight manipulation—the system trusts scale over boldness, reserving {typography.title-md} weight 700 for modal titles and labels while letting display headings remain at weight 400, their authority derived from sheer dimension.

Shape language reveals an interesting duality: most interactive surfaces employ a modest {rounded.md} (6px) radius that feels engineered rather than decorated, while call-to-action buttons embrace an aggressive {rounded.lg} (100px) pill geometry that signals "actionable" at a glance. The iX logo mark itself sits inside a subtly squared container ({rounded.sm} — 2px), anchoring the brand's technical identity against the softer UI chrome.

Two distinct sub-systems operate within this framework: the documentation shell (navigation, search, versioning, code examples) and the marketing overlay (hero bands, feature lists, consent modals). Both share the same tokens but deploy them with different density intentions—the documentation surface breathes with {spacing.xl} (24px) gutters while marketing moments command {spacing.section-lg} (80px) vertical rhythm.

Key Characteristics

• Deep navy canvas ({colors.canvas}) creates maximum contrast for cyan brand voltage ({colors.primary})
• Siemens Sans serves as the sole typeface across all roles, from {typography.display-xl} at 56px down to {typography.caption} at 13px
• Pill-shaped CTAs ({rounded.lg} — 100px) distinguish actionable elements from informational surfaces using {rounded.md} (6px)
• Modal system employs elevated navy ({colors.surface-modal}) rather than pure black to create depth layering against the canvas
• Feature lists use checkmarks in {colors.primary} to reinforce brand presence in non-interactive contexts
• Search inputs maintain transparent backgrounds with {colors.hairline} borders, preserving the immersive dark environment
• Spacing follows a 4-based progression from {spacing.xxs} (4px) micro-interactions to {spacing.section-lg} (80px) section breaks
• Shadow system is restrained—only two elevations exist: {extensions.shadows.sm} for subtle separation and {extensions.shadows.lg} for modal drama

Colors

Brand & Accent

• Primary ({colors.primary} — #00cccc): The signature cyan that powers all interactive elements—buttons, links, icon fills, and status indicators. This is the brand's electrical current.
• Primary Hover ({colors.primary-hover} — #00b3b3): Slightly darkened cyan for hover states on buttons and links, providing tactile feedback without abandoning the hue.
• Primary Active ({colors.primary-active} — #009999): Pressed-state variant, notably deeper, used when users click or tap primary actions.
• Primary Disabled ({colors.primary-disabled} — #006666): Significantly desaturated and darkened cyan for disabled button states, maintaining hue recognition while signaling inactivity.

Surface

• Canvas ({colors.canvas} — #000028): The foundational deep navy that coats the entire viewport. Not pure black—this blue-tinted darkness provides warmth and distinguishes the brand from generic dark modes.
• Surface ({colors.surface} — #242526): A raised dark gray used for card-like containers, code blocks, or any element requiring subtle elevation from the canvas.
• Surface Elevated ({colors.surface-elevated} — #40405e): Medium gray-blue for dropdown panels, tooltips, or secondary containers needing clear separation.
• Surface Modal ({colors.surface-modal} — #001a3d): A lighter navy specifically for modal backdrops, creating perceptible depth when overlaid on the canvas without breaking the dark immersion.

Text & Ink

• Ink ({colors.ink} — #ffffff): Pure white for primary headlines, navigation text, and any content requiring maximum contrast and attention.
• Body ({colors.body} — #f5f6f7): Near-white for extended reading content—modal paragraphs, descriptions, and body copy where pure white would feel too harsh.
• Muted ({colors.muted} — #b7c0c7): Mid-gray for secondary information—feature list items, metadata, timestamps, and supporting text.
• Muted Soft ({colors.muted-soft} — #b3b3be): Slightly cooler gray variant used for large decorative text like the hero headline, where visibility matters but dominance doesn't.
• On Primary ({colors.on-primary} — #ffffff): White text guaranteed to pass WCAG AA against the cyan primary background.
• On Dark ({colors.on-dark} — #ffffff): White text for any dark-surface context, functionally identical to Ink but semantically distinct for dark-mode usage.

Hairlines & Borders

• Hairline ({colors.hairline} — rgba(128, 126, 163, 0.8)): The primary border color—a semi-transparent lavender-gray that defines search inputs, focus rings, and container edges without harshness.
• Border Subtle ({colors.border-subtle} — rgba(128, 126, 163, 0.4)): Faint borders for dividers between list items or subtle containment lines.
• Border Strong ({colors.border-strong} — #40405e): Opaque gray-blue for emphasized boundaries—card edges, modal frames, or structural dividers.

Semantic

• Error ({colors.error} — #ff4d4f): Red for validation failures, destructive actions, and system alerts.
• Success ({colors.success} — #52c41a): Green for confirmation states, completed operations, and positive indicators.
• Warning ({colors.warning} — #faad14): Amber/yellow for cautionary messages and attention-required states.
• Info ({colors.info} — #00cccc): Cyan (matching primary) for informational notices and tips.
• Link ({colors.link} — #00cccc): Interactive text links inherit the primary cyan, maintaining brand consistency in content.
• Link Active ({colors.link-active} — #00e6e6): Brightened cyan for active/focused link states.

Typography

Font Family

The entire Siemens Industrial Experience system runs on Siemens Sans, a proprietary grotesque sans-serif typeface engineered specifically for industrial and technical applications. The font stack declares "Siemens Sans", Arial, Helvetica, sans-serif as its fallback chain, ensuring graceful degradation to system fonts if the custom typeface fails to load. Four font-face declarations are served from Siemens' CDN covering Roman (400), Italic (400), Bold (700), and BoldItalic (700) cuts—all with font-display: swap to minimize layout shift during loading. There is no serif or monospace role in this system; even code examples appear to use the same sans-serif family.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 56px | 400 | 1.1 | -0.02em | Hero headlines, page titles | | {typography.display-lg} | 36px | 400 | 1.2 | -0.01em | Section headers, major headings | | {typography.title-md} | 22px | 700 | 1.3 | 0 | Modal titles, card headers, labels | | {typography.body-md} | 16px | 400 | 1.65 | 0 | Paragraphs, body copy, descriptions | | {typography.body-sm} | 14px | 400 | 1.5 | 0 | Feature lists, captions, secondary text | | {typography.caption} | 13px | 400 | 1.4 | 0 | Version badges, metadata, tiny labels | | {typography.button} | 15px | 700 | 1.3 | 0.02em | Button labels, CTA text | | {typography.label-md} | 14px | 700 | 1.4 | 0.01em | Navigation logo, section labels | | {typography.nav-item} | 14px | 400 | 1.5 | 0 | Navigation links, menu items |

Principles

The typography system exhibits remarkable restraint in weight usage—a defining characteristic of industrial design language. Only two weights ever appear: 400 (Roman) for everything except titles and buttons, which receive 700 (Bold). You will never encounter a 500, 600, or 800 weight in this system. This binary weight distribution forces hierarchy to emerge through scale alone: the 56px {typography.display-xl} remains regular weight because its size commands authority without shouting.

Letter-spacing receives surgical application: display roles get slight negative tracking (-0.02em at XL, -0.01em at LG) to tighten optically large characters, while buttons receive slight positive tracking (0.02em) to improve readability of uppercase-leaning label text at smaller sizes. Body text maintains normal (0) letter-spacing, trusting the typeface's native spacing.

Line heights are deliberately generous—1.65 for body text ensures comfortable reading even on lower-resolution industrial displays. The dark canvas demands extra breathing room between lines to prevent the "wall of text" effect common in dark-mode interfaces.

A signature typographic moment occurs in the hero section: the "Siemens Industrial Experience" headline renders in {colors.muted-soft} (gray-white) rather than pure white, creating a ghostly, monumental presence that recedes visually until the user's eye settles on it—then the cyan iX icon and CTA button snap forward as the true focal points.

Note on Font Substitutes

Siemens Sans is a proprietary typeface not available on Google Fonts or open-source repositories. For implementation without access to the licensed font, substitute with Inter (Google Fonts) as the closest match in geometric structure, x-height, and neutral personality. Inter's 400 and 700 weights map directly to Siemens Sans Roman and Bold. Define CSS variables as follows:

:root {
  --font-sans: 'Inter', 'Siemens Sans', Arial, Helvetica, sans-serif;
}

If Inter feels too geometric, IBM Plex Sans offers a more technical alternative that aligns with the industrial aesthetic. Avoid substituting with system-ui or San Francisco—the character width differences will break layouts designed around Siemens Sans metrics.

Layout

Spacing System

• Base unit: 4px (the atomic increment from which all spacing derives).

• Tokens:

  • {spacing.xxs} (4px) — icon internal padding, micro-gaps between inline elements
  • {spacing.xs} (5px) — tight spacing within compact controls
  • {spacing.sm} (8px) — gaps between related elements, icon-button margins
  • {spacing.md} (12px) — standard gap between form fields, list item padding
  • {spacing.base} (16px) — card internal padding, component margins
  • {spacing.lg} (20px) — modal internal spacing, section sub-divisions
  • {spacing.xl} (24px) — major component separation, footer padding
  • {spacing.xxl} (30px) — large vertical rhythm units
  • {spacing.section-sm} (32px) — minor section breaks
  • {spacing.section} (40px) — standard section vertical padding
  • {spacing.section-lg} (80px) — hero-level vertical breathing room

• Section padding (vertical): {spacing.section-lg} (80px) — used in the {component.hero-band} to create cinematic presence above and below the headline block.

• Card internal padding: Components like {component.modal-surface} use {spacing.xl} (24px) horizontal with {spacing.lg} (20px) bottom offset for footer separation.

• Gutters: The main content container appears to use {spacing.xl} (24px) lateral gutters within a max-width constraint, though the exact grid system requires additional viewport analysis.

Grid & Container

• Max content width: The navigation bar constrains to approximately 1440px width, centered within the viewport. Content below likely follows similar constraints.
• Editorial vs. marketplace density: This system leans editorial-airy despite being a developer/design tool. The dark canvas invites spacious treatment—text columns don't exceed 650px readable width, and the hero section uses a two-column layout (text left, features right) with significant whitespace between them.
• Grid behaviors at desktop: The visible layout suggests a 12-column foundational grid with the hero occupying roughly a 7+5 split (headline column wider than features). The feature list on the right aligns to its own left edge, creating asymmetric balance.
• Hero column splits: Left column (~60%) carries the iX icon + headline + subhead + CTA; right column (~40%) holds the feature checklist with cyan checkmarks. A clear visual axis separates them around the 60% horizontal mark.

Whitespace Philosophy

The Siemens IX system practices generous negative space as a luxury signal. On a dark canvas, whitespace isn't empty—it's atmospheric. The system refuses to pack information densely; instead, it gives each element room to glow (literally, given the cyan accents). This is not a dashboard-crunching utilitarian layout—it's a showcase surface where the design system itself is the product being sold. Padding is never stingy; if a component feels cramped, the answer is always more spacing, not smaller type.

Header Architecture

┌──────────────────────────────────────────────────────────────────────────────┐
│ [SIEMENS]   Home  Guidelines  Components  Icons  Styles   [Version 5 ▾] [🔍] │
│                                          [Search...]  Blog  Support  [App] [⚙] [◐]│
└──────────────────────────────────────────────────────────────────────────────┘
                                       ↑ max-width: 1440px centered

The top navigation uses a flexbox layout with: logo far-left, primary navigation center-left, version dropdown and search center-right, utility links and icon buttons far-right. Height is fixed at {component.top-nav} (56px). Background is {colors.canvas} with no bottom border—the immersion is total.

Hero Section

┌──────────────────────────────────────────────────────────────────────────────┐
│                                                                              │
│  ┌─────┐                                                                     │
│  │ iX  │    Siemens Industrial Experience                                    │
│  └─────┘    [Subheading paragraph text describing the design system...]       │
│                                                                              │
│  ┌──────────────────┐     ✓ Open-source community contributions welcome      │
│  │ → Getting started│     ✓ Web-based system requiring no installation      │
│  └──────────────────┘     ✓ Shape your own corporate design with theming    │
│                            ✓ Designed for complex UI and Data Analytics      │
│                            ✓ Delivered as framework-agnostic                 │
│                            ✓ Timeless visual design with intuitive UX        │
│                            ✓ Built by Siemens UX/UI experts                  │
│                                                                              │
└──────────────────────────────────────────────────────────────────────────────┘

The iX icon box ({component.ix-icon-box}) is a 96×96px square with 2px radius, filled with {colors.primary}, containing "iX" in white at display scale. Below it cascades the headline in muted-soft gray, body copy in muted gray, then the pill-shaped {component.button-primary} "Getting started" CTA. To the right, a vertically-stacked feature list uses {colors.primary} checkmarks ({component.feature-checkmark}) as bullet points.

Cookie Consent Modal

┌──────────────────────────────────────────────────────────────────┐
│                                                                  │
│   We value your privacy                                         │
│                                                                  │
│   By clicking "Accept All Cookies", you agree to the storing... │
│   ...navigation, analyze site usage, and assist in our marketing │
│   ...performance efforts. You may withdraw your consent...      │
│                                                                  │
│   Cookie Notice    Manage Preferences                           │
│                                                                  │
│   ┌─────────────────┐  ┌─────────────────────┐                   │
│   │ Reject Cookies  │  │ Accept All Cookies  │                   │
│   └─────────────────┘  └─────────────────────┘                   │
│                                                                  │
└──────────────────────────────────────────────────────────────────┘
         ↑ modal overlay (canvas @ 75% opacity)

The modal ({component.modal-surface}) uses {colors.surface-modal} (lighter navy) with sharp {rounded.sm} corners (2px), creating a distinctly "windowed" feel against the darker canvas beneath. Two equal-width pill buttons dominate the footer area. Ghost-style links sit above them for secondary actions.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 (Flat) | No shadow, direct on canvas | Navigation bar, hero band, footer | | 1 (Hairline) | 1px {colors.hairline} border | Search input, focus rings | | 2 (Soft raise) | {extensions.shadows.sm} — 0 1px 2px rgba(0,0,0,0.1) | Cards, dropdown panels | | 3 (Modal) | {extensions.shadows.lg} — 0 10px 20px rgba(0,0,0,0.5) + overlay | Consent modals, dialogs | | 4 (Focus ring) | 2px {colors.primary} outline offset 2px | Keyboard focus states on interactive elements |

The elevation philosophy is layered but restrained. Unlike material design's paper-stack metaphor, Siemens IX treats depth as functional separation rather than decorative simulation. The dark canvas naturally creates perceived depth—lighter surfaces (like {colors.surface-modal}) appear to float forward without requiring heavy shadows. When shadows do appear (modals), they're dramatic and opaque (0.5 alpha), creating clear z-index separation. The system avoids the "floating card" aesthetic common in light-mode SaaS products; here, depth is earned through value contrast and occasional shadow drama, not ubiquitous elevation.

Focus rings merit special attention: they use the brand cyan ({colors.primary}) rather than default browser blue, ensuring keyboard users experience the same brand coherence as mouse users. The ring offsets 2px from the element edge to avoid layout shift on focus.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 2px | iX icon box, modal containers, technical/chiseled surfaces | | {rounded.DEFAULT} | 6px | Default radius for cards, inputs, general containers | | {rounded.md} | 6px | Search inputs, button-ghost containers, form fields | | {rounded.lg} | 100px | Primary/secondary CTAs, pill-shaped buttons | | {rounded.pill} | 100px | Alias for lg—fully rounded ends | | {rounded.circle} | 50% | Icon buttons (GitHub, theme toggle) | | {rounded.full} | 9999px | Avatar circles, badge pills |

The shape vocabulary is intentionally limited to three practical radii plus circular variants. The 2px radius signals "technical/container" (logo marks, modals); 6px signals "UI element" (inputs, cards); 100px signals "action" (buttons). This tripartite system allows developers to make radius decisions without consulting a dense scale—if it's clickable and primary, it's 100px. If it holds content, it's 6px. If it's branding infrastructure, it's 2px.

Photography Geometry

No significant photography is present in the analyzed viewport. The system appears illustration-free and photo-free in its hero treatment, relying instead on typography, the iX logomark, and structured text lists to communicate value. Should imagery be added in other sections, the shape system suggests using {rounded.md} (6px) for content images and {rounded.circle} for avatars or thumbnail portraits.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.button-primary-active}, {component.search-input-focus}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — The workhorse CTA rendered in {colors.primary} (cyan) with white text ({colors.on-primary}). Uses {typography.button} at 15px weight 700 with slight positive letter-spacing (0.02em) for impact. Fully pill-shaped at {rounded.lg} (100px) with generous {spacing.lg} horizontal (32px) and {spacing.md} vertical (12px) padding. Appears in the hero section ("Getting started") and cookie modal ("Reject Cookies", "Accept All Cookies"). State variants: {component.button-primary-hover} darkens to {colors.primary-hover}, {component.button-primary-active} presses to {colors.primary-active}.

{component.button-secondary} — Transparent-background button with {colors.primary} text and a thin hairline border (implied by the secondary button pattern). Same dimensions and typography as primary. Used for "Manage Preferences" style secondary actions in modals.

{component.button-ghost} — Minimal text-only button with transparent background, {colors.link} colored text at {typography.body-sm} scale. Used for "Cookie Notice" style tertiary links. Small padding ({spacing.xs} {spacing.sm}) keeps it compact beside larger actions.

{component.icon-button} — Circular ({rounded.circle} — 50%) transparent button housing SVG icons (GitHub logo, sun/moon theme toggle). Size constrained to 36×44px for touch targets. No background fill—icons render in {colors.ink} (white) via currentColor.

Cards & Containers

{component.modal-surface} — The cookie consent dialog container. Background {colors.surface-modal} (#001a3d)—a lighter navy that floats visibly above the canvas. Sharp {rounded.sm} (2px) corners give it a technical, windowed feeling (distinct from the softer UI elements). Internal padding {spacing.xl} (24px) on sides and top, with {spacing.lg} (20px) top-padding on the footer area. Casts {extensions.shadows.lg} for dramatic elevation. Contains {component.modal-title}, {component.modal-body}, ghost buttons, and primary buttons.

{component.modal-overlay} — The backdrop behind modals. Semi-transparent {colors.canvas} at ~75% opacity, dimming the underlying content without obscuring it entirely. Covers full viewport with position: fixed.

{component.ix-icon-box} — The signature brand mark container. 96×96px square with {rounded.sm} (2px) corners, filled solidly with {colors.primary} (cyan). Houses the "iX" wordmark in {colors.on-primary} (white) at {typography.display-xl} scale. This is the visual anchor of the entire hero section—an unmistakable brand beacon on the dark field.

{component.hero-band} — The full-viewport hero section. Background matches {colors.canvas} (seamless with nav). Vertical padding {spacing.section-lg} (80px) creates cinema-scale breathing room. Contains the two-column layout (icon + headline + CTA left, feature list right).

{component.footer} — Page footer (partially visible/implied). Background {colors.canvas}, text {colors.muted-soft} at caption scale. Generous {spacing.xl} (24px+) padding. Likely contains copyright, links, and legal text.

Inputs & Forms

{component.search-input} — The detached search field in the navigation bar. Transparent background (no fill—shows through to canvas) with 1px {colors.hairline} border in semi-transparent lavender-gray. {rounded.md} (6px) corners soften the rectangle. Internal padding {spacing.sm} (8px) left (for search icon) and {spacing.base} (16px) right. Text renders in {colors.ink} at {typography.body-md}. Height approximately 40px. On focus, the border likely transitions to {colors.primary} (cyan)—implement as {component.search-input-focus}.

Navigation

{component.top-nav} — Fixed-top navigation bar spanning full viewport width. Background {colors.canvas} with no border or shadow—it merges seamlessly with the page. Height 56px. Contains: logo (left), nav links (center-left), version dropdown + search (center-right), utilities + icons (right). Typography {typography.nav-item} at 14px weight 400. Max-width 1440px centered internally.

{component.nav-logo-text} — "SIEMENS" wordmark in the nav bar. {typography.label-md} (14px weight 700) in {colors.ink} (white). Uppercase, widely tracked.

{component.nav-link} — Navigation menu items ("Home", "Guidelines", "Components", "Icons", "Styles"). Transparent background, {colors.ink} text, {typography.nav-item} scale. Hover state likely underlines or shifts to {colors.primary}.

{component.version-dropdown} — "Version 5 ▾" selector. {typography.caption} (13px) in {colors.muted} gray. Indicates the design system version being viewed.

Signature Components

{component.hero-headline} — "Siemens Industrial Experience" displayed at {typography.display-xl} (56px) in {colors.muted-soft} (gray-white—not pure white). This deliberate de-emphasis makes the headline feel monumental and atmospheric rather than shouty. Line height 1.1 keeps lines tight and imposing.

{component.hero-subhead} — Descriptive paragraph below the headline. {typography.body-md} (16px) in {colors.muted} (mid-gray). Explains the design system's purpose. Max-width likely constrained to ~600px for readability.

{component.feature-list} — Right-column checklist in the hero. Each item is {typography.body-sm} (14px) in {colors.muted}. Preceded by a {component.feature-checkmark}.

{component.feature-checkmark} — Small checkmark/icon (✓) rendered in {colors.primary} (cyan). Size approximately 16px. Aligned to the baseline of each feature list item. These cyan dots create a rhythmic visual pulse down the list, reinforcing brand presence in a non-interactive context.

{component.modal-title} — "We value your privacy" heading inside the cookie modal. {typography.title-md} (22px weight 700) in {colors.ink} (white). Bold weight appropriate for modal titling hierarchy.

{component.modal-body} — Legal/explanatory text in the cookie consent. {typography.body-md} (16px) in {colors.body} (near-white #f5f6f7). Generous line height (1.65) for readability of dense legal language.

{component.modal-footer} — Bottom area of the modal containing action buttons. Top padding {spacing.lg} (20px) separates it from body text. Houses two {component.button-primary} instances side-by-side with a gap (likely {spacing.md} — 12px).

Do's and Don'ts

Do

• Do use {colors.primary} (cyan) sparingly and intentionally—reserve it for interactive elements, brand marks, and one or two accent moments per screen. Overuse dilutes its electrical charge.
• Do let {typography.display-xl} remain weight 400. The 56px scale provides authority; adding bold would be visually aggressive on the dark canvas.
• Do apply {rounded.lg} (100px) to all primary and secondary action buttons. The pill shape is the universal signifier of "clickable" in this system.
• Do use {colors.surface-modal} (#001a3d) for any modal or dialog background. It's noticeably lighter than {colors.canvas}, creating natural depth without shadows.
• Do maintain {spacing.section-lg} (80px) vertical padding in hero and major section bands. The dark canvas needs this much room to breathe.
• Do render feature list checkmarks in {colors.primary}. Even non-interactive brand moments should carry the cyan signature.
• Do use {colors.hairline} (semi-transparent lavender-gray) for input borders and dividers. Solid borders look harsh against the deep navy.
• Do keep {component.search-input} background transparent. Filled input boxes would break the immersive dark environment.
• Do apply {rounded.sm} (2px) to the iX icon box and modal containers. These "technical" surfaces should feel sharper than everyday UI elements.
• Do use {typography.button} (15px weight 700) with 0.02em letter-spacing for all button labels. The slight expansion improves legibility of short action phrases.

Don't

• Don't substitute {colors.link} (cyan) for {colors.ink} (white) in body text. Links should be rare and obvious; body copy remains white/near-white.
• Don't use {rounded.lg} (100px) on cards, inputs, or non-button elements. The pill shape loses meaning if applied universally.
• Don't add gradient backdrops or noise textures to {colors.canvas}. The deep navy is meant to be flat and absorptive—let content provide texture.
• Don't drop shadows on cards or navigation elements (use only {extensions.shadows.lg} for modals). This system prefers flat layering over simulated depth.
• Don't introduce new font families. Siemens Sans covers every role from display to caption. Adding a second typeface fractures the industrial voice.
• Don't use font weights other than 400 and 700. The system explicitly avoids the 500/600 range—hierarchy comes from size, not intermediate weights.
• Don't make modals the same color as {colors.canvas}. They must use {colors.surface-modal} to be perceivable as overlapping layers.
• Don't reduce spacing below {spacing.md} (12px) between distinct interactive elements. Touch targets and visual clarity demand this minimum.
• Don't render the hero headline in pure {colors.ink} (white). The {colors.muted-soft} gray creates sophisticated atmospheric depth.
• Don't forget to define focus rings in {colors.primary} (cyan) for accessibility. Keyboard users deserve the brand experience too.

Motion & Animation

Transition Tokens

/* Color transitions — used for hover states, theme toggles, mode switches */
--transition-color: color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1), 
                     background-color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1);

/* Opacity transitions — used for fade-in/fade-out (modals, toasts, overlays) */
--transition-opacity: opacity 0.2s ease-out;

/* Background-only transition — used for button state changes */
--transition-background: background 0.2s ease;

/* Catch-all transition — fallback for properties not specifically targeted */
--transition-all: all 0.2s cubic-bezier(0.08, 0.52, 0.52, 1);

Keyframe Animations

No keyframe animations were detected in the extracted CSS data. The system appears to rely entirely on CSS transitions for motion, with no scroll-triggered, looping, or entrance animations in the analyzed viewport. Any marquee counters, loading spinners, or decorative animations present on other pages would require additional analysis.

Interaction Patterns

• Button color shifts: Primary buttons transition background-color from {colors.primary} → {colors.primary-hover} → {colors.primary-active} using --transition-color (200ms, custom cubic-bezier with deceleration curve).
• Modal fade-in: The cookie consent modal and its overlay likely use --transition-opacity (200ms ease-out) to fade from opacity: 0 → opacity: 1 on mount.
• Theme toggle: The dark/light mode switch (sun/moon icon in nav) probably triggers a full-page color transition via --transition-color, smoothly remapping all CSS custom properties.
• Link underline reveal: Navigation links and text links may use a --transition-all or transform-based transition to reveal underlines on hover (not explicitly extractable from static CSS).
• Search input focus: Border-color transition from {colors.hairline} → {colors.primary} using --transition-color, potentially accompanied by a subtle box-shadow glow.
• Dropdown expand: The "Version 5 ▾" dropdown likely uses opacity + transform transitions for its panel reveal.
• Scroll behavior: The fixed-top {component.top-bar} may acquire a subtle background shadow or border on scroll (requires scroll-event observation to confirm).

The motion philosophy is subtle and functional—transitions serve to clarify state changes rather than entertain. The 200ms duration is snappy enough to feel responsive, slow enough to perceive. The custom easing cubic-bezier(0.08, 0.52, 0.52, 1) has a slight initial acceleration followed by smooth deceleration, giving interactions a "quality" feel without being bouncy or playful (which would undermine the industrial tone).

Imagery Style

• The analyzed viewport contains no photography or illustration—the design system's landing page relies purely on typography, the iX logomark, structured lists, and UI components to communicate value.
• The iX logomark (cyan square with "iX" white text) functions as the primary visual asset—a geometric, iconic representation of the brand that works at any scale from favicon to hero display.
• Color treatment for any future imagery should favor subtle desaturation or duotone effects (dark navy + cyan) to integrate with the canvas without competing. High-saturation photos would clash with the controlled palette.
• Illustration style (if added elsewhere in the system) should be technical/diagrammatic—wireframes, node graphs, system architecture diagrams—rather than organic or character-driven. The Siemens industrial voice demands precision imagery.
• Icon imagery is exclusively stroke-based line art (see Icon System below), rendered in currentColor for flexibility.
• Background imagery is absent; the system trusts its solid {colors.canvas} to provide atmosphere. Avoid gradients, patterns, or photographic backgrounds—they would weaken the immersive dark environment.

Icon System

• Library: Custom SVG icons (no detected dependency on Lucide, Heroicons, Material Icons, or Bootstrap Icons). Icons are likely authored as inline SVGs or imported from a private Siemens icon set.
• Specific icons observed:
  • Search magnifying glass (in {component.search-input})
  • Chevron/down arrow (in {component.version-dropdown})
  • GitHub/octocat logo (in {component.icon-button} utility area)
  • Sun/moon or theme toggle icon (in {component.icon-button} utility area)
  • Arrow right (→) glyph (inside {component.button-primary} "Getting started")
  • Checkmark (✓) (in {component.feature-checkmark} list items)
• Treatment: Stroke-based line icons (not filled), rendered via currentColor to inherit parent text color. Most appear to use 1.5px or 2px stroke width for visibility on dark backgrounds.
• Size alignment:
  • Navigation/utility icons: 18–20px (within 36–44px touch targets)
  • Feature checkmarks: 16px (inline with {typography.body-sm} text)
  • Button glyphs (arrow): 16–18px (inline with {typography.button} text)
  • Search icon: 16px (inside input padding)
• Visual consistency: All icons share uniform stroke weight and geometric construction (likely based on a 24×24px grid). Corner radii on icon paths appear to match the system's {rounded.sm} or {rounded.md} values.

Recommended Frontend Stack

- Framework:      Next.js 14+ or Astro (SSG-friendly for documentation sites)
- Styling:        CSS Modules or Tailwind CSS (with custom theme extension for iX tokens)
- Fonts:          Siemens Sans via CDN (@font-face declarations provided), 
                  fallback to Inter (Google Fonts) for development without license
- Animation:      Vanilla CSS transitions (no library needed—system uses only transitions)
- Icons:          Custom SVG components (inline React/Vue/Svelte components per framework)
- Component lib:  Custom components (no shadcn/Radix dependency detected—build from spec)
- Documentation:  Docusaurus (the site structure strongly suggests Docusaurus underpinning,
                  given the navbar classes, search integration, and version dropdown pattern)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 640px | Single-column layout, hamburger nav, stacked modal buttons, reduced hero padding | | Tablet | 640–1024px | Two-column hero begins (icon+text | features), nav links may collapse to menu | | Desktop | 1024–1440px | Full navigation visible, optimal hero two-column split, max-content-width container active | | Wide | > 1440px | Content centers with increasing lateral margins, no layout stretch beyond 1440px |

Touch Targets

• {component.button-primary}: ~56px height × variable width (min 120px recommended) — exceeds WCAG AAA 44×44px minimum ✓
• {component.search-input}: 40px height × full available width — falls short of 44px; recommend increasing to 44–48px on touch devices
• {component.icon-button}: 36×36px (or 44×44px if including invisible hit area) — meets minimum if padded to 44px ✓
• {component.button-ghost}: ~32px height (estimated from font-size + padding) — may fall short; ensure 44px min on mobile

Collapsing Strategy

• Navigation: At tablet/mobile widths, the horizontal nav links ("Home", "Guidelines", etc.) collapse into a hamburger menu (.navbar__toggle class detected in CSS indicates a toggle mechanism). The Siemens logo remains visible; version dropdown and search may move into the menu or persist as icons.
• Hero columns: The two-column hero (icon+headline left, features right) stacks vertically on mobile: iX icon → headline → subhead → CTA button → feature list. Column order preserved (content-first).
• Cookie modal: On narrow viewports, the modal's two side-by-side buttons ("Reject Cookies" / "Accept All Cookies") stack vertically, each taking full modal width. Modal width becomes ~90% viewport with {spacing.base} margin.
• Search input: May collapse to icon-only toggle on mobile, expanding to full input on tap/focus.
• Typography scaling: {typography.display-xl} may reduce to 36–40px on mobile to prevent excessive vertical scrolling. {typography.body-md} remains 16px (never below 16px for body copy).

Image Behavior

No responsive image behavior to document in the analyzed viewport. If hero illustrations or product screenshots exist on other pages, implement:

• Hero visuals: Scale down proportionally, maintain aspect ratio, never exceed container width.
• iX logomark: Reduce from 96px to 64–72px on mobile, keeping {rounded.sm} corners and {colors.primary} fill.
• Avatars/thumbnails (future): Maintain {rounded.circle} at all sizes; ensure 40px minimum for recognizability on touch devices.

Iteration Guide

1. Initialize with the exact token set from this DESIGN.md's YAML frontmatter. Every color, font size, radius, and spacing value must originate from a {section.token} reference—never hard-code a magic number that has a defined token equivalent.

2. Set up Siemens Sans via the provided @font-face URLs (or substitute Inter for development). Define --font-sans: 'Siemens Sans', Arial, Helvetica, sans-serif as a CSS custom property and reference it in all typography tokens.

3. Implement the dark-mode foundation first: Set background-color: {colors.canvas} (#000028) on <body>, set color: {colors.ink} (#ffffff) as the default text color. Every component builds on this base.

4. Build components in this order: (a) {component.top-nav} with all children, (b) {component.hero-band} with two-column grid, (c) {component.button-primary} and all state variants, (d) {component.modal-surface} with overlay, (e) {component.search-input}, (f) {component.footer}. Each component should be self-contained and accept token-driven props.

5. Add state variants (-hover, -active, -focus, -disabled) as separate CSS classes or variant props—never nest them inside the default component. Reference {component.button-primary-active} and {component.text-input-focus} patterns from the frontmatter.

6. Apply motion last: Once static layouts are correct, add the transition tokens from the Motion & Animation section. Start with --transition-color for all interactive elements, then --transition-opacity for modals/overlays. Never exceed 200ms duration.

7. Test contrast ratios: The dark canvas + white text combination easily passes WCAG AAA. However, verify {colors.muted} (#b7c0c7) on {colors.canvas} meets AA for body text (it should at 16px+). Check {colors.primary} (#00ccoli) on white for any inverted-context usage.

8. Run the linter: Execute npx @google/design.md lint DESIGN.md after any edits. Fix broken-ref (undefined token references), orphaned-tokens (defined but unused tokens), and contrast-ratio warnings before committing.

9. When in doubt about emphasis: Prefer larger type over bolder type (the system's display headings stay weight 400). Prefer {colors.primary} background over {colors.primary} text for CTAs. Prefer {rounded.lg} (pill) for actions, {rounded.md} (6px) for containers.

10. Respect the sub-system boundary: Documentation-shell components (nav, search, version dropdown, code blocks) should feel denser and more utilitarian. Marketing-overlay components (hero, modals, feature lists) should feel airier and more theatrical. Both share the same tokens but apply them with different generosity.

Font Setup

For local development without access to Siemens' CDN-hosted fonts:

<!-- Google Fonts: Inter as substitute for Siemens Sans -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

:root {
  --font-sans: 'Inter', 'Siemens Sans', Arial, Helvetica, sans-serif;
  
  /* Design system tokens */
  --color-canvas: #000028;
  --color-primary: #00cccc;
  /* ... map all frontmatter tokens to CSS custom properties ... */
}

All fontFamily values in the frontmatter reference "Siemens Sans", Arial, Helvetica, sans-serif. Replace the string literal with var(--font-sans) in your implementation for single-point-of-change management.

Known Gaps

• Hover state styling: Per the no-hover policy, all :hover pseudo-class styles are inferred rather than extracted. Implement hover as midpoint between default and active states (e.g., {colors.primary} → {colors.primary-hover} on hover).
• Loading/skeleton states: No loading indicators, skeleton screens, or spinner animations were visible in the screenshot. These require design decisions for data-fetching contexts (documentation search, API calls).
• Form validation states: Beyond {component.search-input-focus}, no error, warning, or success input states were extractable. Map to {colors.error}, {colors.warning}, {colors.success} tokens when implementing.
• Dashboard/authenticated surfaces: The analyzed page is the public landing/consent view. Authenticated dashboard views, data tables, or configuration panels may introduce new component types not captured here.
• Light mode tokens: While a theme toggle icon exists in the nav, no light-mode color values were extractable from this dark-mode snapshot. A full light-theme token set would require analyzing the toggled state or separate documentation.
• Mobile navigation drawer: The hamburger menu's expanded state (sidebar/drawer panel) was not visible. Its width, animation, and contents require additional specification.
• Code block styling: As a developer-focused design system, code syntax highlighting themes likely exist but weren't present in the above-fold content. These would need custom token definitions for keyword/comment/string colors.
• Exact modal dimensions: The cookie consent modal's width and max-width are estimated from screenshot proportions. Pixel-exact values may vary by ±10%.
• Accessibility focus-visible outlines: While mentioned in Elevation & Depth, the exact focus-ring specification (offset, width, whether it uses outline or box-shadow) is recommended rather than extracted from observable CSS.
• Print stylesheet: No print-specific styles were detectable. Dark-mode designs typically require print overrides (invert colors, remove backgrounds).