# elluminate Design System — Figma Conformance Reference
> **Read this first.** This document is the canonical specification for the elluminate clinical platform's UI. **Drop it into context alongside any Figma design** (or screenshot, or third-party markup) and use it to audit, translate, and align that design with elluminate standards.
>
> **Primary use case (Product Managers):** you share a Figma design that may have been built with Tailwind, Material, generic Bootstrap, a third-party kit, or no system at all. The AI's job is to **map every visual element to its elluminate equivalent** — colors, typography, spacing, components, icons — and produce either (a) a list of conformance violations with fixes, or (b) the corrected elluminate-styled HTML/CSS.
>
> **Output modes:**
> 1. **Audit** — list every element that doesn't conform, name the elluminate replacement, cite the section.
> 2. **Translate** — output the corrected markup using elluminate classes / tokens only.
> 3. **Generate** — when asked to build new screens from the Figma, use elluminate classes from the start; never reach for Tailwind / Material / generic Bootstrap.
>
> **Philosophy:** the elluminate chrome is a **calm canvas**; vibrant data colors live on top of it. UI surfaces stay quiet so the data is loud. **All values are in pixels and hex** — no rem/em, no variables required to read this.
>
> **Companion files:** `index.html` is the visual reference (every component rendered); `style.css` has the canonical CSS tokens.
---
## A. Brand assets & icon kit
### A.1 Logo (masthead — dark-surface variant)
The elluminate brand mark — a stylized **"e"** built from a white letter silhouette layered with four colored accent squares (cyan, lavender, two oranges) — **ships with this design-system package** in two formats:
| File | Format | Use for |
|---|---|---|
| **`elluminate_e-logo.svg`** ★ | SVG (vector, source-of-truth) | **Figma, product UI, anywhere scalable rendering matters** — preferred for all new work. viewBox `0 0 89.09 120` (portrait, ~3:4 aspect). |
| `elluminate_e-logo-for-dark.gif` | GIF (raster) | legacy use, fallback for environments that can't render SVG |
**Designed exclusively for dark surfaces.** The mark contains white shapes (the readable "e" letter) layered over the four colored accent squares. Place it on dark backgrounds (`#182B3B` masthead, dark `.toolbar` gradients) so the white "e" reads. On light surfaces the white silhouette disappears and only four disconnected colored squares remain — **don't use it on white/light pages.**
#### Brand colors (mark only)
| Role | Hex | Note |
|---|---|---|
| White "e" silhouette | `#FFFFFF` | the readable letter — only visible on dark surfaces |
| Cyan accent | `#05C2DF` | top square |
| Orange accent | `#ED7514` | left + bottom-right squares |
| Lavender accent | `#928CFF` | middle square |
> These four hexes are **brand-mark exclusives** — they appear in the logo only. Don't introduce them as UI chrome, badges, or text colors. The system palette stays in §2.
#### Copy-paste SVG (for Figma)
To drop the brand mark into a Figma file: **select all** and **copy** the SVG block below, then in Figma use **Edit → Paste** (Ctrl/Cmd + V). Figma imports the markup as native vector shapes — you can resize, recolor (don't!), or extract individual squares from the resulting frame.
```svg
```
> **Tip for Figma:** after pasting, group the imported shapes (Ctrl/Cmd + G) and rename the group **"elluminate-logo"**. To use it on a frame, drop a dark fill (`#182B3B`) underneath so the white "e" is visible.
#### Placement in the masthead
The logo sits in the top-left of the `50px` masthead, **immediately before** the "elluminate" wordmark, with `10px` gap between the mark and the text. Render at **`28px` tall** (width auto-sizes to ~`21px` given the 89.09 × 120 viewBox).
```html
elluminate· {Page or product name}
```
```css
.masthead-logo { display: flex; align-items: center; gap: 10px; }
.masthead-logo-mark { height: 28px; width: auto; display: block; }
.masthead-logo-wordmark { font-weight: 500; color: #FFFFFF; }
.masthead-logo-suffix { font-weight: 300; color: #A3C5E2; /* blue-300 */ }
```
> **Don't** recolor, outline, drop-shadow, pad, or rearrange the squares. The mark is fixed as shipped.
>
> **Don't** use this logo on light surfaces (white pages, light toolbars, modals) — the white silhouette disappears and only four disconnected squares remain. If a light-surface variant is needed for a Figma design, **ask** before substituting — there is no light-variant in this package today.
>
> **Don't** swap the asset for an emoji, an SVG re-trace, or a generic placeholder. Use the bundled `elluminate_e-logo.svg` (preferred) or `elluminate_e-logo-for-dark.gif` (raster fallback) as shipped.
### A.2 Font Awesome icon kit (canonical icon source)
**Every icon in elluminate must come from this kit.** No emoji icons (✓, ✗, ★, ⚠️, ℹ️), no generic Material Symbols, no inline SVG glyphs from Heroicons/Lucide/Phosphor, no random icon fonts. If you see a glyph in a Figma design, replace it with the equivalent Font Awesome icon below.
```html
```
The kit ships **Font Awesome 7 Pro** (Light / Solid / Regular), **Font Awesome 6 Brands**, **Duotone**, **Sharp**, **PrimeIcons**, and the elluminate custom icon set (`ec ec-*`).
| Weight | Class prefix | Use for |
|---|---|---|
| **Light** ★ default | `` | almost every icon — toolbars, buttons, dialogs, chevrons, badges, table actions |
| **Solid** | `` | toggled-on / active states only — filter applied, item favorited, notifications enabled |
| Regular | `` | rare decorative cases |
| Brands (FA6) | `` | external vendor logos |
| Duotone / Sharp | ``, `` | occasional decorative |
| PrimeIcons | `` | inside PrimeNG widgets only |
| Custom (elluminate) | `` | platform-specific glyphs (e.g. eClinical brand marks) |
> **Solid icons render in primary blue (`#1F68A8`)** — the standard "engaged / active" cue. The "thin gray → fat blue" weight + color shift means "off → on". **Don't override** with semantic colors (no yellow on a favorited star, no red on a liked heart). Exceptions: inside `.btn-primary` / `.btn-danger` / `.badge` the solid icon inherits the container's text color; on dark surfaces it goes near-white (`#F6F6F6`).
> **Disclosure indicators** for collapse/expand (accordions, lists, panels) are always **light chevrons**: `fal fa-chevron-right` when collapsed, `fal fa-chevron-down` when expanded (or rotate the right-chevron 90° via CSS). **Never use `+` / `−` text characters.**
> **Common icons:** `fa-chevron-down`, `fa-chevron-right`, `fa-chevron-up`, `fa-chevron-left`, `fa-caret-down`, `fa-caret-right`, `fa-gear`, `fa-filter`, `fa-magnifying-glass`, `fa-pen-to-square`, `fa-floppy-disk`, `fa-rotate-right`, `fa-xmark`, `fa-ellipsis-vertical`, `fa-trash`, `fa-bell`, `fa-user`, `fa-circle-exclamation`, `fa-circle-info`, `fa-triangle-exclamation`, `fa-check`, `fa-clock`, `fa-arrow-right`, `fa-plus`, `fa-bars`, `fa-star`, `fa-heart`, `fa-bookmark`, `fa-eye`, `fa-hourglass-half`. Always pair with `fal` (default) or `fas` (active).
---
## B. How to use this document with a Figma design
When given a Figma design (or screenshot, or HTML markup), work through this in order:
1. **Scan top-down** for every element type — masthead (and its sub-elements: app-grid, header label, dropdowns, sub-nav tabs, filter pills, +N overflow, search, trailing toolbar), side nav, page title, buttons, cards, forms, tables, modals, badges, icons, status pills, alerts, tabs, dropdowns, accordions, charts.
2. **For each element, find its elluminate equivalent** in §F (Figma element → elluminate component map) or in §6 (Components reference). **For anything inside the dark `50px` top app bar, use §6.16 (Masthead deep dive)** — masthead chrome uses dedicated components (``, `.sub-nav-container-horizontal`, `.filter-pill-dark`, `.ecs-pill-overflow-dropdown`, ``, `.btn-icon-for-dark`, `.toolbar-badge`) that look similar to but **must not be confused with** their page-body equivalents in §6.7 / §6.8.
3. **Translate every token**: every color must be in §2 palette; every dimension in §4; every shadow in §5; every z-index in §7; every icon in the kit above (§A.2); the masthead logo from §A.1 ships with the package — never substitute it.
4. **Replace foreign class names** using §D (Tailwind / Material / Bootstrap / generic CSS → elluminate translation tables).
5. **Reach for the most-used variant first.** Each component section in §6 lists variants in **production-usage order** — the top entry is the safe default for almost every screen.
6. **Flag anti-patterns** using §G — call them out as violations with the elluminate fix.
---
## C. Figma audit checklist (run for every design)
A 18-point quick scan. If a Figma design fails any of these, fix it before sign-off.
| # | Check | If wrong, replace with |
|---|---|---|
| 1 | Body text is **12px Roboto**, color `#1A1A1A` | inherit from ``; never set explicit font on body copy |
| 2 | Border radius is **`4px`** everywhere | radius `4px` (badges are the only exception → `10px` pill) |
| 3 | Default border is **`1px solid #DDDDDD`** | `border-color: #DDDDDD` |
| 4 | Buttons: **24px** default, **32px** medium, **40px** large | `.btn` / `.btn-md` / `.btn-lg` |
| 5 | Inputs: **28px** native, **32px** form-control | `` / `.form-control` |
| 6 | Table header rows **32px**, body rows **22px** | `.table` |
| 7 | Toolbars **32px**, masthead **50px**, sidebar **220px** wide | `.minimal-toolbar` (default) / `` / sidebar |
| 8 | Icons are **Font Awesome Light (`fal`)** by default; Solid (`fas`) only for active/toggled-on states | `` |
| 9 | Active item indicator is **`2px` orange (`#F77623`)** rail (left for lists, bottom for tabs) | `.active` modifier |
| 10 | Status colors: success `#1F8915`, warning `#EEB12B`, error `#BD341F`, info `#3F42C5`, brand `#3B85C7`, action `#1F68A8` | `.text-*` / `.bg-*` / `.badge-*` |
| 11 | Disabled = `opacity: 0.4` + `pointer-events: none` | `disabled` attribute or `.is-disabled` |
| 12 | Standard transition is `all 300ms ease` | inherited; don't override |
| 13 | Modal backdrop `rgba(0,0,0,0.4)`; modal shadow `0 20px 40px rgba(0,0,0,0.4)`; **header is white** (`32px`, `1px solid #E8E8E8` bottom border) — **never** the dark page-toolbar gradient | use `` |
| 14a | **Required-field validation:** red border on the empty input + `placeholder="Required"`. **No popup, no inline alert** — the visual is the signal. | `.error` on input + `placeholder="Required"` |
| 14b | **Server-returned (API round-trip) validation errors** — duplicate names, server-enforced uniqueness, permission denials, conflict errors, save failures, anything in the API response's error payload — surface as a **popup toast**. Optionally mark the offending input(s) with `.error`. **Not** an inline `.alert.alert-danger` at the top of the form. | `AlertsService.showErrorToast(serverMsg)` or `showModelStateError(response.modelState)` — see §6.4.2 |
| 14c | **No** inline error text below the input (deprecated `.inline-error` / `.inline-warning` pattern) | always remove |
| 15 | Z-index from §7 scale only — never invented | pick from §7 (e.g. `8997` modal, `100002` tooltip) |
| 16 | No emoji or generic icons — everything from the FA kit (§A.2) | `` |
| 16a | Masthead shows the elluminate brand mark (`elluminate_e-logo.svg`, `28px` tall) immediately before the wordmark — see §A.1 | `` |
| 16b | Masthead chrome uses **masthead-only components** (not page-body equivalents): `` (not `.dropdown-menu`), `.sub-nav-container-horizontal` (not `.nav-tabs`), `.filter-pill-dark` (not `.filter-pill-light`), `.btn-icon.btn-icon-for-dark` (not bare `.btn-icon`) — see §6.16 | apply the masthead-specific class for each element |
| 16c | Masthead-only accent `#4EE5FB` (active filter icon) does **not** appear elsewhere in the design | restrict to `.ecs-masthead-toolbar` |
| 17 | One primary button per form/dialog footer (others are secondary) | `.btn-primary` once + `.btn-secondary` for the rest |
| 18 | Headings use the compressed scale (h1 30, h2 19, h3 16, h4 14, h5 12, h6 10 px) — never custom font sizes | match §3.2 exactly |
---
## D. Style translation tables
### D.1 Tailwind → elluminate
#### Colors
| Tailwind | elluminate |
|---|---|
| `bg-white`, `text-white` | `.bg-white`, `.text-white` (`#FFFFFF`) |
| `bg-gray-50`, `bg-slate-50` | `#F6F6F6` (off-white surface) |
| `bg-gray-100` | `#F6F6F6` |
| `bg-gray-200`, `border-gray-200` | `#E8E8E8` (light gray) |
| `bg-gray-300`, `border-gray-300` | `#DDDDDD` (default border) |
| `text-gray-400`, `bg-gray-400` | `#BBBBBB` (mid-tone — scrollbar only) |
| `text-gray-500`, `text-gray-600`, `text-slate-500` | `.text-gray` (`#767676`) |
| `text-gray-700`, `text-gray-800` | `#4B4B4B` (input text) |
| `text-gray-900`, `text-black` | inherit (`#1A1A1A`) — don't set |
| `bg-blue-50`, `bg-sky-50` | `#F0F5FA` (`.bg-highlight-light`) |
| `bg-blue-100`, `bg-sky-100` | `#CADDEE` (`.bg-highlight`) |
| `bg-blue-500`, `text-blue-500` | brand `#3B85C7` (`.bg-info`, `.text-info`) |
| `bg-blue-600`, `text-blue-600`, `bg-blue-700` | action `#1F68A8` (`.text-primary`, ``) |
| `bg-slate-900`, `bg-gray-900` | masthead `#182B3B` |
| `bg-green-500`, `text-green-500`, `bg-emerald-500` | `#1F8915` (`.text-success`, `.badge-success`) |
| `bg-yellow-400`, `bg-amber-400` | `#EEB12B` (`.bg-warning`, `.badge-warning`) |
| `bg-red-500`, `bg-red-600`, `text-red-500` | `#BD341F` (`.text-danger`, `.badge-danger`) |
| `bg-orange-500`, `text-orange-500` | `#F77623` — **active rail only**, never chrome |
| `bg-indigo-600`, `text-indigo-600`, `bg-violet-600` | `#3F42C5` (information accent — rare) |
| `bg-teal-*`, `bg-cyan-*` | not in elluminate — replace with brand blue or remove |
| `bg-pink-*`, `bg-rose-*` | not in elluminate — replace with semantic equivalent |
#### Typography
| Tailwind | elluminate |
|---|---|
| `text-xs` (12px) | default body — inherit, don't set |
| `text-sm` (14px) | `
elluminate
· {Page or product name}