AtkinsRéalis

Overview

AtkinsRéalis is a world-class engineering services and nuclear organization that transforms infrastructure and energy systems through data-driven innovation. The design system embodies a "Bold Infrastructure Minimalism" aesthetic—combining vibrant accent colors (electric blue #007bff and lime-green #ccff00) against clean, professional surfaces to convey confidence, precision, and forward momentum. The brand personality is authoritative yet approachable: we speak in clear, measurable terms about complex engineering challenges, avoiding jargon while maintaining technical credibility. The visual language prioritizes clarity and impact, using high-contrast typography (Gamechanger for headlines, Bienvenue for body) and purposeful color blocking to guide users through critical information. Example sentence in brand voice: "We engineered the REM to move 100,000 passengers daily—connecting communities through precision infrastructure."

Colors

The color system is anchored by a primary blue (#007bff) used exclusively for interactive elements, CTAs, and focus states—this is the signature accent that commands attention on buttons, links, and hover states. The secondary gray (#6c757d) provides neutral support for metadata, disabled states, and secondary navigation. Tertiary yellow (#ffc107) serves as a warning/alert accent, while error red (#dc3545) flags critical issues. The surface stack progresses from pure white (#ffffff) for primary content areas through increasingly darker grays (#f8f9fa → #dee2e6) for container hierarchy and depth. On-surface text is a deep blue-gray (#192d38) for optimal readability at 16px body size. All interactive elements use a 2px solid border with matching background color; hover states transition the

Typography

The type system uses two distinct families to create visual hierarchy: Gamechanger (Medium and Bold weights) anchors headlines and display text with its geometric, modern character, while Bienvenue (Regular and Bold) handles body copy and UI labels with warm, professional clarity. Display text (65px, 500 weight) is reserved for hero headlines like "Performance With Purpose"; headline-lg (48px, 700 weight) for section titles; headline-md (36px, 500 weight) for subsections. Body-lg (18px, 400 weight) is used for introductory paragraphs and card descriptions, while body-md (16px, 400 weight) is the default for all body text and form inputs. Label-md (14px, 600 weight) is applied to button text and form labels; label-sm (12px, 500 weight) for metadata, timestamps, and secondary UI text. Letter

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px and 24px gutters on desktop, scaling to 16px gutters on tablet and 12px on mobile. The spacing scale is semantic: use lg spacing (40px) for major section separation, md spacing (24px) for component padding and card margins, sm spacing (12px) for internal component spacing, and xs spacing (4px) for micro-interactions like icon-to-text gaps. Hero sections occupy full viewport height with a 64px top padding (xl spacing) for breathing room below the fixed header. Card grids use 24px gaps (md spacing) and stack to single column below 768px. The container-max-width of 1280px ensures content never exceeds comfortable reading line-length; content areas within cards use md padding (24px) on all sides. Whitespace is gen

Elevation & Depth

Depth is achieved through a subtle shadow and border system rather than heavy drop-shadows. Level 1 (Base): flat surfaces with no shadow, 1px solid border at rgba(0,0,0,0.08). Level 2 (Standard Card): box-shadow: 0 4px 12px rgba(0,0,0,0.08), 1px solid border at rgba(0,0,0,0.12). Level 3 (Modal/Elevated): box-shadow: 0 16px 40px rgba(0,0,0,0.12), 1px solid border at rgba(0,0,0,0.15). Hover states on cards transition to Level 3 shadow over 200ms ease-in-out. Interactive elements (buttons, inputs) use no shadow by default; on focus, apply a 3px inset box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1) t

Shapes

The shape philosophy is "Architectural Precision"—favoring clean, right-angled corners with minimal rounding to reflect the brand's engineering heritage. Buttons and inputs use 4px border-radius (0.5rem / DEFAULT), creating a subtle softness without sacrificing geometric clarity. Cards and containers use 12px border-radius (0.75rem / md) for slightly more breathing room. Modals and elevated surfaces use 16px border-radius (1rem / lg) to signal elevation and importance. Full-width elements like badges and pills use 9999px border-radius (full) only when semantically appropriate (e.g., status bad

Components

Action Elements Buttons are the primary interaction pattern. All buttons use a 2px solid border matching their background color, 12px horizontal padding, and a minimum height of 48px to meet WCAG touch target guidelines. Primary buttons (#007bff on white) transition to primary-container (#3860be) on hover with a 200ms ease-in-out transition; the border color updates in tandem. Secondary buttons are transparent with a 2px primary-blue border; on hover, the background fills to surface-container-high (#dee2e6) while the border remains blue. Ghost buttons have no border or background; on hover, a subtle background (rgba(0, 123, 255, 0.08)) appears. All button text uses label-md typography (14px, 600 weight) and is center-aligned. Disabled buttons reduce opacity to 50% and remove pointer ev

Do's and Don'ts

**Do**

• Do use primary blue (#007bff) exclusively for interactive elements and CTAs—never use it for decorative backgrounds or body text.
• Do maintain 24px (md spacing) gutters between grid columns and 40px (lg spacing) between major sections to preserve visual breathing room.
• Do apply Gamechanger-Bold (700 weight) to all headline text and Bienvenue-Regular (400 weight) to body copy for consistent type hierarchy.
• Do use the full 2px solid border on all buttons and inputs; this is a signature detail that reinforces the architectural precision aesthetic.
• Do test all interactive elements with keyboard navigation and screen readers; focus states must be visible and meet 4.5:1 contrast minimum.

**Don't**

• Don't use border-radius > 1rem (16px) on primary buttons or inputs; this dilutes the precision aesthetic and reduces visual authority.
• Don't place small label text (label-sm, 12px) over busy photographic backgrounds without a text-shadow: 0 2px 4px rgba(0,0,0,0.15) for legibility.
• Don't mix Gamechanger and Bienvenue weights arbitrarily; reserve Gamechanger-Bold exclusively for headlines and Bienvenue-Bold only for form labels and button text.
• Don't use the secondary gray (#6c757d) for primary CTAs or interactive elements; it signals disabled or de-emphasized state and will confuse users.
• Don't apply shadows > 0 16px 40px rgba(0,0,0,0.12) on standard cards; this breaks the subtle elevation hierarchy and makes the interface feel heavy and cluttered.