An enterprise system built on a warm neutral ladder rather than a colour palette. Six rungs carry almost every surface, a single charcoal carries every action, and the famous red is held back for the wordmark alone. Two display registers coexist, being a very light sans on the corporate index and a Georgia serif across the product pages.
Two display registers run side by side — Oracle Sans at weight 300 on the corporate index, and Georgia across the product pages. Beneath both, Oracle Sans handles everything else, dropping to 350 for running copy and jumping to 800 for section headings, so hierarchy is carried by weight far more than by size. Letter-spacing is zero on every role at every size. Inter stands in for Oracle Sans; Georgia is shown as itself.
The masthead is identical on every page. Product pages add a full-bleed sticky sub-navigation below it, which ships in two polarities — a deep band with a gold active bar, and a light band with an ink underline.
logo-wordmark is the only appearance of the brand red in the interface.
subnav-active-bar is 67 × 5px in the paler gold.
Every button in the system is 4px with 10px 16px padding and a 14px medium label. Only the fill and border change between variants, and there is no coloured CTA anywhere.
All band variants are full-bleed, square-cornered and padded 48px 0. They differ only in fill, and the steps between adjacent neutral rungs are deliberately small.
Every product page opens on this band, carrying a low-contrast pattern overlay and a 40 × 4px gold rule under the headline.
The brightest rung. Used for the masthead, the footer and the cleanest content sections.
The most common product-page section fill, one barely-perceptible step from the base.
The next step, used for supporting sections and the contact hero.
The most-used rung, carrying the corporate index page almost end to end.
A short chromatic strip, around 120 to 160px tall, used to interrupt a long neutral run.
The one deep colour band, carrying inverted text and a multi-column link list.
Two card radii coexist, and they are template-specific rather than interchangeable — 15px on the corporate index, 8px on the product pages. A card's radius tells you which template you are on.
The corporate index workhorse, holding a headline, copy, a primary action and a half-width image.
The product page equivalent, at the smaller radius.
Eight of these sit below the corporate index masthead in two labelled groups.
The circular play control is the only circle in the system.
A three-up group on the contact page. Each column holds a thin outline icon, an 800-weight heading, a short paragraph and an inline link, separated by full-height 2px vertical rules that disappear when the columns stack.
The masthead search field is the system's one input treatment — 6px, one step off the card radius, with a border a clear step darker than the hairline so it reads as interactive rather than as a container.
The focus colour is declared once and used identically in both polarities.
Enter a valid value.
A single horizontal row of fine-print links above a row of social icons. No rule, no fill change and no column structure — the footer is simply the last band of canvas.
An 8px base with finer steps at the small end and a hard jump at the large end. The section step is the universal rhythm constant — every full-width band on every page is padded 48px 0.
Unusually fine-grained at the small end, with 4, 6 and 8 all in active use and each assigned to a different control family. The 15px step is a deliberate oddity where 16px would be conventional.
The system carries no shadows at all. Depth is produced entirely by position on the neutral ladder, and where two surfaces share a rung a 1px hairline does the separating instead.
| Name | Width | Key changes |
|---|---|---|
| Small mobile | ≤ 450px | Single column throughout; masthead collapses to hamburger, wordmark and icons |
| Mobile | 451–600px | The system's heaviest breakpoint — sub-navigation scrolls, card grids go 1-up |
| Tablet | 601–770px | Grids go 2-up, search collapses to an icon, channel columns stack and lose their rules |
| Laptop | 771–974px | 2-up and 3-up grids, side gutters tighten from 72px |
| Desktop | 975–1344px | Full multi-column grids, sub-navigation shows all items inline |
| Wide | 1345–1744px | Content reaches the 1600px context cap; bands stay full-bleed |
| Ultra-wide | ≥ 1744px | Outer container caps; surplus width is absorbed by the band fills |
Touch targets: button-primary stands 37px tall at its 10px vertical padding and relies on surrounding margin; text-input and product-subnav clear the 44×44 WCAG AAA minimum at roughly 46px and 64px. Raising the button's vertical padding to 14px brings it to 45px without changing any other value. Collapsing: the masthead search field collapses to an icon below tablet while the rest holds position; the sub-navigation keeps its full-bleed band at every width and scrolls horizontally rather than wrapping, so the active gold bar stays visible; card grids step 4-up to 3-up to 2-up to 1-up; the channel columns drop their vertical rules when they stack; section padding holds at 48px far longer than most systems would keep it.