Aramco Digital Marketplace

Overview

Aramco Digital Marketplace is an enterprise-grade industrial IoT and connectivity platform designed for mission-critical operations in complex industrial environments. The design system embodies 'Technical Clarity'—a movement that prioritizes data legibility and operational confidence through clean typography, strategic color hierarchy, and purposeful white space. The visual language conveys authority and precision: users should feel they are interacting with a system built for high-stakes industrial decision-making, not a consumer product. The aesthetic is contemporary minimalism with industrial undertones—think aerospace engineering documentation meets modern SaaS, where every pixel serves operational clarity.

The brand voice is direct, confident, and solution-focused. Aramco Digital speaks to enterprise architects and operations teams with respect for their expertise and time. Vocabulary emphasizes capability ('mission-critical', 'sovereign network', 'deep coverage'), reliability ('approved', 'secure', 'scalable'), and outcomes ('industrial digitization', 'smart operations'). Never breathless or casual. Example sentence in brand voice: 'Our 450 MHz band delivers deep coverage in remote operations where standard networks fail—approved for mission-critical deployments.'

Colors

The color system is built on a dual-axis model: a vibrant, action-oriented primary green (#1eb56d) paired with a deep institutional blue (#003147), anchored by a secondary cyan (#26aae1) for secondary actions and status indicators. Primary green (#1eb56d) is the signature accent—used exclusively on primary CTAs ('Sign up'), key interactive states, and brand-forward moments. It conveys growth, operational readiness, and forward momentum. On-primary is pure white (#ffffff) for maximum contrast and legibility on small text (14px labels at 9px padding). Primary-container (#ddf4e9) provides a soft, low-saturation background for informational contexts, with on-primary-container (#0e172a) for readable body text. Secondary blue (#26aae1) supports secondary actions, link states, and data visualizat

Typography

The type system uses Funnel Display as the single typeface family across all scales, creating visual cohesion and reducing cognitive load. Display (56px, 600 weight, -0.02em letter-spacing) anchors hero sections and major page titles with commanding presence. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure content hierarchy with consistent -0.01em tracking to tighten letterforms at large sizes. Title-lg (20px, 600 weight) marks section headers and card titles. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) carry descriptive copy and explanatory text; the 28px line-height on body-lg ensures comfortable reading on dark backgrounds (hero overlays). Label-md (14px, 400 weight) and label-sm (12px, 400 weight) are used fo

Layout

The layout system uses a 12-column grid with a fixed max-width of 1280px, centered on viewport. Gutter spacing is 24px (xl token) between columns, creating a 1260px content area on desktop. Mobile breakpoints collapse to single-column with 16px side margins (lg token). Section separation uses lg spacing (16px) for minor breaks and 2xl spacing (32px) for major section transitions. The hero banner spans full-width with a 50% opacity dark overlay (rgba(0, 0, 0, 0.5)) over a photographic background, ensuring text legibility while maintaining visual impact. Card grids use 3-column layouts on desktop (md spacing between cards), 2-column on tablet, 1-column on mobile. Container padding follows the gutter rule: 24px on desktop, 16px on tablet, 12px on mobile. Whitespace is intentional—never less t

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle background color shifts, avoiding heavy drop shadows that would feel dated. Level 1 (Base): surface (#ffffff) with no shadow, used for primary content areas and cards at rest. Level 2 (Elevated): cards and modals use elevation.md (0 4px 6px rgba(0, 0, 0, 0.1)), creating a subtle lift that distinguishes interactive containers from the page background. Level 3 (Hover/Focus): on interaction, cards transition to elevation.lg (0 8px 32px rgba(0, 0, 0, 0.1)) with a 0.2s ease transition, signaling responsiveness. Input fields and form el

Shapes

The shape philosophy is 'Technical Precision'—rounded corners are used sparingly and purposefully, never exceeding 20px (lg token) except for full-circle avatars and badges (50%). Buttons use 8px (DEFAULT) border-radius, a subtle softening that feels modern without sacrificing visual weight. Cards and containers use 20px (lg token) for a more generous curve that signals approachability and content containment. Input fields and form elements use 8px (DEFAULT) to align with button styling, creating visual consistency in interactive zones. Chips and badges use 50% (full token) for a pill-shaped a

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons use background: {colors.primary} (#1eb56d), text-color: {colors.on-primary} (white), padding: 9px 18px, height: 40px, border-radius: 8px, font-size: 14px, font-weight: 400. On hover, background transitions to {colors.inverse-primary} (#1ba664) over 0.2s ease. On active/pressed, apply box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15) to create a pressed effect. Secondary buttons use background: transparent, border: 1px solid {colors.secondary} (#26aae1), text-color: {colors.secondary}, same padding and height. On hover, background becomes {colors.secondary-container} (#f4fbfd) with no border change. Disabled state (both primary and secondary): opacity: 0.5, cursor: not-allowed, no hover effects.

Containers

Do's and Don'ts

**Do**

• Do use primary green (#1eb56d) exclusively on primary CTAs and brand-forward moments—it's the signature accent and loses impact if overused.
• Do maintain 24px gutter spacing between grid columns and 16px minimum padding inside cards to prevent visual crowding.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels (12–14px) over photographic backgrounds to ensure legibility.
• Do use Funnel Display at 400 weight for body text and 600 weight for headlines—never mix weights within a single text block.
• Do transition all interactive states (hover, focus, active) over 0.2s ease using cubic-bezier(0.25, 0.46, 0.45, 0.94) for a professional feel.
• Do use 8px border-radius on buttons and inputs, 20px on cards, and 50% on badges—this hierarchy signals interaction type.

**Don't**

• Don't use primary green on secondary actions, backgrounds, or decorative elements—reserve it for CTAs and active states only.
• Don't apply shadows larger than 0 8px 32px rgba(0, 0, 0, 0.1)—heavier shadows feel dated and reduce the technical aesthetic.
• Don't mix Funnel Display with other typefaces; the system is single-family for visual cohesion and rendering consistency.
• Don't use border-radius smaller than 8px (except on data tables) or larger than 20px (except badges)—this breaks the precision hierarchy.
• Don't set line-height below 24px on body text or below 28px on body-lg—readability suffers and the technical aesthetic becomes cramped.
• Don't apply opacity: 0.5 to disabled states without also setting cursor: not-allowed—users must know the element is non-interactive.