Amdocs

Overview

Amdocs is a B2B software and services platform serving communications and media enterprises. The design system embodies 'Technical Minimalism'—a philosophy that strips away ornament to expose the essential architecture of intelligent systems. The brand personality is authoritative yet approachable: precise, data-driven, and forward-thinking. The UI communicates confidence through stark contrasts (pure black #000000 backgrounds against crisp white text at rgb(242, 243, 245)), punctuated by strategic accent colors that signal actionable intelligence. The emotional response is one of clarity and control—users feel they are commanding sophisticated infrastructure, not struggling with complexity. Voice example: 'aOS elevates your network intelligence to the next level—measurable efficiency at scale.'

Colors

The color system operates on a high-contrast, dark-first principle optimized for enterprise dashboards and technical interfaces. Primary (#000000) is pure black, used as the dominant surface and button base; it conveys authority and technical precision. On-primary (#ffffff) is pure white, ensuring maximum legibility at 18px body text (rgb(244, 245, 246) in practice). Secondary (#c63f42, a warm red-brown) is reserved for critical actions, alerts, and secondary CTAs—it appears on the 'Accept All Cookies' button and error states. Tertiary (#68b631, a vibrant green) signals success, positive actions, and growth metrics. The surface stack progresses from #000000 (base) through #1a1a1a (container) to #3a3a3a (highest), providing subtle depth without breaking the dark aesthetic. On-surface-varian

Typography

The type system is anchored in Outfit (Google Fonts), a geometric sans-serif that conveys modernity and technical sophistication. Display (60px, 700 weight, -0.04em tracking) is used sparingly for hero statements like 'The world's first agentic operating system.' Headline-lg (44.8px, 500 weight) is the primary heading level, balancing prominence with restraint. Body-lg (18px, 300 weight, 28px line-height) is the default paragraph text, chosen for its light weight to reduce visual heaviness on dark backgrounds. Label-md (16px, 600 weight) is applied to all button text and form labels, ensuring they command attention without shouting. The 300-weight body text is critical to the brand's refined aesthetic—it prevents the dark background from feeling oppressive. Apply text-shadow: 0 1px 2px rgb

Layout

The layout follows a 12-column grid with a max-width of 1024px, creating a contained, focused experience suitable for enterprise software. White-space is generous: lg spacing (40px) separates major sections, md spacing (24px) divides subsections, and sm spacing (12px) groups related elements. The gutter width is 24px, providing breathing room between columns. Container padding is consistently md (24px) on desktop, reducing to sm (12px) on mobile. This spacing philosophy prevents the dark background from feeling claustrophobic and ensures text remains scannable. The page rhythm alternates between full-width hero sections (with gradient overlays) and contained content blocks, creating visual momentum. Hero sections use the full viewport width with a dark overlay (rgba(0, 0, 0, 0.4)) to ensur

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background color shifts rather than dramatic layering. Level 1 (Base): pure black surface (#000000) with no shadow. Level 2 (Standard Card): surface-container (#1a1a1a) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft separation from the base. Level 3 (Elevated/Modal): surface-container-high (#2d2d2d) with box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), adding visual weight for modals and overlays. Interactive elements (buttons, inputs) use a 2px border-radius and no shadow by default; on hover, they elevate to Level

Shapes

The shape philosophy is 'Architectural Precision'—minimal, sharp corners that reflect the technical nature of the platform. Border-radius is consistently 2px (sm) for buttons and small interactive elements, 4px (DEFAULT) for input fields and cards, and 8px (md) for larger containers. This conservative rounding avoids the softness of modern consumer design, instead evoking the precision of technical interfaces and industrial design. The 2px radius on buttons (e.g., primaryCta with borderRadius: 2px) is intentionally tight, suggesting control and exactness. Larger components like modals use 12px

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary (backgroundColor: #000000, textColor: #ffffff, padding: 12px 24px, height: 44px, borderRadius: 2px) is the default CTA, used for primary actions like 'Learn more.' Button-secondary (backgroundColor: #c63f42, fontWeight: 700, padding: 10px 20px, height: 40px) is used for secondary or destructive actions, such as 'Accept All Cookies.' Both buttons use typography.label-md (16px, 600 weight) for legibility. On hover, buttons transition to their -container variants (e.g., button-primary-hover uses primary-container #232630) with a 150ms ease-in-out transition. Focus states apply a 2px outline in inverse-primary (#3860be) at 2px offset. Button-tertiary (backgroundColor: #68b631) signals positive or success-oriented

Do's and Don'ts

**Do**

• Do use pure black (#000000) as the dominant surface to establish technical authority and reduce eye strain in enterprise environments.
• Do apply secondary (#c63f42) sparingly—only on critical CTAs, alerts, and destructive actions to maintain visual hierarchy.
• Do use 300-weight Outfit for body text to prevent dark backgrounds from feeling oppressive; pair with 28px line-height for readability.
• Do maintain 2px border-radius on buttons and inputs to reinforce the 'Architectural Precision' aesthetic and signal control.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to cards and elevated surfaces for subtle depth without visual clutter.
• Do use lg spacing (40px) between major sections to create breathing room and guide the eye through content hierarchy.

**Don't**

• Don't use rounded corners larger than 12px on any component—the brand relies on sharp, technical geometry, not soft, consumer-friendly curves.
• Don't apply color to body text; reserve primary accent colors (#3860be, #c63f42, #68b631) exclusively for interactive elements and status indicators.
• Don't use drop shadows larger than 0 7px 14px rgba(50, 50, 93, 0.1)—excessive shadow depth contradicts the minimalist aesthetic.
• Don't reduce padding below sm (12px) on interactive elements; the brand prioritizes clarity and touch-target accessibility over compact layouts.
• Don't mix typeface weights within a single line of body text; use consistent 300-weight for paragraphs and 600-weight for labels to maintain visual clarity.
• Don't apply transparency or glassmorphism effects to surfaces—the brand uses solid, opaque colors to convey stability and technical precision.