Oracle

Overview

Oracle's design system embodies "Corporate Minimalism"—a refined aesthetic that prioritizes clarity, precision, and enterprise-grade accessibility over visual ornamentation. The brand serves global technology leaders and enterprises requiring mission-critical cloud infrastructure and applications, and the UI reflects this through a restrained, professional palette dominated by warm neutrals (#FFFFFF, #F1EFED, #161513) punctuated by a distinctive rust-terracotta accent (#C0533F). The emotional response is one of trustworthiness and technical competence: the interface recedes to let data and functionality shine, never distracting with unnecessary flourish.

Oracle's voice is authoritative yet approachable, precise without being cold. Vocabulary favors concrete nouns ("infrastructure," "platform," "capacity") and active verbs ("build," "deploy," "scale") over marketing abstractions. The brand personality is that of a seasoned technical partner—knowledgeable, direct, and focused on outcomes. Example sentence: "Oracle Cloud Infrastructure delivers the highest-performing services at the lowest cost—that's why the world's biggest technology companies choose OCI."

Colors

The color system is rooted in a warm, earthy foundation that conveys stability and craftsmanship. Primary (#C0533F) is a rust-terracotta accent used exclusively on call-to-action buttons, interactive focus states, and brand-critical elements; it appears sparingly but commands attention when it does. The surface stack ranges from pure white (#FFFFFF) for primary content areas through carefully calibrated grays (#F1EFED, #E8E5E1, #DDD9D4) for container hierarchy, ensuring sufficient contrast (WCAG AA minimum 4.5:1 on body text #161513 against all surfaces) without harsh transitions. Secondary (#025E7E) and Tertiary (#0E7295) are reserved for data visualization, status indicators, and supporting UI elements in specialized contexts (e.g., the classic chat theme). Error states use a muted coral

Typography

The type system is anchored in Oracle Sans (a proprietary humanist sans-serif with optical adjustments for screen legibility) and uses a light-to-regular weight progression to establish hierarchy without relying on size alone. Display (60px, weight 300, -0.02em tracking) is reserved for hero headlines and major section titles; Headline-lg (40px, weight 300, -0.01em) for secondary headings; Headline-md (28px, weight 400) for subsection titles. Body-lg (18px, weight 350, 28px line-height) is used for introductory paragraphs and prominent copy; Body-md (16px, weight 350, 24px line-height) is the default for body text and ensures 1.5x line-height minimum for accessibility. Label-md (14px, weight 600, 0.01em tracking) is applied to button text, form labels, and UI controls; Label-sm (12px, weig

Layout

The layout system uses a 12-column fluid grid with a max-width of 1360px, allowing content to breathe on large displays while maintaining focus on medium screens. Gutter spacing is consistently 24px (md token), applied symmetrically on left and right; section separation uses lg spacing (40px) vertically to create clear rhythm and allow visual rest between content blocks. Container max-widths observed in the wild range from 1023px to 1600px depending on context; the canonical 1360px accommodates most product pages and marketing content. White-space is treated as a design material: cards and content blocks are separated by at least 24px of breathing room, and internal padding within cards follows the md (24px) or sm (12px) scale depending on density. The spacing scale (xs: 4px, sm: 12px, md:

Elevation & Depth

Depth is conveyed through subtle shadows and strategic use of borders rather than aggressive layering. The elevation scale is minimal and restrained: sm (0 1px 2px rgba(0, 0, 0, 0.06)) is applied to cards and light containers to separate them from the surface; md (0 4px 12px rgba(0, 0, 0, 0.08)) is reserved for elevated modals and floating elements; lg (0 -4px 32px rgba(0, 0, 0, 0.1)) is used exclusively for the chat widget's top shadow, creating a subtle lift effect. Borders are preferred over shadows for most UI elements—a 1px solid border in outline-variant (#CBC5BF) is applied to cards, in

Shapes

The shape philosophy is "Architectural Precision"—rounded corners are used sparingly and purposefully to soften hard edges without compromising the system's technical character. Buttons and primary interactive elements use lg radius (0.75rem / 12px), creating a subtle softness that feels refined rather than playful. Cards and containers use lg radius (0.75rem) consistently, establishing a visual family. Input fields use md radius (0.5rem / 8px) to differentiate them from larger containers while maintaining the same design language. Small UI elements (icon buttons, badges, toggles) use sm radiu

Components

Action Elements Buttons follow a two-tier system: primary (background: #C0533F, color: white, padding: 16px 24px, height: 48px, border-radius: 12px, font-weight: 600) for high-priority CTAs like "Sign in to Cloud" and "Learn more"; secondary (background: #DDD9D4, color: #161513, border: 1px solid #CBC5BF, same padding and height) for supporting actions. Primary buttons transition to #A84632 on hover (200ms ease-in-out) with no additional shadow; secondary buttons shift to #E8E5E1 background. Both use label-md typography (14px, weight 600, 0.01em tracking). Disabled buttons reduce opacity to 50% and set cursor: not-allowed. Icon buttons within headers use a 36px square with transparent background and 4px margin-inline-start for spacing; on hover, they apply background-color: rgba(22, 21

Do's and Don'ts

**Do**

• Do use primary (#C0533F) exclusively on high-priority CTAs and focus states—it's a precious accent that loses impact if overused.
• Do maintain 24px gutter spacing on all sides of content containers to ensure breathing room and prevent visual claustrophobia.
• Do apply 1.5x minimum line-height (28px for 18px body text) to all body copy for accessibility and readability on screens.
• Do use the weight 350 (Oracle Sans's signature) for body text and regular UI copy—it's lighter than 400 but heavier than 300, optimized for screen legibility.
• Do test all interactive elements at 44px minimum height (including padding) to meet touch-target accessibility standards.
• Do use transitions (200ms ease-in-out) on all hover and focus state changes to provide smooth, predictable feedback.

**Don't**

• Don't use pure black (#000000) or pure white (#FFFFFF) for text on text—use #161513 for primary text and #5B5652 for secondary to reduce eye strain.
• Don't apply shadows to buttons or small interactive elements; use background-color transitions instead to keep the interface clean and predictable.
• Don't exceed 2 levels of visual hierarchy in a single view—if you need more than primary + secondary buttons, reconsider the layout.
• Don't use border-radius: 0 (sharp corners) on any interactive element; minimum is 4px (sm radius) to maintain the system's refined character.
• Don't mix font weights within a single line of text—use weight 600 for labels and weight 350 for body, never 500 or 700 in body copy.
• Don't apply more than one shadow to an element; use the elevation scale (sm, md, lg) and never stack shadows for visual clarity.