A self-contained preview of the elluminate design tokens and component patterns. Two palettes work together: the calm elluminate chrome and the vibrant Data-Color palette for user-meaningful data. Pair this with design.md for the AI-readable spec.

01 elluminate Palette

Used for all UI chrome (shells, buttons, text, borders). Calm by design — the canvas for vibrant data.

02 Data-Color Palette

For data visualizations, charts, status colors the user owns, and category coding. Showing the canonical highlight stops (100, 200, 500, 700). Full ramps live in utils/color-palette.scss.

03 Gradients

Used for buttons, masthead surfaces, and severity bars. Applied as background-image.

04 Typography

Roboto, falling back to Helvetica Neue / Helvetica / Arial. The app is dense — body text is 12px, the heading scale is compressed.

05 Spacing & Sizing

Standardized heights and dimensions. The app is built on these — never invent custom heights without reason.

06 Shadows

Listed in production-usage order. Two shadows cover ~95% of the app: --shadow-normal on every card, --shadow-large on every overlay/popover/toast.

07 Z-Index Scale

08 Buttons

The default .btn is the Narrow button (24px, 12px text, weight 500). Variants are listed in production-usage order — the most common ones are first.

09 Form Elements

Inputs default to 28px tall with a 1px solid #DDDDDD border and 4px radius. On focus the border becomes #1F68A8. Validation errors use a #CD482D border.

10 Alerts

Inline alerts — Bootstrap-style .alert blocks dropped as a <div> inside dialogs, panels, or forms to surface persistent in-context messages (connection-lost banners, contextual tips, advisories). Not for form validation — validation summaries surface in popup toasts (§16), and empty required fields use red border + placeholder="Required" with no popup. The deprecated .inline-error / .inline-warning text-below-input pattern is gone.

11 Badges

Pill-shaped (10px radius, 22px min-width, 12px text). Listed in production-usage order — success/warning/danger/info/secondary cover almost every badge in the product.

12 Tables

Header row 32px tall, body row 22px. Header text 11px, body text 12px. Borders are 1px solid #DDDDDD all around.

13 Cards & Section Headers

14 Toolbars

Listed in production-usage order. The minimal (transparent) toolbar is by far the most-used — that's the one you reach for in panel headers, widget headers, and inset toolbars. The dark gradient toolbar is rare and reserved for the very top of the page.

15 Masthead

The 50px top app bar — a dedicated component (<ecs-masthead>) with masthead-only chrome elements that must not be substituted for their page-body equivalents (.dropdown-menu, .nav-tabs, gray .btn-icon, etc.). Background #182B3B, secondary text #CADDEE, hover bg #1E4060, divider lines #215887, active rail #F77623, active filter accent #4EE5FB (masthead only).

All seven regions left → right: app grid · brand mark · header label · dropdowns · sub-nav tabs · trailing toolbar (search/filter slots elided)

Data Central Subjects

Study , +3

Module

Subjects

Sites

Visits

Hover any element to see its interaction state. The aqua filter icon (#4EE5FB) signals an active filter — this color is masthead-only and must not appear elsewhere.

.ecs-menu-btn opens the 850px mega-menu flyout · .eclinical-logo renders the brand mark at 28px tall

The masthead supports two search patterns — pick by intent. Both are content-projection slots ([search] / [searchBy]) so the markup is supplied per-route.

16 Popup Toasts

Transient floating alerts — primarily for server-returned messages (API round-trip). Use cases:

• ★ API round-trip validation errors (the canonical use case) — duplicate names, server-enforced uniqueness, permission denials, conflict errors (HTTP 409), save failures, anything in an API response's error payload. Always a toast, never an inline alert.
• API round-trip success / info — save confirmed, export ready, deletion completed, file uploaded.
• Async events not initiated by the user — signalr push, websocket event, background job complete, server-pushed notification.
• Multi-error model state — showModelStateError(response.error.modelState) joins all server messages with <br/> into one sticky toast.

Rendered by DevExtreme's dx-toast via the shared AlertsService — never hand-rolled. Position: top-center, 20px from top. Width: 370px. Z-index: 9006. Default display time: 5000ms (error toasts are sticky — they stay until dismissed).

Required-field exception: an empty required field is not announced via toast — and usually never reaches the server (the round-trip is short-circuited client-side). Red border + placeholder="Required" only. See §10 path A.

constructor(private alerts: AlertsService) {}

// Typical API round-trip — toast on both branches:
this.listingApi.save(payload).subscribe({
    next: ()         => this.alerts.showSuccessToast('Saved. Listing applied to all 17 sites.'),
    error: response  => {
        // Single server-returned message (e.g. duplicate name, permission denied):
        this.alerts.showErrorToast(response.error.message);

        // OR — multi-error ModelState from a .NET API response
        // (joined with <br/> into one sticky toast):
        this.alerts.showModelStateError(response.error.modelState);

        // Optionally highlight the offending field in the form:
        if (response.error.field === 'name') this.nameClasses.error = true;
    }
});

// Other server-pushed events:
this.alerts.showToast('Export ready. File is in the downloads panel.');   // info
this.alerts.showWarningToast('Partially saved — 2 sites rejected the update.');

17 Tabs

18 Dropdown Menus

19 Modals

Use <dialog-container> for new dialogs — that component is wrapped around an <ngb-modal> and standardizes the header / body / footer regions. It's the dominant modal pattern in the product (100+ files). The previews below show the rendered shape; in code you write <dialog-container [title]="…" [hideButtonText]="Cancel" [closeButtonText]="Save" [closeButtonClass]="btn-primary">…</dialog-container>. Backdrop is rgba(0,0,0,.4); modal shadow is 0 20px 40px rgba(0,0,0,.4).

// Tall list-heavy dialog (most common)
this.modalService.open(MyDialogComponent, {
    windowClass: 'modal-full-height',
    backdrop: 'static'
});

// Typical edit / confirmation dialog (default — 600px)
this.modalService.open(MyDialogComponent, {
    windowClass: 'modal-md'
    // or omit windowClass entirely — .modal-md is the default
});

// Small confirmation ("Delete this listing?")
this.modalService.open(ConfirmDialogComponent, {
    windowClass: 'modal-sm'
});

20 Tooltips

Use ng-bootstrap's [ngbTooltip] directive for almost every tooltip in the product (used in 100+ components — toolbars, icon buttons, table cells, badges, form fields). It renders a .tooltip element styled with elluminate's overrides: 12px white text on near-black, 350px max-width.

21 Accordion

Header 32px tall on #F6F6F6, body has 0 0 6px 0 padding and 60px minimum height. Disclosure indicator is a chevron, never plus/minus. Click to expand.

22 Risk Levels

Use .risk-level-{undefined|low|high-low|low-medium|high-medium|high|extreme-high} — never invent new levels.

23 Indicators

"Thinking" indicator from the Matilda assistant: animated text gradient + breathing dot.