Design system
2 notes on design system.
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)
- Logo row, top, 25 px high: product wordmark + a 25 px outlined "expand" square at the right.
- Headline, Mona Sans Medium, up to 50 px on the large tiles (variable
H1: Mona Sans SemiBold 50, line 1.15, tracking −2). - Sub line, Archivo Light 16 (variable
P2 - Light: line 1.29). - 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 (
clipsContenttrue, radius 20 on every tile). - 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)
- Left rail (≈ 248 wide): SmarterDx wordmark, a tenant switcher card (
Health System,HS · 11 roles),CLINICAL OPERATIONSgroup (Cases, Metrics, Denials, Charges),CASE QUEUESsub-list with counts (My Cases, Pending, Query Sent, All Cases), aCASE PILOTrow, then Search, Support and the user card. - 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. - Filter bar: four labelled selects (
ASSIGNED TO,STATUS,IMPACT,SORT) and ann cases in viewcell. - 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 gradientStart reviewbutton, andOpen case/Activity historylink rows. - 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 Systemas 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,842and98%are demo values. - Remove the
CASE PILOTrail 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.