Baker Hughes

Overview

Baker Hughes is a global energy technology leader transforming how the world powers itself through innovation, sustainability, and operational excellence. The design system embodies 'Industrial Precision Modernism'—a philosophy that marries the clean geometry and functional clarity of industrial design with contemporary digital aesthetics. The brand voice is authoritative yet approachable, speaking to both technical experts and business decision-makers with equal confidence. The UI evokes trust through consistent, measured interactions: every element has purpose, every color choice signals meaning, and every transition respects the user's cognitive load. The visual language celebrates the teal-green primary (#02a783) as the signature accent—a color that signals growth, sustainability, and forward momentum—against a refined neutral palette of light grays (#f8f8f8) and deep charcoals (#2d2d2d). Example sentence in brand voice: 'Our integrated portfolio of digital and energy solutions reduces operational complexity by 40%, freeing your team to focus on strategic growth.'

Colors

The color system is anchored in a vibrant, nature-inspired teal-green primary (#02a783) that appears on all interactive elements—buttons, links, focus states, and key data visualizations. This primary is paired with a sophisticated secondary green (#007d62) for supporting accents and secondary CTAs, creating a cohesive sustainability narrative. The tertiary accent (#3860be, a professional blue) is reserved for informational elements, charts, and tertiary actions, providing visual hierarchy without competing for attention. The surface stack uses a clean light gray foundation (#f8f8f8 for body, #ffffff for elevated surfaces) with carefully calibrated container variants: surface-container-high (#eefaf8) for hover states, surface-container-highest (#d0fbe9) for active/selected states, and surf

Typography

The typography system uses Poppins exclusively, a geometric sans-serif that balances technical clarity with contemporary warmth. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major announcements; Headline-lg (42px, 600 weight) anchors page sections and modal titles; Headline-md (28px, 600 weight) structures subsections and card headers. Body-lg (18px, 400 weight) is used for introductory paragraphs and callout text, while Body-md (16px, 400 weight) serves as the default body copy—set at a comfortable 24px line-height (1.5) for sustained reading. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, form labels, and navigation items, providing visual distinction without excessive weight. Label-sm (12px, 500 weight, 0.02em tracking) is rese

Layout

The layout system uses a 12-column responsive grid with a maximum container width of 1280px, ensuring content remains scannable and focused on desktop while adapting fluidly to tablet (896px) and mobile (320px) viewports. The gutter spacing is consistently 24px (md spacing unit), creating rhythm between columns and sections. Page sections are separated using lg spacing (40px) for major breaks (hero to content, content to footer) and md spacing (24px) for subsection transitions. The grid uses a fluid-to-fixed breakpoint strategy: below 768px, the grid collapses to 4 columns with reduced gutters (12px); at 768px and above, it expands to 12 columns at full gutter width. Container padding follows the spacing scale: 24px on desktop, 16px on tablet, 12px on mobile. White space is treated as a fi

Elevation & Depth

Depth in this system is achieved through subtle, layered shadows rather than color shifts or borders. The elevation scale uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for minimal lift on hover states and subtle UI elements; md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards, dropdowns, and modals; lg (0 8px 24px rgba(0, 0, 0, 0.12)) for floating action buttons, sticky headers, and top-level overlays. Cards at rest use md elevation; on hover, they transition to lg elevation over 200ms, signaling interactivity. Modals and overlays use lg elevation with a semi-transparent backdrop (rgb

Shapes

The shape philosophy is 'Measured Geometry'—sharp corners and minimal rounding that evoke industrial design and technical precision, paired with strategic use of full-radius elements for softer, more approachable interactions. Buttons use xl rounding (25px), creating a pill-shaped affordance that feels modern and inviting without sacrificing clarity. Cards and containers use DEFAULT rounding (3px), a subtle radius that softens hard edges while maintaining geometric rigor. Form inputs use DEFAULT rounding (3px) to align with card styling and create visual cohesion. Badges and tags use full roun

Components

Action Elements Buttons are the primary interaction mechanism and use the full-radius pill shape (25px) to signal affordance. Primary buttons use the teal-green primary (#02a783) background with white text (label-md, 600 weight), 15px horizontal padding, and 44px height for comfortable touch targets. On hover, the background transitions to primary-fixed-dim (#1aa785) over 200ms, providing immediate visual feedback. Secondary buttons use a white background (#ffffff) with a 1px primary-colored border and primary text, maintaining the same padding and height. Focus states add a 3px outline in primary color at 10% opacity (rgba(2, 167, 131, 0.1)), visible at 2px offset. Disabled buttons reduce opacity to 50% and remove pointer events. Ghost buttons (used in sparse contexts like table actio

Do's and Don'ts

**Do**

• Do use the teal-green primary (#02a783) exclusively for interactive elements—buttons, links, focus rings, and active states—to create a consistent, recognizable interaction language.
• Do maintain the 24px gutter spacing and 12-column grid structure across all breakpoints to ensure predictable, scannable layouts.
• Do apply the md elevation shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and containers; reserve lg elevation for modals and floating elements only.
• Do use Poppins 600 weight for all labels, buttons, and headlines; reserve 400 weight for body copy to maintain clear visual hierarchy.
• Do ensure all interactive elements maintain a minimum 44px × 44px touch target and include visible focus states (3px outline at 10% opacity) for keyboard navigation.
• Do transition all state changes (hover, focus, active) over 200ms using cubic-bezier easing to telegraph interactivity without feeling sluggish.

**Don't**

• Don't use rounded corners smaller than 2px (sm) on any UI element—the industrial precision aesthetic requires measured geometry, not sharp corners.
• Don't apply shadows to buttons or form inputs at rest; reserve elevation for containers and overlays only.
• Don't mix Poppins with other typefaces; the system uses Poppins exclusively to maintain visual cohesion and reduce cognitive load.
• Don't use the secondary green (#007d62) or tertiary blue (#3860be) for primary CTAs; reserve the teal-green primary (#02a783) for all main actions.
• Don't compress spacing below the sm unit (12px) in standard layouts; white space is a design feature, not a constraint.
• Don't apply gradients, patterns, or textures to backgrounds; the system uses flat, semantic colors to ensure consistent rendering and maintain the industrial precision aesthetic.