diff --git a/signal-ui/demo/brand-preview.html b/signal-ui/demo/brand-preview.html new file mode 100644 index 0000000..dcd5025 --- /dev/null +++ b/signal-ui/demo/brand-preview.html @@ -0,0 +1,701 @@ + + + + + + STTIL Brand System — Visual Preview + + + + + + +
+ + +
+
+
STTIL Solutions
+
Speak the truth in love — Brand System v1, April 2026
+
PALETTE · TYPOGRAPHY · COMPONENTS · SPARKLE TOKENS
+
+
+ +
+
+ + +
+
Color Palette — Option A (Default)
+ + +
+
Teal — Dominant System Color
+
+
teal-50
#EEF8F8
+
teal-100
#CBE9E9
+
teal-200
#97D3D3
+
teal-300
#5BBBBB
+
teal-400
#2EA3A3
+
teal-500
#1A8A8A
+
teal-600 ★
#147A7A
+
teal-700
#0F5E5E
+
teal-800
#0A4444
+
teal-900
#072E2E
+
teal-950
#041A1A
+
+
+ + +
+
Tangerine — Accent Light / Warm Glow Dark
+
+
tng-50
#FFF4EE
+
tng-100
#FFE4CC
+
tng-200
#FFC090
+
tng-300 ◆
#FFB070
+
tng-400 ◆
#F07840
+
tng-500 ★
#E06028
+
tng-600
#C04E1C
+
tng-700
#903A14
+
tng-800
#6A2A0C
+
tng-900
#3E1808
+
+
+ ★ primary accent (light mode)  ·  ◆ warm tangerine glow — promoted for dark surfaces +
+
+ + +
+
Neutral — Teal-Toned
+
+
neutral-0
#FFFFFF
+
neutral-50
#F4F9F9
+
neutral-100
#E5EEEE
+
neutral-200
#C8D8D8
+
neutral-300
#A3BEBE
+
neutral-400
#7A9E9E
+
neutral-500
#5A7E7E
+
neutral-600
#426060
+
neutral-700
#2E4444
+
neutral-800
#1C2C2C
+
neutral-900
#111A1A
+
+
+ + +
+
Semantic — Status Colors
+
+
+
+
✓ Active / Success
+
success-500 / 100
#1A7A4E / #C8EDD8
+
+
+
+
⚠ Expiring Soon
+
warning-400 / 100
#D97B35 / #FDECD5
+
+
+
+
✕ Denied / Error
+
error-500 / 100
#C83030 / #F8CCCC
+
+
+
+
⚡ PA Required
+
tng-500 / 100
#E06028 / #FFE4CC
+
+
+
+
○ PA Pending
+
purple-500 / 100
#7A5EA0 / #E2D8F0
+
+
+
+
+ + +
+
Dark Mode Sparkle — Copper as Warm Gold
+
+
+
copper-glow shadow
+
--copper-glow
+
Applied to a single featured or top-priority card. The glow reads as warm light, not neon. One glow per view — this is the sparkle signal.
+
+
+
copper shimmer border
+
copper-300 at 40% opacity
+
Subtle border for elevated panels. On teal-800/900 backgrounds, copper-300 (#E49655) reads as warm gold — AA-safe for text at 5.6:1.
+
+
+
priority-row-bg
+
copper-500 at 9% opacity
+
Warm gold wash for the highest-priority worklist row. Visible without reading as orange. Pairs with copper-text patient ID label.
+
+
+
+ Dark mode rule: copper-300/400 permitted for borders, text, active states (2–3 points per section). Teal remains dominant. +
+ + +
+
+
+
Signal CGM
+
by STTIL Solutions
+
+
dark mode preview
+
+
+
+
⚡ PA Required
+
6
+
copper-glow + copper border
+
+
+
⚠ Expiring ≤30d
+
14
+
standard teal-900 card
+
+
+
✓ Active Coverage
+
142
+
standard teal-900 card
+
+
+
+
+ + +
+
Typography
+ +
+
+
display-xl
48px · 700 · Plus Jakarta Sans
+
Coverage
+
+
+
display-lg
36px · 700
+
Signal CGM Dashboard
+
+
+
heading-lg
24px · 600
+
Coverage Worklist
+
+
+
heading-md
20px · 600
+
PA Required — 6 Patients
+
+
+
body-lg
16px · 400 · Inter
+
Signal CGM calculates coverage expiry per device using CMS wear-day rules.
+
+
+
body-sm
14px · 400
+
Last import: 2026-04-23 · 06:00 UTC · 162 patients · sorted by priority score
+
+
+
data
14px · 500 · JetBrains Mono
+
PT-00142  ·  Priority: 98  ·  Days Left: 4
+
+
+
caption
12px · 400
+
PHI-safe · patient_id crosswalk only · no PHI stored in Signal CGM
+
+
+ +
+
+
Tangerine call-out box
+
tng-100 background · tng-700 text · tng-500 left border. Use for one key insight per document section.
+
+
+
Standard info block
+
elevated background · neutral border. For contextual notes that don't require a premium call-out treatment.
+
+
+
+ + +
+
Components
+
+ +
+
Buttons
+
+ + +
+
+ + +
+
+ Primary = teal-600 · Secondary CTA = copper border · Ghost = neutral · Danger = error-500 +
+
+ +
+
Status Badges — Healthcare Workflow
+
+ ✓ Active + ⚠ Expiring Soon + ⚠ Critical Expiry +
+
+ ⚡ PA Required + ○ PA Pending + ✕ Denied +
+
+ ℹ Info +
+
+ Always icon + label — never color only (per WCAG + brand rules) +
+
+ +
+
+ + +
+ STTIL Solutions Brand System v1 · April 2026 · Speak the truth in love +
+ +
+ + diff --git a/signal-ui/demo/index.html b/signal-ui/demo/index.html new file mode 100644 index 0000000..3f631ef --- /dev/null +++ b/signal-ui/demo/index.html @@ -0,0 +1,1005 @@ + + + + + + Signal — Outreach Worklist + + + + + + +
+ + + + + + + + +
+ +
+
+
Outreach Worklist
+ Demo data · Apr 23, 2026 +
+
+ + + Request Access → +
+
+ +
+ + +
+
+
⚡ Prescriber Action
+
6
+
supply lapsed or renewal due — prescriber contact required
+
▲ action required today
+
+
+
⚠ Resupply Ready
+
14
+
patients within resupply window — initiate now
+
initiate resupply now
+
+
+
✓ Active
+
142
+
patients with supply on track — no action needed
+
no action needed
+
+
+ + +
+
+
+
Outreach Worklist
+
162 patients · sorted by priority score · Apr 23, 2026
+
+
+ + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Patient IDDevicePayerDays LeftStatusPriorityAction
+
PT-00142
+
★ TOP PRIORITY
+ 		Dexcom G7Medicare Part B4 days⚡ Renewal Due98
PT-00387
FreeStyle Libre 3Medicaid — GA11 days⚠ Supply Lapsed87
PT-00291
Dexcom G7Medicare Part B18 days⚠ Resupply Ready74
PT-00556
Omnipod 5BCBS — FL22 days⚠ Resupply Ready68
PT-00103
FreeStyle Libre 3Medicare Part B31 days⚠ Resupply Ready52
PT-00478
Dexcom G7Aetna45 days✓ Active41
PT-00612
FreeStyle Libre 3UnitedHealth62 days✓ Active28
PT-00089
Dexcom G7Medicare Part BExpired✕ Supply Lapsed—
+ +
+ + 🔒 PHI-safe — patient names and DOBs never stored. Crosswalk: patient_id only. + + Showing 8 of 162 · Load more → +
+
+ +
+
+
+ + +
+ + + +