A complete, self-contained design system and living documentation site for Oracle’s hospitality suite — OPERA Cloud (PMS), Simphony (POS), and MICROS hardware. It’s built using Claude (Design) on a deviation from Oracle’s Redwood language: one decisive Oracle Red against warm slate neutrals, with Ocean and Pine accent ramps for information and success states. Every color, type ramp, spacing unit, shadow, and radius is defined as CSS tokens, so the whole system stays consistent and themeable from a single source of truth.
The documentation dashboard is a single page with a fixed, grouped navigation rail and thirteen browsable sections: Overview, Brand voice, Logos & Lockups (with clear-space rules), Color, Typography, Spacing & Elevation, Iconography, Illustration, Data Textures, Components, Templates, UI Kits & Products, and Slides. The foundations aren’t just described — they’re rendered as live specimen cards pulling from the real tokens.
The bells and whistles: a light/dark theme that toggles instantly with no reload, recoloring backgrounds, navigation, and typography for full readability while preserving brand fills; click-to-zoom lightboxes on every logo and lockup; and a set of genuinely interactive product recreations — a working front-desk check-in flow, a touch POS order screen with a live check, and a hardware showcase — each built from the same component primitives the system documents. Navigation uses a fixed-duration animated scroll, performance-tuned so even long jumps stay snappy across the heavy embedded previews.
It’s also practical to hand off. The Templates section generates a downloadable, editable PowerPoint built from the slide designs, and the entire thing ships as an offline, self-contained folder — fonts, scripts, and images inlined — that runs on any static host with no build step and no external dependencies.