STTIL Brand System — Visual Preview

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.

⚡ 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)