Oracle

Difficulty:
Industry
Oracle Effect Preview

Effect Preview

Design Tokens

Key tokens derived from official brand references and this style's prompt. Copy them or pair with the DESIGN.md below.

Colors

  • primaryBrand

    Primary actions & highlights

  • on-primaryDerived

    Text on primary

  • secondaryDerived

    Chips, badges & soft emphasis

  • on-secondaryDerived

    Text on secondary

  • neutralPrompt

    Page canvas

  • on-neutralDerived

    Text on canvas

  • surfaceDerived

    Cards, panels & elevated containers

  • on-surfaceDerived

    Text on surface

  • borderDerived

    Borders & dividers

Radius & Shapes

Prompt
sm · 2px
md · 4px
lg · 6px
full

Spacing

Derived
  • sm8px
  • md12px
  • lg24px

Elevation

Prompt

Depth is expressed through soft, low-contrast shadows.

Typography

Derived
  • Ag

    Headings 32px · bold

    Inter

  • Ag

    Body 16px · regular

    Inter

  • Ag

    Labels 13px · medium

    Inter

Oracle's interface builds enterprise credibility almost without colour: a six-rung ladder of warm neutrals, from #ffffff to #211e1c, does the sectioning in full-bleed bands with square corners and no shadows. Oracle Sans sets the corporate index in very light 300-weight display type, while product pages switch to a Georgia serif, and body copy at 350 jumps to 800-weight section headings. Red #c74634 appears only in the wordmark, every action is a 4px-radius warm charcoal (#312d2a) button, and a single 40×4px gold rule under the hero is the whole ornament budget.

OracleEnterprise

Prompt Template

Base Template
Design an Oracle-inspired interface. - A six-rung warm neutral ladder (#ffffff, #fbf9f8, #f5f4f2, #f1efed, #e4e1dd, #211e1c) carrying every full-bleed band, square-cornered and free of shadows; - Two display registers: Oracle Sans at weight 300 for corporate index headlines, Georgia serif at 36-56px across product pages; - An extreme weight jump from 350/400 body copy to 800 section headings, with letter-spacing held at zero; - Actions in warm charcoal #312d2a at a 4px radius with 10px 16px padding, never a coloured CTA; - Oracle red #c74634 reserved for the wordmark, and one 40x4px gold #f0cc71 rule under the hero headline; - Chromatic colour only at full-band scale, as teal #d6e5e5 strips and forest #33553c bands. Colors: #ffffff, #f1efed, #312d2a, #c74634 with #c74634 accent. Typography: Oracle Sans and Georgia serif.

Variant Prompts

📱 Mobile
Design a mobile app with Oracle aesthetics. Layer warm neutral surfaces, set headings in Georgia and keep actions in charcoal; the red wordmark supplies the only colour. Calm, touch-friendly, native feel.
💻 Web
Design a web application with Oracle style. Stack full-bleed neutral bands, use Georgia for product headlines and 800-weight Oracle Sans for sections. Professional, responsive layout.
📊 Dashboard
Design a dashboard with Oracle design language. Separate panels with hairlines and tonal steps instead of shadows, and reserve charcoal for the active state. Data-rich, organized, clear hierarchy.
📄 Landing Page
Design a landing page with Oracle visual identity. Open on a warm canvas with a Georgia headline, a 40x4px gold rule and a quiet charcoal CTA. Compelling, conversion-focused.

Usage Examples

Oracle Cloud Catalogue

Web
Build a web catalogue with Oracle design language: warm neutral bands, Georgia headlines, charcoal buttons and a single red wordmark.

Oracle Data Console

Dashboard
Create a dashboard using Oracle style with hairline-divided tables, 800-weight headings and no shadows.

✅ Best For

  • Large enterprise software and database sites
  • CIO-facing solution catalogues
  • Premium product documentation that needs restraint

❌ Avoid For

  • Neon-and-motion creative portfolios
  • Playful education apps for children

DESIGN.md File

A design system description in the open design.md format. Copy or download it and hand it to AI coding tools.