Skip to content
SmarterDx Hub

Product dashboards and panels

The file has no local variable collections and no Figma components for any of this. Every element is a plain frame, so what follows is read off frames and their styles, not off a published component. Node ids are cited so each value can be re-checked.

Another session owns the dashboard frames in the SmarterDx Templates file (lrBRnqSpJe4Ti1yBPPvbox, page Dashboards 8003:4368) and the Evergreen event-assets file (A4ziODfGV8iqYz8r3Ww89N, page Product Dashboards 4250:2). They are linked here, not duplicated. Build notes for the Evergreen set are in Clients/SmarterDx/Web/dashboard-elements-2026-09/, and the 2026-10 Prebill and Notes cards are in Web/prebill-onepager-2026-10/.

Previews: product-dashboards-and-panels/previews/.

What "product visual" means here

SmarterDx sells eight products in three colour families. The website shows each one with the same four kinds of picture, all drawn in Figma from one fictional demo dataset (Health System, HS · 11 roles):

Kind What it is Size Where it is used
Bento tile A 20px-radius card: product logo row, headline, one-line sub, one or two glass panels breaking out of the lower edge 350–910 × 425–500 Home and Platform bento grid
Dashboard screen The full app UI: left rail, page header with KPI strip, filter bar, a three-column case table or a case detail 1920 × 1080–1397 Source for crops, heroes and the cards below
Hero composition A 795 × 545 dashboard crop with 2–5 glass panels overlapping it and breaking out of its edge 850 × 650 Product page hero
How-it-works stack Three (four for Denials) 660 × 635 cards that step through one case 660 × 635 Product page "how it works"

Anatomy

Bento tile (75:10166 strip, tiles below)

  1. Logo row, top, 25 px high: product wordmark + a 25 px outlined "expand" square at the right.
  2. Headline, Mona Sans Medium, up to 50 px on the large tiles (variable H1: Mona Sans SemiBold 50, line 1.15, tracking −2).
  3. Sub line, Archivo Light 16 (variable P2 - Light: line 1.29).
  4. Panel stage: a gradient wash behind 1–3 glass panels. At least one panel breaks out of the card's lower edge, so the card clips it (clipsContent true, radius 20 on every tile).
  5. Panel contents are live text in Archivo (Regular/Light), DM Mono for codes and labels, Atkinson Hyperlegible Mono SemiBold for the occasional eyebrow.

Dashboard screen (70:3324, 1920 wide)

  1. Left rail (≈ 248 wide): SmarterDx wordmark, a tenant switcher card (Health System, HS · 11 roles), CLINICAL OPERATIONS group (Cases, Metrics, Denials, Charges), CASE QUEUES sub-list with counts (My Cases, Pending, Query Sent, All Cases), a CASE PILOT row, then Search, Support and the user card.
  2. Page header: title + count (Pending cases 49), breadcrumb in DM Mono (Prebill / Cases), a pill search field with a / key hint, and a three-cell KPI strip (QUEUE HEALTH 98%, DUE TODAY 12, MEDIAN TOUCH 11m) with a ring at the right of each cell.
  3. Filter bar: four labelled selects (ASSIGNED TO, STATUS, IMPACT, SORT) and an n cases in view cell.
  4. Case table: three columns under DM Mono caps headers (PATIENT / ENCOUNTER, RECOMMENDATION, REVIEW / WORKFLOW). Each row: avatar initials chip + name, key/value block (HAR, MRN, Visit ID, Discharged, Total charges), a status chip (TEAM REASSIGNMENT, NEW), the recommendation as a sentence with its code in blue DM Mono, tag chips (DRG, POA, HCC, CLINICAL VALIDATION), a reviewer select, one filled gradient Start review button, and Open case / Activity history link rows.
  5. Case detail and letter screens swap the table for evidence lists, a rationale panel and the appeal letter.

Hero composition (850 × 650, fill-less)

A white dashboard crop (about 795 × 545 at 55, 80, radius 12–16, clipped, soft shadow) with floaters. Depth order: one hero panel (largest, brightest), one or two supporting panels, an optional circular motif (the voice-wave ring on Notes). At least one panel breaks out of the crop's edge. A fill-less frame exports over the Figma canvas colour (#1E1E1E); that dark ground in the previews is not design.

Glass panel (the floater)

One recipe across a set: fill about 62% white with a faint white-to-#3D78FF sheen, 1px white-to-#48BBC9 stroke, GLASS effect plus background blur 12, navy drop shadows (about 19% at y 24, blur 40, plus an ambient one), radius 16. Measured on the tiles: every tile carries 1–5 DROP_SHADOW, 1–4 GLASS, 1–2 BACKGROUND_BLUR, 0–1 LAYER_BLUR.

Variants by product

Eight products, three families:

Family Products Ink Line Hot Border
Teal Authorizations, Utilization, Notes #0FAFC3 #33D4EA #79E4F7 #6FD8EA
Blue Prebill, Coding, Charges #004ADD #3D78FF #7FA8FF #8FAEFF
Purple Underpayments, Denials #6548F8 #7D64FC #A28CFE #B3A0FD

The seven products below are the ones with a drawing in this file. Coding has a lockup but no tile, hero or card stack here (smarter-coding in the Product Marketecture section, 3:654531).

Product Bento tile What the tile shows Hero (850 × 650) Dashboard crop How-it-works stack
Authorizations 75:8172 350 × 475 (original 54:1679) Aqua-to-white wash, a small outlined PRIOR AUTH REQUEST chip, an approval card with a cyan glow behind a number row, a patient card with check rows none none none
Utilization 75:8316 540 × 475 (54:1755) Teal wash, glass evidence panels (Chart evidence and a level-of-care panel) and a 30,000 data points read · 4 surfaced caption 26:8933 142:18303 Utilization-DASH 799 × 545 135:9356, 139:15780 SDxUtilization-cards 790 × 2520
Notes 75:8616 350 × 475 (54:1909) Blue-to-aqua wash, Progress note — day 3 glass card, a voice-wave ring, LABS / VITALS / MEDS tiles 26:8323 142:18688 Notes-DASH 133:8979, 139:14994 Notes cards 794 × 2302
Prebill 75:8731 910 × 500 (54:1972) Deep blue-to-violet ground, Capture every diagnosis, a glass Sepsis, unspecified organism card with evidence chips and one Send to coding button over a dashboard crop 20:1593 PreBill-Hero 70:1352 SDx-Dashboard-Prebill 1920 × 1200 126:8976, 139:13941 prebill how it works 837 × 2298
Charges 75:9859 350 × 500 (54:2510) Pale-blue wash, a large $350.00 charge card in a navy gradient with a blue button 26:7711 Charges-Hero 70:2283 Charges queue, 70:1920 Charges case 133:8978, 139:14527 Charges cards 754 × 2247
Underpayments 75:9916 530 × 425 (54:2543) Lilac wash, a $18,890.10 recovered-amount card with a bar chart, a Chart evidence table none none none
Denials 75:10080 730 × 425 (54:2629) Deep indigo-to-violet ground, a Letter of appeal card and a lab-note panel, Review & Send button 26:9543 Denials-hero 142:19584 Denials-DASH, 70:1010 Denials queue, 70:728 Denials case, 70:3039 appeal letter 135:9357, 139:15978 Denials-card 888 × 3060 (4 cards)

Also on the Platform: platform-howitworks (139:9882, 139:11238, 946 × 2502) and SDxTeam (135:9347). The solution-page product hero frames on page 54:1677 (54:3263, 54:13024, 54:22735, 54:32490, 54:42049, each 1440 × 791–900) each sit above a stat band (54:3984 …, 1280 × 405). The file does not say which product each hero is for.

Floating panels, named

Panel Where Node
Rationale (SmarterDx recommendation, High confidence · 94%, Cause, Signs + symptoms) Utilization hero Rationale inside 26:8933
Level of care, chart evidence, care note Utilization hero level of care, chart evidence, care note inside 26:8933
Progress note, labs, vitals, meds, voice-wave ring Notes hero progress notes, labs 1, vitals, meds, sound recording icon inside 26:8323
Clinical notes, Evidence Prebill hero Clincal notes (sic), Evidence inside 20:1593
Rationale, patient card, New Charge Charges hero inside 26:7711
Letter of appeal, lab note Denials hero 27:13193, 27:13220

Tokens used

Brand tokens, seen on the tiles and heroes: --deep-space-1 #051137, --orbit-blue-4 #003DDB, --orbit-blue-5 #0257FF, --orbit-blue-2 #001F78, --aurora-teal-4 #00B0C8, --aurora-teal-5 #00C8E2, --aurora-teal-6 #33D4EA, --aurora-teal-9 #D0F2F7, --nebula-purple-4 #674AF9, --nebula-purple-5 #7D64FC, --nebula-purple-6 #9C87FD, --nebula-purple-8 #D3CAFE. Library variables bound on the Prebill tile: SDX White, Nebula Purple - 7 #F2EEFF, Deep Space - 5 #B5C6FC, Gradients/Icon Gradient, text styles H1, P2 - Light.

Gradients on tiles (all linear unless noted): Prebill ground `#0FAFC3 → #00C8E2 → #0257FF → #0355F6 →

7D64FC; Notes#003DDB → #0752DD → #1A8BE2 → #28B4E7; Charges card#003DDB → #001F78` and button

#0391FD → #693AF6; Underpayments wash #FFF → #D3CAFE → #FFF, accent #9C87FD → #674AF9; Denials accent #33D4EA → #7D64FC; Authorizations/Utilization wash #FFF → #ABF6FF → #FFF. A grey #D9D9D9 → #737373 gradient on every tile is a mask, not a visible colour.

Radii: 20 on every tile; 6 (most common) and 8 on dashboard controls and cards, 4 on chips; 9–16 on floaters; full pill on search fields and buttons.

Rules

Observed on the drawings and the Evergreen critic rounds:

  • Every figure, name and code is fictional sample data: demo patients, round fake MRNs, Health System as the tenant. No real PHI, no real health-system name.
  • One glass recipe per set of floaters; do not mix a blurred glass panel with a flat white one in the same tile.
  • Exactly one filled blue button per card or screen row. Everything else is outlined or a text link.
  • DM Mono for codes, labels, money and IDs, Archivo for sentences.
  • The product's family colour owns the tile: teal for Authorizations, Utilization, Notes; blue for Prebill, Coding, Charges; purple for Underpayments and Denials.
  • Panels break out of the card edge; the card clips them. A tile where every panel sits inside the frame reads as a screenshot, not a product moment.
  • Fill-less hero frames must be composited on a real background before use.
  • Label any number on a product visual as illustrative in the caption or alt text, and never repeat it in body copy. $350.00, $18,890.10, +$7,842 and 98% are demo values.
  • Remove the CASE PILOT rail row from every dashboard screen before reuse: Case Pilot is being taken off the site (see the Case Pilot removal drafts) and the rail still shows it on the screens exported here.

Do / don't

Do Don't
Keep live text and load Archivo, DM Mono and Mona Sans first Outline the text or substitute Inter
Use the family ink and line colours for chips, rings and glows Colour a Prebill tile teal or an Authorizations tile blue
Keep numbers in DM Mono and round, fictional Show a real facility, a real MRN or a measured saving
Let one panel overlap the lower edge Fill the whole tile with a dashboard crop (Authorizations, Notes, Charges tiles have none)

SmarterDx — Business cards

Category: Collateral › Business cards (print).

!Front !Back

Previews: previews/ — front and back at 4× including bleed (270 × 162 pt), and the print-template section. The print guides are visible in all three (magenta dashed = trim line, cyan dotted = safe area); hide the guides group in Figma before exporting a print file.

Spec

Trim 3.5 × 2 in (US standard)
Bleed 0.125 in all sides, so each frame is 3.75 × 2.25 in
Safe area 0.125 in inside trim (a 3.25 × 1.75 in box)
Artboard scale 1 px = 1 pt, so a PDF export comes out at exact print size: frame 270 × 162 pt, trim 252 × 144 pt at (9, 9), safe 234 × 126 pt at (18, 18)
Sides Front (name, title, contact, logo) and back (wave art, URL)
Print guides A locked group Print guides — hide before export in each frame holds the trim and safe-area lines. Hide it before exporting.
Export settings in the file Front frame: PDF. Back frame: PNG at 3×. Logo frame: SVG. The spec note says "export each frame as PDF".
Colour mode RGB as drawn. No CMYK values, stock, finish, spot colour or vendor appear in the file.

Fonts

Layer Font Size Notes
Name (First Last) Mona Sans SemiBold 16 tracking −1%, line height 104%, #0C2061 (Deep Space 2)
Title ([Job Title]) Archivo Medium 7 line height 118%, #0257FF (Orbit Blue 5)
Contact info (email, phone, SmarterDx.com) Archivo Medium 7 line height 135%, #0257FF, right-aligned block
Back URL (SmarterDx.com) Mona Sans Medium 9 #0257FF, bottom right

The spec note lists "Mona Sans SemiBold/Medium, Archivo Medium" and says to outline text or embed fonts per vendor. An Archivo Regular 9 pt run also exists in the section's spec labels (not on the card).

Layers and positions (front, frame 7:3, origin top-left of the bleed)

Layer Id x, y w × h
Name 7:4 20, 53 71 × 17
Title 7:5 20, 76 32 × 8
Contact info 7:6 126, 110 124 × 27
SmarterDx logo (frame, SVG export) 7:19 20, 124.2 100 × 11.8
Ground frame fill #FFFFFF

Back (frame 7:7): SDx Wave (light) raster 7:8 at (−18, −6), 300 × 172.5 pt (a 4096 × 2355 px source, about 980 ppi at that size) running past the bleed on purpose; URL 7:9 at (181, 130).

Figma

File n1FlAxZ9mI0fcjKDeO9Nby ("SDX Business Cards"), page 1:2 "Business Cards 102026". Cover page 0:1.

What Node
Print template section (the deliverable) 7:2
Back 7:7 (also 17:178; 17:215 is the same back at 5×, 1350 × 810)
Brand Guide spread 9.0 Brand Applications 4:8
Request note 4:20
Front with a real person's details 9:2, and the trim-only 12:71

9:2 and 12:71 carry a named employee's details from the brand guide spread. They are not exported here. Use 7:3 as the template and duplicate it per person.

Rules (from the file)

  • Keep every text layer inside the safe area. The wave on the back may bleed.
  • Hide the print-guides group before export.
  • Name, title and contact are one consistent colour pair: Deep Space 2 for the name, Orbit Blue 5 for the rest.