Oracle Design System — Colours, Type and a Ready Prompt

A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.

At a glance

21tokens

21type steps

6radius steps

10pxspacing base

Oracle, in one page

Oracle's web system is unusual for an enterprise brand in that it barely uses colour at all. The page ground is a six-step ladder of warm neutrals that runs from pure white through three off-whites to a warm near-black, and that ladder does almost all the structural work. Sections are distinguished from one another not by cards or rules or shadows but by which rung of the ladder they sit on, stacked full-bleed and square-cornered so the page reads as a series of tonal shifts rather than a stack of containers.

The famous Oracle red appears exactly once per page, in the masthead wordmark, and nowhere else. Every action on the site is carried by {colors.primary}, a warm dark charcoal, in a small 4px-radius button that never grows louder than its label. The restraint is deliberate and total: there is no coloured CTA, no accent-tinted card, no gradient. When colour does arrive it arrives at full-band scale, a whole section width of {colors.band-teal} or {colors.band-forest}, and then the page returns to neutral.

What gives the system its character is the type. Two display registers run side by side. The corporate index sets its headings in Oracle Sans at weight 300, very large and very light, while the product pages set theirs in Georgia, a bookish transitional serif that is genuinely surprising on a database landing page. Beneath both, Oracle Sans handles everything else across a wide weight range, dropping to 350 for running copy and jumping all the way to 800 for section headings, so the contrast between a paragraph and the heading above it is enormous without either changing size very much. A single gold rule, 40 by 4 pixels, sits under the hero headline. It is the only decorative mark in the system, and against this much neutral it does a lot of work.

Key Characteristics:

A six-rung warm neutral ladder — {colors.canvas} → {colors.canvas-soft} → {colors.canvas-tint} → {colors.canvas-warm} → {colors.hairline} → {colors.ink-deep} — carrying nearly every surface
{colors.brand-mark} reserved for the wordmark and used nowhere else in the interface
Every action in one warm charcoal {colors.primary} at {rounded.xs}, with no coloured CTA anywhere
Two display registers, being Oracle Sans at weight 300 on the corporate index and Georgia serif across the product pages
An extreme body-to-heading weight jump, from 350/400 running copy straight to 800 section headings
Full-bleed square-cornered bands with no shadows — depth comes from tonal steps alone
A 40 × 4px {colors.accent-gold} rule under the hero headline as the system's only ornament
Chromatic colour deployed only at whole-band scale, never on a control

Do's and don'ts

Do

Build page structure from the neutral ladder. Moving a section one rung is the system's way of saying "new region".
Keep {colors.brand-mark} on the wordmark and nowhere else. Its scarcity is what gives it weight.
Run every action through {colors.primary} at {rounded.xs} with 10px 16px padding, whatever the context.
Flip polarity rather than changing colour when an action lands on a dark band — use {components.button-primary-inverse}.
Hold {spacing.section} at 48px on every full-width band; the uniform rhythm is what makes the small tonal steps legible.
Let weight carry hierarchy. The 400-to-800 jump between body and heading is the system's main structural signal.
Keep letter-spacing at zero on every role, at every size.
Deploy chromatic colour only at whole-band scale, as {components.section-band-teal} or {components.section-band-forest}.

Don't

Don't add shadows. The system has none, and elevation is expressed by position on the neutral ladder.
Don't use pure black. {colors.ink} is warm and deliberately a few points off it.
Don't round a band, a section, a masthead or a footer — {rounded.none} on full-width chrome is the rule.
Don't mix the two card radii. {rounded.xl} belongs to the corporate index and {rounded.md} to the product pages; using both on one page breaks the template read.
Don't set a headline in Oracle Sans on a product page or in Georgia on the corporate index — the two registers do not cross templates.
Don't underline {components.link-inline}; {colors.link} alone carries the affordance.
Don't add a fourth or fifth tint between the ladder rungs. They are already close enough that another step would be invisible.
Don't give {components.hero-eyebrow-rule} a second colour or a second instance per page; one 40 × 4px gold bar is the whole ornament budget.

Copy this into your AI builder

Paste it as-is. Every value below was measured from the original site, not guessed.

Assembled from the measured tokens — the source document has no prompt block.

Build a page in the Oracle design language. Follow the measured tokens below — do not substitute your own palette.

Colors:
- primary: #312d2a
- primary-pressed: #47423e
- on-primary: #ffffff
- brand-mark: #c74634
- ink: #161513
- ink-deep: #211e1c
- canvas: #ffffff
- canvas-soft: #fbf9f8
- canvas-tint: #f5f4f2
- canvas-warm: #f1efed

Type:
- families: Georgia, Oracle Sans, Consolas, Inter
- scale: 12, 14, 16, 16.8, 18, 20, 21.6, 22.4, 24
- weights: 300, 350, 400, 500, 600, 700, 800

Shape:
- radius: 0, 4, 6, 8, 12, 15
- elevation: No shadow, since the system has none — the modal is bounded by its rule alone

Spacing: 10, 12, 16, 18, 20, 24, 32, 48, 72

Rules:
- Build page structure from the neutral ladder. Moving a section one rung is the system's way of saying "new region".
- Keep `{colors.brand-mark}` on the wordmark and nowhere else. Its scarcity is what gives it weight.
- Run every action through `{colors.primary}` at `{rounded.xs}` with `10px 16px` padding, whatever the context.
- Flip polarity rather than changing colour when an action lands on a dark band — use `{components.button-primary-inverse}`.
- Hold `{spacing.section}` at 48px on every full-width band; the uniform rhythm is what makes the small tonal steps legible.
- Let weight carry hierarchy. The 400-to-800 jump between body and heading is the system's main structural signal.

Avoid:
- Don't add shadows. The system has none, and elevation is expressed by position on the neutral ladder.
- Don't use pure black. `{colors.ink}` is warm and deliberately a few points off it.
- Don't round a band, a section, a masthead or a footer — `{rounded.none}` on full-width chrome is the rule.
- Don't mix the two card radii. `{rounded.xl}` belongs to the corporate index and `{rounded.md}` to the product pages; using both on one page breaks the template…
- Don't set a headline in Oracle Sans on a product page or in Georgia on the corporate index — the two registers do not cross templates.
- Don't underline `{components.link-inline}`; `{colors.link}` alone carries the affordance.

Keep every value literal. If a token is given, use that exact value.

The specification

Colour paletteRead the full spec

Brand & Accent

Oracle Red ({colors.brand-mark} — #c74634): the wordmark, and only the wordmark. It appears in the masthead at the top of every page and is not used for any button, link, border, band or highlight. Elsewhere on the page red shows up only inside photography and inside logos printed on product hardware.
Action Charcoal ({colors.primary} — #312d2a): the fill behind every primary action on the site. Warm rather than neutral, and a clear step lighter than {colors.ink} so a filled button reads as an object rather than as a block of text.
Action Charcoal Pressed ({colors.primary-pressed} — #47423e): the active state of that button.
On Primary ({colors.on-primary} — #ffffff): the label on a filled action, and the text colour on every inverted surface.
Gold Rule ({colors.accent-gold} — #f0cc71): a 40 × 4px bar sitting under the hero headline on every product page. The system's one piece of ornament.
Gold Tab ({colors.accent-gold-soft} — #f7e0a1): a paler gold, 5px tall, marking the selected item in the dark product sub-navigation.

Surface

The surface set is a numbered ladder, and its rungs are close enough together that a band change reads as a shift in light rather than as a new panel.

Canvas ({colors.canvas} — #ffffff): the masthead, the footer, content cards, and the brightest section bands.
Canvas Soft ({colors.canvas-soft} — #fbf9f8): the most common product-page section fill. One barely-perceptible step off white.
Canvas Tint ({colors.canvas-tint} — #f5f4f2): the next step, used for supporting sections and the contact hero.
Canvas Warm ({colors.canvas-warm} — #f1efed): the warmest and most-used tint, carrying the corporate index page almost end to end and every product hero band.
Hairline ({colors.hairline} — #e4e1dd): the tile and disabled-control border, and the last neutral rung before the dark end.
Divider ({colors.divider} — #e9e7e4): the 2px vertical rule that separates the contact page's channel columns.
Field Border ({colors.field-border} — #d4cfca): the 1px border around the masthead search field, one clear step darker than {colors.hairline} so an input reads as interactive against a card that merely reads as a container.
Ink Deep ({colors.ink-deep} — #211e1c): the dark end of the ladder, used as a full-width band behind the product sub-navigation.

Text

Ink ({colors.ink} — #161513): every heading and every line of body copy. A warm near-black, never pure black, which keeps the very light 300-weight display sizes from looking harsh.
Link ({colors.link} — #006b8f): inline links in body copy and channel columns. A deep teal-blue, set without an underline, at the same size and weight as the text around it — the colour alone carries the affordance.
On dark bands, text inverts to {colors.on-primary} and there is no intermediate tone; the system has one text colour per polarity.

Semantic

Focus ({colors.focus} — #227e9e): the focus indicator, declared once and applied identically on light and dark surfaces, so a keyboard user sees the same ring everywhere.
Error ({colors.error} — #d63b25): validation messaging and error field text.
Disabled Ink ({colors.disabled-ink} — #aea8a2): the label on a disabled control, paired with a {colors.canvas-soft} fill and a {colors.hairline} border.

Band Colours

Chromatic colour enters the system only as a full section band, never as a control, a card or a border.

Band Teal ({colors.band-teal} — #d6e5e5): a pale teal strip, roughly 120 to 160px tall, used to break a run of neutral sections.
Band Forest ({colors.band-forest} — #33553c): a deep green band carrying white text and a multi-column link list, around 390px tall.

Type scaleRead the full spec

Font Family

Three families, with a clear division of labour.

Oracle Sans is the workhorse — a variable humanist sans with open apertures and a slightly squared construction. Its variable axis is exercised hard: the declared base weight is 350, running copy sits at 350 or 400, and section headings jump all the way to 800. It also supplies the corporate index's display sizes at weight 300.

Georgia is the display serif on the product pages. It carries h1, h2 and h3 at 36 to 56px in regular weight, with its bracketed serifs and ball terminals reading as distinctly bookish next to the sans beneath it. It is declared as an explicit stack led by Georgia, so it renders as Georgia on virtually every machine rather than falling back.

Consolas is declared for monospace and never appears in page chrome.

Hierarchy

Token	Size	Weight	Line Height	Use
`{typography.display-serif-xl}`	56px	400	67.2px	Product hero headline, Georgia
`{typography.display-serif-lg}`	40px	400	48px	Major section headline, Georgia
`{typography.display-serif-md}`	36px	400	43.2px	Product page headline and section headline, Georgia
`{typography.display-sans-lg}`	40px	300	52px	Corporate index section headline, Oracle Sans Light
`{typography.display-sans-md}`	32px	300	44px	Corporate index page headline, Oracle Sans Light
`{typography.heading-xl}`	28px	800	33.6px	Product section heading
`{typography.heading-lg}`	24px	800	28.8px	Section and channel-column heading
`{typography.heading-md}`	20px	800	24px	Sub-section heading
`{typography.heading-sm}`	18px	800	21.6px	Card heading
`{typography.heading-card}`	24px	600	32px	Corporate index card heading
`{typography.lead}`	24px	400	33.6px	Standfirst paragraph under a hero
`{typography.body}`	16px	400	22.4px	Product page running copy and links
`{typography.body-loose}`	16px	350	24px	Corporate index running copy, at the declared base weight
`{typography.body-strong}`	16px	700	22.4px	Emphasised list item and inline lead-in
`{typography.label}`	14px	500	16.8px	Button label
`{typography.label-strong}`	14px	600	20px	Navigation tile label
`{typography.caption}`	12px	400	20px	Footer links and fine print

Principles

Letter-spacing is zero on every role without exception. There is no tracked-out eyebrow, no tightened display line, no small-caps label — the system leaves the typeface's own fitting alone at every size from 12px to 56px.

Line-height moves in two registers. Display and heading roles run at a tight 1.2 (67.2/56, 48/40, 28.8/24, 21.6/18 all resolve to exactly 1.2), while body roles open up to 1.4 (22.4/16) or 1.5 (24/16). The split is clean: anything that is a heading is set tight, anything that is read in sentences is set loose.

The weight range is the most distinctive thing about the system. Running copy sits at 350 or 400 and section headings sit at 800, with almost nothing in between, so hierarchy is carried by weight far more than by size. A 24px 800-weight heading over 16px 400-weight body is a much sharper break than the 1.5× size ratio alone would suggest. The 300-weight display sizes on the corporate index run in the opposite direction, being lighter than the body text they sit above.

Note on Font Substitutes

Oracle Sans is a proprietary variable face. The closest open substitute is Inter, which shares the humanist skeleton and open apertures and offers a full variable weight axis including the 350 and 800 stops this system depends on; Source Sans 3 is a warmer alternative but tops out lower and needs the 800 roles dropped to 700. Georgia ships with virtually every operating system and needs no substitution; if a webfont is required, Gelasio is metric-compatible with it. Consolas substitutes cleanly with JetBrains Mono. Keep the 1.2 heading line-height, the 1.4 body line-height, and zero tracking on any substitute.

Components and layoutRead the full spec

Every component below documents its Default state. Variants live as separate entries in the components: front matter.

Masthead & Navigation

masthead

Background {colors.canvas}, text {colors.ink}, type {typography.body}, rounded {rounded.none}, 85px tall
Full width and identical on every page. Carries a hamburger, the wordmark, a wide search field and three utility icons

logo-wordmark

Text {colors.brand-mark}, type {typography.heading-lg}, rounded {rounded.none}
The only appearance of red in the interface

text-input

Background {colors.canvas}, text {colors.ink}, type {typography.body}, 1px {colors.field-border} border, rounded {rounded.sm}, padding 12px 18px
The masthead search field. A leading icon is inset with 48px of left padding

product-subnav

Background {colors.ink-deep}, text {colors.on-primary}, type {typography.body}, rounded {rounded.none}, 64px tall
A sticky full-bleed strip below the masthead on a product page, holding the section links for that product

product-subnav-light

Background {colors.canvas}, text {colors.ink}, type {typography.body}, rounded {rounded.none}, 64px tall
The same strip in its light polarity, where the active item is marked by an ink underline instead of a gold bar

subnav-active-bar

Background {colors.accent-gold-soft}, rounded {rounded.none}, 67 × 5px
Marks the selected item in the dark sub-navigation

Buttons

Every button in the system is {rounded.xs} with 10px 16px padding and a {typography.label} label. Only the fill and border change between variants.

button-primary

Background {colors.primary}, text {colors.on-primary}, type {typography.label}, rounded {rounded.xs}, padding 10px 16px
The primary action everywhere. Frequently markup'd as an anchor rather than a button element

button-primary-pressed

Background {colors.primary-pressed}, otherwise identical

button-primary-disabled

Background {colors.canvas-soft}, text {colors.disabled-ink}, 1px {colors.hairline} border, rounded {rounded.xs}, padding 10px 16px

button-secondary

Transparent fill, text {colors.ink}, 1px {colors.ink} border, rounded {rounded.xs}, padding 10px 16px
The outlined companion, always paired to the right of a primary

button-tertiary

Text {colors.ink}, rounded {rounded.xs}, padding 10px 16px
A borderless tonal variant whose fill is an 8% wash of {colors.ink} over whatever surface it sits on, so it reads as a soft block rather than a defined edge

button-primary-inverse

Background {colors.canvas}, text {colors.ink}, rounded {rounded.xs}, padding 10px 16px
The primary action on a dark band — the polarity flips rather than the colour changing

button-secondary-inverse

Transparent fill, text {colors.on-primary}, 1px {colors.on-primary} border, rounded {rounded.xs}, padding 10px 16px

Bands & Sections

All six band variants are full-bleed, square-cornered and padded 48px 0. They differ only in fill.

hero-band

Background {colors.canvas-warm}, text {colors.ink}, type {typography.display-serif-md}, rounded {rounded.none}, padding 48px
Opens every product page. Carries a low-contrast pattern overlay and frequently ends on an angled diagonal

hero-eyebrow-rule

Background {colors.accent-gold}, rounded {rounded.none}, 40 × 4px
Sits directly under the hero headline. The system's only ornament

section-band-white · section-band-soft · section-band-tint · section-band-warm

Backgrounds {colors.canvas}, {colors.canvas-soft}, {colors.canvas-tint} and {colors.canvas-warm} respectively
All text {colors.ink}, type {typography.body}, rounded {rounded.none}, padding 48px
The four neutral rungs. A page is built by alternating them; the shift between adjacent rungs is deliberately small

section-band-teal

Background {colors.band-teal}, text {colors.ink}, type {typography.body}, rounded {rounded.none}, padding 48px
A short chromatic strip, around 120 to 160px tall, used to interrupt a long neutral run

section-band-forest

Background {colors.band-forest}, text {colors.on-primary}, type {typography.body}, rounded {rounded.none}, padding 48px
The one deep colour band, carrying white text and a multi-column link list

Cards & Media

content-card

Background {colors.canvas}, text {colors.ink}, type {typography.body-loose}, rounded {rounded.xl}, padding {spacing.xxxl}
The corporate index workhorse. A wide card holding a headline, copy, a primary action and a half-width image

stat-panel

Drop-in CSS variables

The same values as a theme block. Add the class to <body> and the site repaints.

body.theme-oracle {--page-bg: #ffffff;
  --page-bg-gradient: none;
  --text-color: #161513;
  --heading-color: #161513;
  --link-color: #006b8f;
  --link-hover-color: #00455c;
  --border-color: #d5d5d5;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 2px rgba(22,21,19,0.06);
  --card-hover-shadow: 0 6px 18px rgba(22,21,19,0.12);
  --header-bg: #161513;
  --header-text-color: #ffffff;
  --header-shadow: none;
  --footer-bg: #ffffff;
  --footer-text-color: #686766;
  --button-bg: #312d2a;
  --button-text-color: #ffffff;
  --button-hover-bg: #161412;
  --button-border: none;
  --button-border-radius: 8px;
  --button-secondary-bg: #f1f1f1;
  --button-secondary-text-color: #161513;
  --button-secondary-hover-bg: #e3e3e3;
  --button-secondary-border: 1px solid #d5d5d5;
  --prompt-bg: #f3f3f3;
  --prompt-text-color: #161513;
  --base-font: var(--font-serif);
  --heading-font: var(--font-helvetica);
  --card-border-radius: 8px;
}

Download theme.css

Visually close to

Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.

kintetsu 75.1%
itoki 73.3%
yurindo 73.0%
gyokusendo 72.6%
goodpatch 71.8%

Where this came from

Source document: volt/design-md/oracle/DESIGN.md · 41.4 KB
Repository: VoltAgent/awesome-design-md
Licence: MIT

Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.