A distilled, browser-ready reference for Oracle APEX's Vita design system — 300+ resolved CSS custom properties, 45 real component types, and a worked example of building a brand-new Theme Style the way Oracle builds its own. Drop it into any AI's context and get markup that's actually consistent with a real APEX page.
Every region type Oracle APEX ships in Page Designer, grouped the way you'd actually reach for them. Expand a category to see what each one is for — all styled purely with tokens from this repo.
Rendered right now, in your browser, using nothing but the CSS custom properties in tokens/vita-emerald.css.
Each card is a real prompt, with a rendered Output view and the exact Output code the AI returned — copy either straight into a project.
Pick a style in the live demo above, or swap the :root stylesheet in your own project — the exact same markup re-skins across all eight, no HTML changes required.
| Style | Accent | Nav | Notes |
|---|---|---|---|
| Vita | #056AC8 | Dark | Oracle default |
| Vita Dark | #056AC8 | Dark | Oracle official dark mode |
| Vita Red | #DA1B1B | Light | Oracle official variant |
| Vita Slate | #505F6D | Dark | Oracle official variant, muted blue-gray |
| Iris | #00688C | Dark | Redwood-family "Sky" pillar, dark neutral header |
| Redwood | #5F7D4F | Light | Oracle's flagship design system, warm neutrals |
| Standard | #2178B4 | Dark | Legacy pre-Theme-42 approximation, not pixel-exact |
| Vita Emerald | #0E9F6E | Dark | New — built for this repo, softer 6px radii |
Grab the whole skill package — no dependencies, no build step.
Load the base stylesheet, then optionally a style delta on top — the same markup re-skins instantly.
Paste tokens/vita-emerald.less into Theme Roller's custom LESS editor (or wire it into a Theme Style's LESS files) for a pixel-perfect, fully-computed compile.
Paste SKILL.md and components-reference.md in as context, then ask normally.
Add both files as Project knowledge — every chat in that project inherits the tokens.
Upload the two Markdown files as knowledge files when configuring the assistant.
Copy the token map and class reference into .cursor/rules so every generation follows it.
No file upload? Paste SKILL.md straight into the system or first user message — it's plain Markdown.
