In this post, we'll explore 2 new tools which developers can use, together with APEXlang, to generate uniform and future-proof applications. The first is the UX Pattern Catalog, a sample app that shows proven page and component patterns built the APEX way. The second is the APEX Utility CSS Reference, a searchable reference for the u- utility classes you can drop onto regions, items and templates.

The UX Pattern Catalog: working examples with guidelines

The UX Pattern Catalog is a sample application in Oracle's official APEX GitHub repo. Oracle describes it as a portable reference app for APEX developers and AI coding agents. That second audience is a hint at what makes it different from older sample apps: every pattern ships with an explanation of the experience it is meant to create.

What's inside

The patterns are grouped by type of page:

Every page is a real, running APEX page built with standard Universal Theme components. Nothing is a screenshot or a mock-up, so you can open Page Designer and see exactly how it was assembled.

A good starting point

Open the page help of any pattern and you get four short headings: Purpose, When to Use, When to Avoid and AI Guidance. The simple dashboard, for example, is meant for scan-first summaries of a few measures, and it explicitly tells you to avoid it when users need deep analysis or multi-step workflows.

This also goes one level deeper. Region comments state the intent of each component and its role in the pattern. A line-with-area chart is labelled as a lightweight trend visual, with a note to keep it subtle and not pile on competing series.

The app also carries a shared guidelines file with rules that apply across all patterns. A few worth adopting in your own apps:

• Use real state values. Badges and statuses should use success, danger, warning and info, so Universal Theme's colour coding and accessibility semantics work.

• Format for scanning. Thousands separators on large numbers; consistent dates, percentages and units within a region.

• Scope your custom CSS. Put a pattern-specific class such as app-MetricCards on the region and prefix every selector with it, with a short comment explaining the rule.

• Keep detail actions in the region header. A "view details" link belongs in the region's Edit button slot, not in the content.

The Utility CSS Reference: one searchable page for every u- class

If you've used APEX for a while, you know u- classes exist. The hard part was always remembering which ones, and what they actually do. The APEX Utility CSS Reference, introduced with 26.2, fixes that. At the moment of writing, it documents over 1,600 classes across more than 20 categories.

How the page works

Each class gets a row with its name, any aliases, a live preview, the exact CSS it applies, a description, whether it is responsive, its tier, and a short note on where it fits in APEX. You can search by class name, alias, CSS property or description, and filter by category, tier or responsive support.

The categories at a glance

The categories cover the full range of layout and styling work: accessibility, background, border, color, display, effects, flex, gap, grid, interactivity, layout, list, margin, media, outline, overflow, padding, positioning, scrolling, sizing, tables, typography, visibility and z-index. A few examples of what that means in practice:

• Layout: u-display-flex, u-flex-col, u-justify-between, u-align-items-center, u-grid-cols-3, u-col-span-2

• Spacing: u-gap-4 (1rem), u-gap-x-2, u-row-gap-6, all driven by --u-space-* tokens

• Borders and shape: u-border, u-border-block-end-1, u-rounded-md, u-rounded-full

• Effects: u-shadow-2, u-opacity-50, u-filter-blur-sm

• Accessibility: u-vh hides content visually but keeps it available to screen readers

Semantic colors, modern CSS and tiers

Color classes are based on roles, not hex values: u-bg-surface-card, u-text-muted or u-bg-state-success-low all read from --u-* theme variables, so they adapt automatically to theme changes. Borders and spacing use modern, tokenized CSS that also works in right-to-left languages. Each class also has a tier: use Default and Extended for new work, and try to avoid (or update) Compat and Deprecated classes in existing apps.

Using both in your daily work

The catalog decides the structure of a page, the utility classes handle fine-tuning layout and styling. Here are a few tips about integrating these tools in your development process:

1. Point your AI assistant at the catalog and CSS Reference. The "AI Guidance" sections and region comments are written so coding agents can follow them. If you generate APEX pages with an AI tool, give it the CSS Reference and ask it to use only Default or Extended tier utility classes.

2. Reach for a utility class before writing CSS. Need a toolbar with the button pushed right, or three cards in a row? Add u-display-flex u-justify-between u-align-items-center or u-grid-cols-3 u-gap-4 to the region's CSS Classes attribute. Search the reference by CSS property if you don't know the class name.

3. Use semantic colours for every status. Map your status column to success, danger, warning or info, and use the u-bg-state-* and u-on-state-* classes for anything custom.

4. When you do need custom CSS, scope it. Follow the catalog's rule: a descriptive class like app-OrderSummary on the region, every selector prefixed with it, and a one-line comment.

5. Use it as a review checklist. During code review, look for hard-coded hex colours, unscoped CSS and Compat-tier classes. Each can be a sign that a page needs updating.

Wrapping up

These two tools provide great added value, especially when generating applications with APEXlang. Your apps will get more consistent, easier to theme, and easier for developers (and AI agents) to understand. Of course, the catalog only contains a few patterns now, but it's a great starting point.

Links

• Oracle APEX UX Pattern Catalog on GitHub

• APEX Utility CSS Reference