OpenText

Overview

OpenText is an enterprise-grade information management platform designed for organizations that demand security, scalability, and AI-readiness. The design system embodies "Technical Clarity"—a philosophy that marries corporate sophistication with intuitive accessibility. The brand personality is authoritative yet approachable: precise, data-driven, and forward-thinking. The UI uses a vibrant primary blue (#0066ff) as the signature accent, deployed strategically on CTAs, focus states, and key interactive elements to signal trust and action. The supporting palette—neutral grays (#101c2f, #3f4d62, #f6f7f7) and warm gold (#faad1f)—creates visual hierarchy without distraction. Voice: confident, clear, never condescending. Example sentence: "Transform your enterprise data into trusted, AI-ready intelligence with enterprise-grade security at scale."

Colors

The color system is built on a neutral-dominant foundation with a vibrant primary accent. Primary (#0066ff) is the brand's signature blue, used exclusively for CTAs, active states, links, and focus indicators—it commands attention without overwhelming. On-primary (#ffffff) ensures maximum contrast for accessibility (WCAG AAA). The surface stack (surface #ffffff, surface-dim #f6f7f7, surface-container #e7eaef, surface-container-high #dee2e6) creates subtle depth through incremental lightness shifts of 2–4%, enabling layered card hierarchies without harsh shadows. On-surface (#101c2f) is a near-black text color (HSL 215°, 45%, 9%) that maintains legibility while feeling less harsh than pure black. Secondary (#3f4d62) is a muted slate used for secondary text, disabled states, and supporting U

Typography

The type system uses Inter var as the single typeface family, chosen for its geometric clarity and extensive weight range (300–800). Display (60px, 800 weight, –0.04em tracking) anchors hero sections with maximum impact; Headline-lg (40px, 700 weight) structures major section breaks; Headline-md (28px, 700 weight) organizes subsections. Body-lg (18px, 400 weight, 28px line-height) is used for introductory copy and card descriptions, while Body-md (16px, 400 weight, 24px line-height) serves as the default body text. Label-md (14px, 600 weight, 20px line-height, 0.01em tracking) is applied to button text, form labels, and navigation items. Label-sm (12px, 500 weight, 16px line-height, 0.05em tracking) is reserved for helper text, captions, and metadata. All headings use negative letter-spaci

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered with auto margins. The gutter spacing is 24px (md spacing token), maintained consistently across all breakpoints. Container max-widths scale: 800px for narrow content (policy pages), 1140px for standard pages, 1280px for full-width hero sections. White-space is semantic: lg spacing (40px) separates major sections (hero to features, features to testimonials); md spacing (24px) separates cards within a section; sm spacing (12px) separates inline elements. The hero section uses full-viewport height with a background image overlay (gradient: rgba(0, 0, 0, 0.2) to rgba(0, 0, 0, 0.4)) to ensure text legibility. Card grids use 3-column layouts on desktop, 2-column on tablet, 1-column on mobile, with 24px gaps. All paddin

Elevation & Depth

Depth is conveyed through subtle shadows and layered surfaces rather than dramatic drop-shadows. Level 1 (Base): flat surface (#ffffff) with no shadow, used for primary content areas. Level 2 (Raised Card): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), border: 1px solid #dee2e6, used for standard cards and modals. Level 3 (Elevated/Hover): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), used for hovered cards, dropdowns, and floating elements. Shadows use a neutral black (rgba(0, 0, 0, X)) with a 12–16px blur radius to create soft, diffused depth. No shadows should have a spread radius; all use the

Shapes

The shape philosophy is "Accessible Modernism"—rounded corners are used purposefully to soften technical interfaces without sacrificing clarity. Buttons use lg radius (1rem / 16px) for primary and secondary actions, creating a friendly, approachable feel. Cards and containers use xl radius (1.5rem / 24px) for maximum softness and visual distinction from the background. Input fields use DEFAULT radius (0.5rem / 8px) for a more compact, utilitarian appearance. Badges and small UI elements use full radius (9999px) for pill-shaped consistency. Dividers and borders use no radius (0px). The rational

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses backgroundColor: #0066ff, textColor: #ffffff, padding: 10px 30px, height: 48px, rounded: 1rem, fontWeight: 700, fontSize: 16px. On hover, backgroundColor shifts to #0052cc with a 150ms transition. Button-secondary mirrors the primary button but uses a 2px border: 2px solid #0066ff, backgroundColor: transparent, textColor: #0066ff. Button-ghost is a minimal variant with backgroundColor: transparent, no border, and textColor: #0066ff; on hover, it gains backgroundColor: #e7eaef. All buttons use Inter var at 600–700 weight for maximum legibility.

Containers & Surfaces Cards are the primary content container. Standard card uses backgroundColor: #ffffff, rounded: 1.5rem, padding: 24px, boxShadow: 0 4px 1

Do's and Don'ts

**Do**

• Do use primary blue (#0066ff) exclusively for CTAs, active states, and focus indicators—never use it for passive text or backgrounds.
• Do maintain 24px (md spacing) as the default gutter between sections and 12px (sm spacing) between inline elements.
• Do apply lg radius (1rem) to buttons and xl radius (1.5rem) to cards; never mix radius sizes within a component family.
• Do use Inter var at 700 weight for all headings and 600 weight for button labels to ensure visual hierarchy.
• Do elevate cards on hover using box-shadow only; never change background-color on card hover.
• Do apply 150ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all state changes (hover, focus, active).

**Don't**

• Don't use primary blue for body text, disabled states, or secondary UI elements—reserve it for interactive elements only.
• Don't apply shadows to buttons or form inputs in their default state; shadows are for elevated surfaces only.
• Don't mix rounded-corner sizes within a single component type (e.g., don't use md radius on some buttons and lg on others).
• Don't use pure black (#000000) or pure white (#ffffff) for text; use #101c2f for dark text and #ffffff for light text on dark backgrounds.
• Don't apply multiple shadows to a single element; use the elevation scale (sm, md, lg) as defined.
• Don't use secondary colors (gold, red) for primary CTAs; reserve them for badges, warnings, and supporting UI only.