92405f64e6
Dark/light mode, dynamic stat badges, Supply Lapsed / Renewal Due / Resupply Ready / Active flags, priority scoring, PHI footer. Deployed live at signal.sttilsolutions.com. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
701 lines
31 KiB
HTML
701 lines
31 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>STTIL Brand System — Visual Preview</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
/* Teal scale */
|
||
--t50: #EEF8F8; --t100: #CBE9E9; --t200: #97D3D3; --t300: #5BBBBB;
|
||
--t400: #2EA3A3; --t500: #1A8A8A; --t600: #147A7A; --t700: #0F5E5E;
|
||
--t800: #0A4444; --t900: #072E2E; --t950: #041A1A;
|
||
/* Tangerine scale (replaces copper) */
|
||
--c50: #FFF4EE; --c100: #FFE4CC; --c200: #FFC090; --c300: #FFB070;
|
||
--c400: #F07840; --c500: #E06028; --c600: #C04E1C; --c700: #903A14;
|
||
--c800: #6A2A0C; --c900: #3E1808;
|
||
/* Neutrals */
|
||
--n0: #FFFFFF; --n50: #F4F9F9; --n100: #E5EEEE; --n200: #C8D8D8;
|
||
--n300: #A3BEBE; --n400: #7A9E9E; --n500: #5A7E7E; --n600: #426060;
|
||
--n700: #2E4444; --n800: #1C2C2C; --n900: #111A1A;
|
||
/* Semantic */
|
||
--success-500: #1A7A4E; --success-100: #C8EDD8;
|
||
--warn-400: #D97B35; --warn-600: #A85A18; --warn-100: #FDECD5;
|
||
--error-500: #C83030; --error-100: #F8CCCC;
|
||
--info-500: #1A6A9A; --info-100: #C8E0EE;
|
||
--purple-500: #7A5EA0; --purple-100: #E2D8F0;
|
||
/* Sparkle */
|
||
--warm-white: #FFFAF6;
|
||
--copper-glow: 0 0 24px rgba(240,120,64,0.30), 0 2px 10px rgba(4,26,26,0.5);
|
||
/* Mode */
|
||
--bg: #041A1A;
|
||
--surface: #072E2E;
|
||
--elevated: #0A4444;
|
||
--text: #F0F4F4;
|
||
--text-h: #FFFAF6;
|
||
--text-sub: #5BBBBB;
|
||
--text-muted: #5A8080;
|
||
--border: #0F5E5E;
|
||
--font-h: 'Plus Jakarta Sans', sans-serif;
|
||
--font-b: 'Inter', sans-serif;
|
||
--font-m: 'JetBrains Mono', monospace;
|
||
}
|
||
|
||
body.light {
|
||
--bg: #F4F9F9;
|
||
--surface: #FFFFFF;
|
||
--elevated: #E5EEEE;
|
||
--text: #1C2E2E;
|
||
--text-h: #0A3030;
|
||
--text-sub: #5A7E7E;
|
||
--text-muted: #7A9E9E;
|
||
--border: #C8D8D8;
|
||
}
|
||
|
||
body {
|
||
font-family: var(--font-b);
|
||
background: var(--bg);
|
||
color: var(--text);
|
||
padding: 0;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
transition: background 0.25s, color 0.25s;
|
||
}
|
||
|
||
/* ── Layout ── */
|
||
.page { max-width: 1100px; margin: 0 auto; padding: 48px 32px 80px; }
|
||
|
||
/* ── Page header ── */
|
||
.page-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
margin-bottom: 48px;
|
||
gap: 20px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.brand-wordmark {
|
||
font-family: var(--font-h);
|
||
font-weight: 700;
|
||
font-size: 28px;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--t600);
|
||
}
|
||
|
||
body.light .brand-wordmark { color: var(--t700); }
|
||
|
||
.brand-tagline {
|
||
font-size: 13px;
|
||
color: var(--text-sub);
|
||
margin-top: 4px;
|
||
font-style: italic;
|
||
}
|
||
|
||
.brand-essence {
|
||
font-family: var(--font-m);
|
||
font-size: 11px;
|
||
color: var(--text-muted);
|
||
margin-top: 8px;
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
.header-actions { display: flex; gap: 10px; align-items: center; }
|
||
|
||
.mode-btn {
|
||
background: var(--elevated);
|
||
border: 1px solid var(--border);
|
||
color: var(--text-sub);
|
||
padding: 8px 16px;
|
||
border-radius: 8px;
|
||
font-family: var(--font-b);
|
||
font-size: 13px;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
}
|
||
.mode-btn:hover { border-color: var(--t500); color: var(--t400); }
|
||
|
||
/* ── Section ── */
|
||
.section { margin-bottom: 52px; }
|
||
|
||
.section-label {
|
||
font-family: var(--font-h);
|
||
font-weight: 700;
|
||
font-size: 11px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
margin-bottom: 20px;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
.section-label::after {
|
||
content: '';
|
||
flex: 1;
|
||
height: 1px;
|
||
background: var(--border);
|
||
}
|
||
|
||
/* ── Palette grid ── */
|
||
.palette-group { margin-bottom: 28px; }
|
||
.palette-name {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.swatches {
|
||
display: grid;
|
||
grid-template-columns: repeat(11, 1fr);
|
||
gap: 6px;
|
||
}
|
||
|
||
.swatch {
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
transition: transform 0.15s;
|
||
}
|
||
.swatch:hover { transform: scale(1.04); }
|
||
|
||
.swatch-color {
|
||
height: 52px;
|
||
border: 1px solid rgba(255,255,255,0.06);
|
||
}
|
||
|
||
body.light .swatch-color { border-color: rgba(0,0,0,0.08); }
|
||
|
||
.swatch-info {
|
||
background: var(--surface);
|
||
padding: 5px 6px;
|
||
border: 1px solid var(--border);
|
||
border-top: none;
|
||
border-radius: 0 0 8px 8px;
|
||
}
|
||
.swatch-token { font-family: var(--font-m); font-size: 9px; color: var(--text-muted); }
|
||
.swatch-hex { font-family: var(--font-m); font-size: 10px; color: var(--text-sub); font-weight: 500; }
|
||
|
||
/* 9-step copper has 10 tokens, 11-step teal has 11 tokens — flex for copper */
|
||
.swatches-10 { grid-template-columns: repeat(10, 1fr); }
|
||
|
||
/* Semantic palette — 2 rows */
|
||
.semantic-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 12px;
|
||
}
|
||
|
||
.semantic-pair {
|
||
border-radius: 10px;
|
||
overflow: hidden;
|
||
border: 1px solid var(--border);
|
||
}
|
||
.sem-fill { height: 48px; }
|
||
.sem-text { height: 30px; display: flex; align-items: center; padding: 0 10px; }
|
||
.sem-label {
|
||
background: var(--surface);
|
||
padding: 8px 10px;
|
||
font-size: 11px;
|
||
font-weight: 500;
|
||
color: var(--text-sub);
|
||
font-family: var(--font-m);
|
||
}
|
||
.sem-hex { font-size: 10px; color: var(--text-muted); font-family: var(--font-m); margin-top: 1px; }
|
||
|
||
/* ── Sparkle section ── */
|
||
.sparkle-row {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
gap: 16px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.sparkle-card {
|
||
background: var(--t900);
|
||
border: 1px solid var(--t800);
|
||
border-radius: 10px;
|
||
padding: 20px;
|
||
}
|
||
|
||
.sparkle-card.glow-demo {
|
||
border-color: var(--c400);
|
||
box-shadow: var(--copper-glow);
|
||
}
|
||
|
||
.sparkle-card.shimmer-demo {
|
||
border: 1px solid rgba(228,150,85,0.4);
|
||
}
|
||
|
||
.sparkle-card.priority-demo {
|
||
background: #0A4444;
|
||
border: 1px solid rgba(240,120,64,0.35);
|
||
}
|
||
|
||
.sparkle-title {
|
||
font-family: var(--font-h);
|
||
font-weight: 700;
|
||
font-size: 13px;
|
||
color: var(--warm-white);
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.sparkle-token {
|
||
font-family: var(--font-m);
|
||
font-size: 10px;
|
||
color: var(--c300);
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.sparkle-desc {
|
||
font-size: 12px;
|
||
color: var(--t300);
|
||
line-height: 1.55;
|
||
}
|
||
|
||
/* ── Typography ── */
|
||
.type-row {
|
||
display: grid;
|
||
grid-template-columns: 140px 1fr;
|
||
align-items: baseline;
|
||
gap: 16px;
|
||
padding: 12px 0;
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.type-row:last-child { border-bottom: none; }
|
||
.type-meta { font-family: var(--font-m); font-size: 11px; color: var(--text-muted); }
|
||
.type-token { font-weight: 600; font-size: 12px; color: var(--text-sub); }
|
||
.type-sub { margin-top: 2px; }
|
||
|
||
/* ── Buttons ── */
|
||
.components-grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
}
|
||
|
||
.component-block {
|
||
background: var(--surface);
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
padding: 22px;
|
||
}
|
||
.component-title {
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.06em;
|
||
text-transform: uppercase;
|
||
color: var(--text-muted);
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
|
||
.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
|
||
|
||
/* Buttons */
|
||
.btn {
|
||
padding: 9px 20px;
|
||
border-radius: 7px;
|
||
font-family: var(--font-b);
|
||
font-size: 13.5px;
|
||
font-weight: 500;
|
||
cursor: pointer;
|
||
transition: all 0.15s;
|
||
border: none;
|
||
display: inline-flex; align-items: center; gap: 6px;
|
||
}
|
||
.btn-primary {
|
||
background: var(--t600);
|
||
color: #FFFAF6;
|
||
}
|
||
body.light .btn-primary { background: var(--t600); }
|
||
.btn-primary:hover { background: var(--t700); }
|
||
|
||
.btn-copper {
|
||
background: transparent;
|
||
border: 1.5px solid var(--c500);
|
||
color: var(--c400);
|
||
}
|
||
body.light .btn-copper { color: var(--c500); }
|
||
.btn-copper:hover { background: rgba(203,107,32,0.1); }
|
||
|
||
.btn-ghost {
|
||
background: transparent;
|
||
border: 1px solid var(--border);
|
||
color: var(--text-sub);
|
||
}
|
||
.btn-ghost:hover { border-color: var(--t500); color: var(--t400); }
|
||
|
||
.btn-danger {
|
||
background: rgba(200,48,48,0.12);
|
||
border: 1px solid rgba(200,48,48,0.3);
|
||
color: #FF7070;
|
||
}
|
||
body.light .btn-danger { background: #F8CCCC; color: #A02020; border-color: #F8CCCC; }
|
||
|
||
/* Badges (all variants) */
|
||
.badge {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
padding: 4px 10px;
|
||
border-radius: 20px;
|
||
font-size: 12px;
|
||
font-weight: 500;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.b-active { background: rgba(26,122,78,0.16); color: #4AE899; }
|
||
.b-exp { background: rgba(168,90,24,0.16); color: #F0B464; }
|
||
.b-crit { background: rgba(200,48,48,0.16); color: #FF7070; }
|
||
.b-pa-req { background: rgba(240,120,64,0.18); color: #FFB070; border: 1px solid rgba(240,120,64,0.3); }
|
||
.b-pa-pend { background: rgba(122,94,160,0.16); color: #C0A8E0; }
|
||
.b-denied { background: rgba(200,48,48,0.22); color: #FF7070; }
|
||
.b-info { background: rgba(26,106,154,0.16); color: #64B0D8; }
|
||
|
||
body.light .b-active { background: #C8EDD8; color: #146040; }
|
||
body.light .b-exp { background: #FDECD5; color: #A85A18; }
|
||
body.light .b-crit { background: #F8CCCC; color: #A02020; }
|
||
body.light .b-pa-req { background: #FFE4CC; color: #903A14; border-color: rgba(144,58,20,0.2); }
|
||
body.light .b-pa-pend { background: #E2D8F0; color: #7A5EA0; }
|
||
body.light .b-denied { background: #F8CCCC; color: #A02020; }
|
||
body.light .b-info { background: #C8E0EE; color: #1A6A9A; }
|
||
|
||
/* ── Mini dashboard preview ── */
|
||
.mini-dash {
|
||
background: var(--t950);
|
||
border: 1px solid var(--t800);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
margin-top: 20px;
|
||
}
|
||
.mini-topbar {
|
||
background: var(--t900);
|
||
border-bottom: 1px solid var(--t800);
|
||
padding: 10px 18px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.mini-brand {
|
||
font-family: var(--font-h);
|
||
font-weight: 700;
|
||
font-size: 13px;
|
||
color: var(--warm-white);
|
||
}
|
||
.mini-sub { font-size: 10px; color: var(--t300); margin-top: 1px; }
|
||
.mini-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
padding: 16px;
|
||
}
|
||
.mini-card {
|
||
background: var(--t900);
|
||
border: 1px solid var(--t800);
|
||
border-radius: 8px;
|
||
padding: 14px;
|
||
}
|
||
.mini-card.priority-card {
|
||
border-color: var(--c400);
|
||
box-shadow: 0 0 16px rgba(240,120,64,0.28);
|
||
}
|
||
.mini-card-label { font-size: 10px; color: var(--t300); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.06em; }
|
||
.mini-card-value { font-family: var(--font-m); font-size: 24px; font-weight: 500; color: var(--warm-white); }
|
||
.mini-card-value.copper-val { color: var(--c300); }
|
||
.mini-note { font-size: 10px; color: var(--t400); margin-top: 4px; }
|
||
|
||
/* ── Callout box demo ── */
|
||
.callout {
|
||
background: var(--c100);
|
||
border-left: 4px solid var(--c500);
|
||
border-radius: 0 8px 8px 0;
|
||
padding: 14px 18px;
|
||
margin-top: 16px;
|
||
}
|
||
.callout-head { font-weight: 600; color: var(--c700); font-size: 13px; margin-bottom: 4px; }
|
||
.callout-body { color: var(--c700); font-size: 13px; line-height: 1.55; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="page">
|
||
|
||
<!-- PAGE HEADER -->
|
||
<div class="page-header">
|
||
<div>
|
||
<div class="brand-wordmark">STTIL Solutions</div>
|
||
<div class="brand-tagline">Speak the truth in love — Brand System v1, April 2026</div>
|
||
<div class="brand-essence">PALETTE · TYPOGRAPHY · COMPONENTS · SPARKLE TOKENS</div>
|
||
</div>
|
||
<div class="header-actions">
|
||
<button class="mode-btn" onclick="document.body.classList.toggle('light')">
|
||
◐ Toggle Light / Dark
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════
|
||
SECTION 1: COLOR PALETTE
|
||
══════════════════════════════ -->
|
||
<div class="section">
|
||
<div class="section-label">Color Palette — Option A (Default)</div>
|
||
|
||
<!-- Teal scale -->
|
||
<div class="palette-group">
|
||
<div class="palette-name">Teal — Dominant System Color</div>
|
||
<div class="swatches">
|
||
<div class="swatch"><div class="swatch-color" style="background:#EEF8F8"></div><div class="swatch-info"><div class="swatch-token">teal-50</div><div class="swatch-hex">#EEF8F8</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#CBE9E9"></div><div class="swatch-info"><div class="swatch-token">teal-100</div><div class="swatch-hex">#CBE9E9</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#97D3D3"></div><div class="swatch-info"><div class="swatch-token">teal-200</div><div class="swatch-hex">#97D3D3</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#5BBBBB"></div><div class="swatch-info"><div class="swatch-token">teal-300</div><div class="swatch-hex">#5BBBBB</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#2EA3A3"></div><div class="swatch-info"><div class="swatch-token">teal-400</div><div class="swatch-hex">#2EA3A3</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#1A8A8A"></div><div class="swatch-info"><div class="swatch-token">teal-500</div><div class="swatch-hex">#1A8A8A</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#147A7A"></div><div class="swatch-info"><div class="swatch-token">teal-600 ★</div><div class="swatch-hex">#147A7A</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#0F5E5E"></div><div class="swatch-info"><div class="swatch-token">teal-700</div><div class="swatch-hex">#0F5E5E</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#0A4444"></div><div class="swatch-info"><div class="swatch-token">teal-800</div><div class="swatch-hex">#0A4444</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#072E2E"></div><div class="swatch-info"><div class="swatch-token">teal-900</div><div class="swatch-hex">#072E2E</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#041A1A"></div><div class="swatch-info"><div class="swatch-token">teal-950</div><div class="swatch-hex">#041A1A</div></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Copper scale -->
|
||
<div class="palette-group">
|
||
<div class="palette-name">Tangerine — Accent Light / Warm Glow Dark</div>
|
||
<div class="swatches swatches-10">
|
||
<div class="swatch"><div class="swatch-color" style="background:#FFF4EE"></div><div class="swatch-info"><div class="swatch-token">tng-50</div><div class="swatch-hex">#FFF4EE</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#FFE4CC"></div><div class="swatch-info"><div class="swatch-token">tng-100</div><div class="swatch-hex">#FFE4CC</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#FFC090"></div><div class="swatch-info"><div class="swatch-token">tng-200</div><div class="swatch-hex">#FFC090</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#FFB070"></div><div class="swatch-info"><div class="swatch-token">tng-300 ◆</div><div class="swatch-hex">#FFB070</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#F07840"></div><div class="swatch-info"><div class="swatch-token">tng-400 ◆</div><div class="swatch-hex">#F07840</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#E06028"></div><div class="swatch-info"><div class="swatch-token">tng-500 ★</div><div class="swatch-hex">#E06028</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#C04E1C"></div><div class="swatch-info"><div class="swatch-token">tng-600</div><div class="swatch-hex">#C04E1C</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#903A14"></div><div class="swatch-info"><div class="swatch-token">tng-700</div><div class="swatch-hex">#903A14</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#6A2A0C"></div><div class="swatch-info"><div class="swatch-token">tng-800</div><div class="swatch-hex">#6A2A0C</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#3E1808"></div><div class="swatch-info"><div class="swatch-token">tng-900</div><div class="swatch-hex">#3E1808</div></div></div>
|
||
</div>
|
||
<div style="font-size:11px; color:var(--text-muted); margin-top:8px; font-family:var(--font-m);">
|
||
★ primary accent (light mode) · ◆ warm tangerine glow — promoted for dark surfaces
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Neutral -->
|
||
<div class="palette-group">
|
||
<div class="palette-name">Neutral — Teal-Toned</div>
|
||
<div class="swatches">
|
||
<div class="swatch"><div class="swatch-color" style="background:#FFFFFF; border:1px solid #E5EEEE;"></div><div class="swatch-info"><div class="swatch-token">neutral-0</div><div class="swatch-hex">#FFFFFF</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#F4F9F9"></div><div class="swatch-info"><div class="swatch-token">neutral-50</div><div class="swatch-hex">#F4F9F9</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#E5EEEE"></div><div class="swatch-info"><div class="swatch-token">neutral-100</div><div class="swatch-hex">#E5EEEE</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#C8D8D8"></div><div class="swatch-info"><div class="swatch-token">neutral-200</div><div class="swatch-hex">#C8D8D8</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#A3BEBE"></div><div class="swatch-info"><div class="swatch-token">neutral-300</div><div class="swatch-hex">#A3BEBE</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#7A9E9E"></div><div class="swatch-info"><div class="swatch-token">neutral-400</div><div class="swatch-hex">#7A9E9E</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#5A7E7E"></div><div class="swatch-info"><div class="swatch-token">neutral-500</div><div class="swatch-hex">#5A7E7E</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#426060"></div><div class="swatch-info"><div class="swatch-token">neutral-600</div><div class="swatch-hex">#426060</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#2E4444"></div><div class="swatch-info"><div class="swatch-token">neutral-700</div><div class="swatch-hex">#2E4444</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#1C2C2C"></div><div class="swatch-info"><div class="swatch-token">neutral-800</div><div class="swatch-hex">#1C2C2C</div></div></div>
|
||
<div class="swatch"><div class="swatch-color" style="background:#111A1A"></div><div class="swatch-info"><div class="swatch-token">neutral-900</div><div class="swatch-hex">#111A1A</div></div></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Semantic -->
|
||
<div class="palette-group">
|
||
<div class="palette-name">Semantic — Status Colors</div>
|
||
<div class="semantic-grid">
|
||
<div class="semantic-pair">
|
||
<div class="sem-fill" style="background:#1A7A4E"></div>
|
||
<div class="sem-text" style="background:#C8EDD8"><span style="color:#146040; font-size:12px; font-weight:500;">✓ Active / Success</span></div>
|
||
<div class="sem-label">success-500 / 100<div class="sem-hex">#1A7A4E / #C8EDD8</div></div>
|
||
</div>
|
||
<div class="semantic-pair">
|
||
<div class="sem-fill" style="background:#D97B35"></div>
|
||
<div class="sem-text" style="background:#FDECD5"><span style="color:#A85A18; font-size:12px; font-weight:500;">⚠ Expiring Soon</span></div>
|
||
<div class="sem-label">warning-400 / 100<div class="sem-hex">#D97B35 / #FDECD5</div></div>
|
||
</div>
|
||
<div class="semantic-pair">
|
||
<div class="sem-fill" style="background:#C83030"></div>
|
||
<div class="sem-text" style="background:#F8CCCC"><span style="color:#A02020; font-size:12px; font-weight:500;">✕ Denied / Error</span></div>
|
||
<div class="sem-label">error-500 / 100<div class="sem-hex">#C83030 / #F8CCCC</div></div>
|
||
</div>
|
||
<div class="semantic-pair">
|
||
<div class="sem-fill" style="background:#E06028"></div>
|
||
<div class="sem-text" style="background:#FFE4CC"><span style="color:#903A14; font-size:12px; font-weight:500;">⚡ PA Required</span></div>
|
||
<div class="sem-label">tng-500 / 100<div class="sem-hex">#E06028 / #FFE4CC</div></div>
|
||
</div>
|
||
<div class="semantic-pair">
|
||
<div class="sem-fill" style="background:#7A5EA0"></div>
|
||
<div class="sem-text" style="background:#E2D8F0"><span style="color:#7A5EA0; font-size:12px; font-weight:500;">○ PA Pending</span></div>
|
||
<div class="sem-label">purple-500 / 100<div class="sem-hex">#7A5EA0 / #E2D8F0</div></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════
|
||
SECTION 2: SPARKLE TOKENS
|
||
══════════════════════════════ -->
|
||
<div class="section">
|
||
<div class="section-label">Dark Mode Sparkle — Copper as Warm Gold</div>
|
||
<div class="sparkle-row">
|
||
<div class="sparkle-card glow-demo">
|
||
<div class="sparkle-title">copper-glow shadow</div>
|
||
<div class="sparkle-token">--copper-glow</div>
|
||
<div class="sparkle-desc">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.</div>
|
||
</div>
|
||
<div class="sparkle-card shimmer-demo">
|
||
<div class="sparkle-title">copper shimmer border</div>
|
||
<div class="sparkle-token">copper-300 at 40% opacity</div>
|
||
<div class="sparkle-desc">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.</div>
|
||
</div>
|
||
<div class="sparkle-card priority-demo">
|
||
<div class="sparkle-title">priority-row-bg</div>
|
||
<div class="sparkle-token">copper-500 at 9% opacity</div>
|
||
<div class="sparkle-desc">Warm gold wash for the highest-priority worklist row. Visible without reading as orange. Pairs with copper-text patient ID label.</div>
|
||
</div>
|
||
</div>
|
||
<div style="font-size:12px; color:var(--text-muted); font-family:var(--font-m); padding: 0 2px;">
|
||
Dark mode rule: copper-300/400 permitted for borders, text, active states (2–3 points per section). Teal remains dominant.
|
||
</div>
|
||
|
||
<!-- Mini dashboard demo -->
|
||
<div class="mini-dash">
|
||
<div class="mini-topbar">
|
||
<div>
|
||
<div class="mini-brand">Signal CGM</div>
|
||
<div class="mini-sub">by STTIL Solutions</div>
|
||
</div>
|
||
<div style="font-family:var(--font-m); font-size:10px; color:var(--t300);">dark mode preview</div>
|
||
</div>
|
||
<div class="mini-cards">
|
||
<div class="mini-card priority-card">
|
||
<div class="mini-card-label">⚡ PA Required</div>
|
||
<div class="mini-card-value copper-val">6</div>
|
||
<div class="mini-note">copper-glow + copper border</div>
|
||
</div>
|
||
<div class="mini-card">
|
||
<div class="mini-card-label">⚠ Expiring ≤30d</div>
|
||
<div class="mini-card-value">14</div>
|
||
<div class="mini-note">standard teal-900 card</div>
|
||
</div>
|
||
<div class="mini-card">
|
||
<div class="mini-card-label">✓ Active Coverage</div>
|
||
<div class="mini-card-value">142</div>
|
||
<div class="mini-note">standard teal-900 card</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════
|
||
SECTION 3: TYPOGRAPHY
|
||
══════════════════════════════ -->
|
||
<div class="section">
|
||
<div class="section-label">Typography</div>
|
||
|
||
<div style="background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:24px; margin-bottom:20px;">
|
||
<div class="type-row">
|
||
<div><div class="type-token">display-xl</div><div class="type-meta">48px · 700 · Plus Jakarta Sans</div></div>
|
||
<div style="font-family:var(--font-h); font-weight:700; font-size:48px; line-height:1.15; color:var(--text-h);">Coverage</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div><div class="type-token">display-lg</div><div class="type-meta">36px · 700</div></div>
|
||
<div style="font-family:var(--font-h); font-weight:700; font-size:36px; line-height:1.2; color:var(--text-h);">Signal CGM Dashboard</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div><div class="type-token">heading-lg</div><div class="type-meta">24px · 600</div></div>
|
||
<div style="font-family:var(--font-h); font-weight:600; font-size:24px; color:var(--text-h);">Coverage Worklist</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div><div class="type-token">heading-md</div><div class="type-meta">20px · 600</div></div>
|
||
<div style="font-family:var(--font-h); font-weight:600; font-size:20px; color:var(--text-h);">PA Required — 6 Patients</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div><div class="type-token">body-lg</div><div class="type-meta">16px · 400 · Inter</div></div>
|
||
<div style="font-family:var(--font-b); font-size:16px; color:var(--text);">Signal CGM calculates coverage expiry per device using CMS wear-day rules.</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div><div class="type-token">body-sm</div><div class="type-meta">14px · 400</div></div>
|
||
<div style="font-family:var(--font-b); font-size:14px; color:var(--text-sub);">Last import: 2026-04-23 · 06:00 UTC · 162 patients · sorted by priority score</div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div><div class="type-token">data</div><div class="type-meta">14px · 500 · JetBrains Mono</div></div>
|
||
<div style="font-family:var(--font-m); font-size:14px; font-weight:500; color:var(--text);">PT-00142 · Priority: <span style="color:var(--c300)">98</span> · Days Left: <span style="color:#FF7070">4</span></div>
|
||
</div>
|
||
<div class="type-row">
|
||
<div><div class="type-token">caption</div><div class="type-meta">12px · 400</div></div>
|
||
<div style="font-family:var(--font-b); font-size:12px; color:var(--text-muted);">PHI-safe · patient_id crosswalk only · no PHI stored in Signal CGM</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="display:flex; gap:12px;">
|
||
<div style="background:var(--c100); border-left:4px solid var(--c500); border-radius:0 8px 8px 0; padding:12px 16px; flex:1;">
|
||
<div style="font-weight:600; color:var(--c700); font-size:13px; margin-bottom:3px;">Tangerine call-out box</div>
|
||
<div style="color:var(--c700); font-size:13px;">tng-100 background · tng-700 text · tng-500 left border. Use for one key insight per document section.</div>
|
||
</div>
|
||
<div style="background:var(--elevated); border:1px solid var(--border); border-radius:8px; padding:12px 16px; flex:1;">
|
||
<div style="font-weight:600; color:var(--text-h); font-size:13px; margin-bottom:3px;">Standard info block</div>
|
||
<div style="color:var(--text-sub); font-size:13px;">elevated background · neutral border. For contextual notes that don't require a premium call-out treatment.</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══════════════════════════════
|
||
SECTION 4: COMPONENTS
|
||
══════════════════════════════ -->
|
||
<div class="section">
|
||
<div class="section-label">Components</div>
|
||
<div class="components-grid">
|
||
|
||
<div class="component-block">
|
||
<div class="component-title">Buttons</div>
|
||
<div class="btn-row">
|
||
<button class="btn btn-primary">Initiate Outreach</button>
|
||
<button class="btn btn-copper">⚡ Initiate PA</button>
|
||
</div>
|
||
<div class="btn-row">
|
||
<button class="btn btn-ghost">View Details</button>
|
||
<button class="btn btn-danger">✕ Mark Denied</button>
|
||
</div>
|
||
<div style="font-size:11px; color:var(--text-muted); margin-top:10px; font-family:var(--font-m);">
|
||
Primary = teal-600 · Secondary CTA = copper border · Ghost = neutral · Danger = error-500
|
||
</div>
|
||
</div>
|
||
|
||
<div class="component-block">
|
||
<div class="component-title">Status Badges — Healthcare Workflow</div>
|
||
<div class="badge-row">
|
||
<span class="badge b-active">✓ Active</span>
|
||
<span class="badge b-exp">⚠ Expiring Soon</span>
|
||
<span class="badge b-crit">⚠ Critical Expiry</span>
|
||
</div>
|
||
<div class="badge-row">
|
||
<span class="badge b-pa-req">⚡ PA Required</span>
|
||
<span class="badge b-pa-pend">○ PA Pending</span>
|
||
<span class="badge b-denied">✕ Denied</span>
|
||
</div>
|
||
<div class="badge-row">
|
||
<span class="badge b-info">ℹ Info</span>
|
||
</div>
|
||
<div style="font-size:11px; color:var(--text-muted); margin-top:8px; font-family:var(--font-m);">
|
||
Always icon + label — never color only (per WCAG + brand rules)
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ══ FOOTER ══ -->
|
||
<div style="text-align:center; font-family:var(--font-m); font-size:11px; color:var(--text-muted); padding-top:20px; border-top:1px solid var(--border);">
|
||
STTIL Solutions Brand System v1 · April 2026 · Speak the truth in love
|
||
</div>
|
||
|
||
</div>
|
||
</body>
|
||
</html>
|