Oracle DESIGN.md

Overview

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

Colors

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.

Typography

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

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.

Layout

Spacing System

• Base unit: 8px, though the working steps are finer at the small end and jump hard at the large end.
• Tokens: {spacing.xs} 10px · {spacing.sm} 12px · {spacing.md} 16px · {spacing.lg} 18px · {spacing.xl} 20px · {spacing.xxl} 24px · {spacing.xxxl} 32px · {spacing.section} 48px · {spacing.gutter} 72px
• {spacing.section} is the universal rhythm constant. Every full-width section on every page is padded 48px 0, which is what gives the band stack its regularity.
• {spacing.xxxl} is the grid gutter and the corporate index card interior; {spacing.xxl} is the product card interior.
• Button padding is a fixed 10px 16px everywhere, and headings carry an 18px bottom margin.

Grid & Container

• Outer container: 1744px maximum, with a 72px side gutter.
• Context container: 1600px maximum for content that sits inside a band.
• Minimum container: 272px, which is the floor the layout collapses toward on the narrowest phones.
• Grid gap: 32px between columns, used by the corporate index tile row, the channel columns and the product card grids.
• Masthead: 85px tall, full width, white. Product sub-navigation: 64px, full width, sticky. Footer: 105px, full width, white.
• Sections are full-bleed and square-cornered; the container only constrains the content inside them, never the band itself.

Whitespace Philosophy

Space is used to make the tonal ladder legible. Because adjacent bands can differ by as little as four or five points of lightness, each one needs enough vertical room for the eye to register it as a separate region — hence the uniform 48px section padding and the willingness to give a 160px teal strip an entire band to itself. Inside a band the opposite applies: content is packed into a 1600px column with 32px gutters and relatively tight card padding, so the generous outer rhythm reads as structure rather than emptiness.

Responsive Strategy

Breakpoints

Touch Targets

{components.button-primary} stands 37px tall at its 10px vertical padding and 14px label, which is under the 44×44 WCAG AAA minimum and relies on surrounding margin for comfortable tapping. {components.text-input} and {components.product-subnav} both clear it comfortably, at roughly 46px and 64px respectively, as does {components.nav-tile}. For rebuilds, raising the button's vertical padding to 14px brings it to 45px without changing any other value in the system.

Collapsing Strategy

The masthead is the element that changes most: at desktop it carries a hamburger, the wordmark, a wide search field and three utility icons, and below tablet the search field collapses to an icon while the rest holds position. The product sub-navigation keeps its full-bleed band at every width and turns into a horizontally scrolling strip rather than wrapping, so the active {components.subnav-active-bar} stays visible. Card grids step 4-up to 3-up to 2-up to 1-up across the ladder. The channel columns on the contact page drop their {colors.divider} vertical rules when they stack, since a vertical rule between stacked blocks reads as a mistake. Section padding holds at {spacing.section} far longer than most systems would keep it, compressing only at the mobile breakpoints.

Image Behavior

Photography is full-bleed inside its container and square-cornered when it fills a band, but takes {rounded.md} when it sits inside a product card and {rounded.xl} when it fills half of a corporate index content card. Video thumbnails carry a circular {components.play-button-circular} overlay. The contact hero uses a cut-out photographic strip with a soft feathered lower edge rather than a hard crop. Decorative pattern overlays — fine topographic contour lines, large open swirls — sit behind hero content at very low contrast and are treated as part of the band fill rather than as images.

Elevation & Depth

The system carries no shadows at all. Not on cards, not on the sticky sub-navigation, not on the masthead, not on modals. Depth is produced entirely by position on the neutral ladder: a white card on a {colors.canvas-warm} band reads as raised because it is lighter, and a {colors.ink-deep} sub-navigation reads as a distinct plane because it is far darker. Where two surfaces sit on the same rung, a 1px {colors.hairline} border does the separating instead.

There are no gradients in the page chrome. The only tonal transitions in the system are the feathered lower edge of a cut-out hero photograph and the angled diagonal that ends some hero bands, and both belong to the image, not to the surface.

Decorative Depth

Hero bands carry very low-contrast pattern overlays — dense topographic contour lines on one product page, large open swirls on another — drawn a point or two off the band fill. They read as texture rather than as image, and they are the reason a large area of {colors.canvas-warm} does not feel empty. Some hero bands end on an angled diagonal rather than a horizontal edge, letting the following band cut up into them.

Shapes

Border Radius Scale

The scale is unusually fine-grained at the small end, with 4, 6 and 8 all in active use and each assigned to a different control family — buttons, fields, cards. The two large steps are template-specific rather than interchangeable: the corporate index uses 15px throughout while the product pages use 8px, so a card's radius tells you which template you are on. The 15px value is worth noting as a deliberate oddity, since 16px would be the conventional choice and the system consistently uses 15.

Photography Geometry

Images inside product cards take {rounded.md}; images filling half a corporate index card take {rounded.xl}. Full-band photography is square-cornered. Aspect ratios are not fixed — video thumbnails run roughly 16:9, hero photography is a wide strip, and card imagery fills whatever the card gives it. The system never crops to a circle except for the play control.

Components

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

• Background {colors.canvas-warm}, text {colors.ink}, type {typography.body-loose}, rounded {rounded.xl}, padding {spacing.xl}
• A tinted block nested inside a content card, holding a short bulleted list of figures

product-card and product-card-warm

• Backgrounds {colors.canvas} and {colors.canvas-warm}, text {colors.ink}, type {typography.body}, rounded {rounded.md}, padding {spacing.xxl}
• The product page equivalent, at the smaller radius. The warm variant is used when the card sits on a white band

nav-tile

• Background {colors.canvas}, text {colors.ink}, type {typography.label-strong}, 1px {colors.hairline} border, rounded {rounded.lg}, padding {spacing.md}
• The row of eight product entry tiles below the corporate index masthead, grouped under two light sans labels

media-frame

• Background {colors.canvas}, rounded {rounded.md}
• The frame around an embedded video or product screenshot

play-button-circular

• Background {colors.ink}, icon {colors.on-primary}, rounded {rounded.full}, 40px
• The only circular element in the system

Content & Links

channel-column

• Background {colors.canvas}, text {colors.ink}, type {typography.heading-lg}, 2px {colors.divider} rule, rounded {rounded.none}, padding {spacing.xxl}
• A three-up group on the contact page. Each column holds a thin outline icon, an 800-weight heading, a short paragraph and a {components.link-inline}, separated by full-height vertical rules

link-inline

• Text {colors.link}, type {typography.body}, rounded {rounded.none}
• Set with no underline and at the same size and weight as the surrounding copy

Footer

footer

• Background {colors.canvas}, text {colors.ink}, type {typography.caption}, rounded {rounded.none}, 105px tall
• A single horizontal row of fine-print links above a row of social icons. No rule, no fill change, no column structure

footer-link

• Text {colors.ink}, type {typography.caption}, rounded {rounded.none}
• Set in ink rather than {colors.link}, which is what keeps the footer quiet

Examples (illustrative)

These ten surfaces are kit-mirror demonstrations, not components found on the brand's own pages. Each is composed from the primitives above so downstream consumers re-skin the shapes this system actually uses — the square {rounded.none} band, the {rounded.xs} button, the {rounded.md} card, and a neutral ladder that separates surfaces by tone and a hairline rule instead of by shadow.

ex-pricing-tier — default tier card

• Background {colors.canvas}, text {colors.ink}, 1px {colors.hairline} border, rounded {rounded.md}, padding {spacing.xxl}
• CTA from {components.button-secondary}

ex-pricing-tier-featured — the highlighted tier

• Background {colors.primary}, text {colors.on-primary}, rounded {rounded.md}, padding {spacing.xxl}
• Polarity-flipped to the action charcoal, the same inversion {components.section-band-forest} performs, with its CTA from {components.button-primary-inverse}

ex-product-selector — what's-included summary card

• Background {colors.canvas-soft}, text {colors.ink}, rounded {rounded.md}, padding {spacing.xxl}
• One rung up the ladder, with rows borrowing {components.nav-tile} chrome

ex-cart-drawer — subscription summary

• Background {colors.canvas}, text {colors.ink}, rounded {rounded.md}, padding {spacing.xxl}, line items separated by {colors.divider}
• The same warm rule {components.channel-column} uses between columns

ex-app-shell-row — sidebar nav row

• Background {colors.canvas}, text {colors.ink}, type {typography.body}, rounded {rounded.md}, padding {spacing.sm} {spacing.md}, active indicator {colors.primary}

ex-data-table-cell — table header and body chrome

• Header background {colors.canvas-tint} in {typography.caption}, body cells {typography.body}, cell padding {spacing.sm} {spacing.md}, row border {colors.hairline}

ex-auth-form-card — sign-in card

• Background {colors.canvas}, text {colors.ink}, 1px {colors.hairline} border, rounded {rounded.md}, padding {spacing.xxl}
• Inputs take the {components.text-input} treatment

ex-modal-card — modal dialog surface

• Background {colors.canvas}, text {colors.ink}, 1px {colors.hairline} border, rounded {rounded.md}, padding {spacing.xxl}
• No shadow, since the system has none — the modal is bounded by its rule alone

ex-empty-state-card — empty-state frame

• Background {colors.canvas-soft}, text {colors.ink}, rounded {rounded.md}, padding {spacing.section}, caption in {typography.body}

ex-toast — toast notification surface

• Background {colors.canvas}, text {colors.ink}, type {typography.body}, 1px {colors.hairline} border, rounded {rounded.md}, padding {spacing.sm} {spacing.xl}

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.