Signal/docs/sttil-brand-system-v1.md

# STTIL Solutions — Master Brand System v1

**Date:** April 2026
**Status:** Active — Canonical Reference
**Scope:** STTIL Solutions (parent), Signal (product), STTIL Journeys (media layer)

---

## 1. Brand Essence

**STTIL = Speak the Truth in Love**

This is the operating principle, not a tagline. Everything built under the STTIL name should:

1. Be truthful — data-accurate, no inflated claims, no vague promises
2. Be intelligent — specialist-level thinking applied to real problems
3. Be grounded in care — built for people bearing real operational weight

The brand earns trust through specificity. It does not perform warmth. It demonstrates it.

---

## 2. Brand Architecture

| Layer | Entity | Role |
|-------|--------|------|
| Parent | STTIL Solutions LLC | B2B health-tech infrastructure company |
| Product | Signal Powered by STTIL Solutions (commonly "Signal") | CGM billing intelligence for DMEPOS suppliers |
| Media | STTIL Journeys | Narrative/content expression of the STTIL story |

**STTIL Solutions** is the credential — invoices, contracts, LinkedIn.
**Signal** (formally "Signal Powered by STTIL Solutions") is the product — what suppliers and billing teams use daily. Use "Signal" in product-facing contexts; use the full name in contracts, formal proposals, and first introductions.
**STTIL Journeys** is the voice — seasonal latitude, never departing from parent brand integrity.

---

## 3. Positioning

**STTIL Solutions:**
> Precision health-tech infrastructure for independent DMEPOS suppliers. Built to reduce claim denials, protect cash flow, and keep small suppliers viable in a tightening regulatory environment.

Not a generic software company. A specialist that understands CMS coding, PA workflows, and the cash flow math of competitive bidding.

**Signal** (Signal Powered by STTIL Solutions):
> The CGM worklist that prevents denials before they happen.

See full product brand extension: `signal-cgm-brand-extension-v1.md`

**STTIL Journeys:**
> The human story behind the technology — health, resilience, and what it means to build in health-tech.

More expressive. Seasonal palette allowed. Always tethered to the parent type and spacing system.

---

## 4. Tone Attributes

| Attribute | Means in Practice | Never |
|-----------|-------------------|-------|
| **Truthful** | Claims backed by data, specifics over superlatives | "Game-changing," "revolutionary," "disrupting" |
| **Grounded** | Speaks to the actual daily problem | Vague aspirational copy |
| **Precise** | Uses industry terminology correctly (PA, HCPCS, CMS, wear days) | Dumbed-down language that alienates buyers |
| **Warm** | Accessible; not clinical or robotic | Sappy, emotional manipulation, generic empathy |
| **Confident** | Makes clear positions | Overqualifying to the point of paralysis |
| **Urgent when appropriate** | Regulatory pressure is real; name it directly | False urgency, manufactured scarcity |

**Voice test:** Does it sound like a knowledgeable colleague you'd trust with a hard problem? That's the target.

---

## 5. Visual Principles

1. **Space is intelligence.** Premium brands use breathing room. Only tighten in data-dense product UI.
2. **Data is the design.** Worklist tables and status indicators are primary surfaces — not decoration applied after the fact.
3. **Copper is punctuation on light; warm gold on dark.** One copper accent per section in light mode. On dark teal surfaces, copper-300/400 reads as warm gold — richer expression is permitted.
4. **Typography carries the weight.** A well-set Plus Jakarta Sans 700 headline at the right teal outperforms any icon or illustration.
5. **Never loud, always clear.** No gradients. No glow effects except the deliberate copper-glow shadow token on dark surfaces. No decorative noise.

---

## 6. Master Color Palette

### Palette Options

**Option A — PREFERRED DEFAULT: Deep Teal + Refined Copper**
All STTIL Solutions surfaces, Signal CGM UI, pitch decks.
Teal anchors credibility. Copper provides premium restraint in light mode, warm gold sparkle in dark mode.

**Option B — Navy Teal + Copper**
Cooler, more corporate. Primary `#1A5273`, accent `#C87941`.
Use for investor/board materials.

**Option C — Forest Teal + Warm Amber (STTIL Journeys seasonal)**
Warmer, earthier. Primary `#1E7A5A`, accent `#C85E2A`.
Stays within parent type and spacing system.

---

### Option A: Teal Scale (Canonical)

| Token | Hex | Usage |
|-------|-----|-------|
| `teal-50` | `#EEF8F8` | Background washes, hover states |
| `teal-100` | `#CBE9E9` | Bordered containers, soft highlights |
| `teal-200` | `#97D3D3` | Disabled interactive elements |
| `teal-300` | `#5BBBBB` | Secondary text on dark backgrounds |
| `teal-400` | `#2EA3A3` | Icon fills, chart secondary series |
| `teal-500` | `#1A8A8A` | Primary interactive, links |
| `teal-600` | `#147A7A` | **Brand primary — dominant system color** |
| `teal-700` | `#0F5E5E` | Hover state on teal-600 |
| `teal-800` | `#0A4444` | Dark surface foreground, elevated panels |
| `teal-900` | `#072E2E` | Primary dark backgrounds, sidebars, card surfaces |
| `teal-950` | `#041A1A` | Page background in dark mode (AMOLED-deep) |

### Copper Scale (Dual-Mode: Accent Light / Gold Dark)

| Token | Hex | Light Mode Usage | Dark Mode Usage |
|-------|-----|-----------------|-----------------|
| `copper-50` | `#FDF3EC` | Copper wash (rare) | — |
| `copper-100` | `#F8DFC5` | Call-out box backgrounds | — |
| `copper-200` | `#F0BC8A` | Illustration accents | Subtle shimmer fills |
| `copper-300` | `#E49655` | Subtle badge fills | **Warm gold text on dark — promoted** |
| `copper-400` | `#D97B35` | Warning/expiry indicators | **Borders, glows, active states on dark** |
| `copper-500` | `#CB6B20` | **Copper accent primary (light)** | CTA fills on dark |
| `copper-600` | `#B05A18` | Copper hover | Hover on dark CTA |
| `copper-700` | `#8C4712` | Text on copper-100 backgrounds | — |
| `copper-800` | `#66330D` | Deep copper (rare) | — |
| `copper-900` | `#3D1E08` | Near-black copper | — |

**Warm White (dark mode heading tone):**
`warm-white` = `#FFFAF6` — use for primary headings on dark teal surfaces. Slightly copper-tinted vs. pure white; creates warmth at the top of the value hierarchy without appearing beige on a screen.

### Neutral Scale (Teal-Toned)

| Token | Hex | Usage |
|-------|-----|-------|
| `neutral-0` | `#FFFFFF` | Card surfaces, pure white |
| `neutral-50` | `#F4F9F9` | Page background (light mode) |
| `neutral-100` | `#E5EEEE` | Dividers, table row alternates |
| `neutral-200` | `#C8D8D8` | Borders, input outlines |
| `neutral-300` | `#A3BEBE` | Placeholder text, disabled |
| `neutral-400` | `#7A9E9E` | Secondary body text |
| `neutral-500` | `#5A7E7E` | Body text minimum on white |
| `neutral-600` | `#426060` | Strong body text |
| `neutral-700` | `#2E4444` | Headings on light |
| `neutral-800` | `#1C2C2C` | Primary text on light |
| `neutral-900` | `#111A1A` | Primary text default |

### Semantic / Status Colors

| Token | Hex | Purpose |
|-------|-----|---------|
| `success-500` | `#1A7A4E` | Active coverage, completed |
| `success-100` | `#C8EDD8` | Success background fill |
| `warning-400` | `#D97B35` | Expiring soon (30–59 days) |
| `warning-600` | `#A85A18` | Critical expiry (<30 days) |
| `warning-100` | `#FDECD5` | Warning background fill |
| `error-500` | `#C83030` | Denied, expired, destructive |
| `error-100` | `#F8CCCC` | Error background fill |
| `info-500` | `#1A6A9A` | Informational, pending review |
| `info-100` | `#C8E0EE` | Info background fill |
| `purple-500` | `#7A5EA0` | PA pending, in-process states |
| `purple-100` | `#E2D8F0` | PA pending background fill |

---

## 7. Dark Mode Sparkle Tokens

These tokens exist specifically for dark-surface (teal-950/teal-900) contexts where copper shifts from accent to warm gold.

| Token Name | Value | Usage |
|-----------|-------|-------|
| `copper-glow` | `box-shadow: 0 0 16px rgba(217, 123, 53, 0.22)` | Premium card elevation on dark; applied to featured/top-priority cards |
| `copper-border-dark` | `border: 1px solid #D97B35` (copper-400) | Featured card edges on dark surfaces |
| `priority-row-bg` | `background: rgba(203, 107, 32, 0.08)` | Highest-priority row in worklist table; warm gold wash, not orange |
| `active-nav-copper` | `border-left: 3px solid #D97B35` | Active sidebar nav item accent |
| `warm-white` | `#FFFAF6` | Primary heading text on dark teal surfaces |
| `copper-shimmer-border` | `border: 1px solid rgba(228, 150, 85, 0.4)` (copper-300 at 40%) | Subtle shimmer on elevated panels |

**Dark mode copper rule:** On teal-900/teal-950 backgrounds, copper-300 and copper-400 are permitted for borders, text accents, active states, and priority indicators — because they read as warm gold, not orange. The "one copper per section" restriction applies to light mode only. In dark mode, copper can appear at 2–3 points per section provided it never dominates — teal remains the system color.

---

## 8. Accessibility

| Pairing | Contrast | Rating |
|---------|----------|--------|
| `teal-900` on `neutral-0` | 15.8:1 | AAA |
| `teal-800` on `neutral-0` | 13.5:1 | AAA |
| `teal-600` on `neutral-0` | 4.8:1 | AA |
| White on `teal-600` | 4.8:1 | AA |
| White on `teal-900` | 15.8:1 | AAA |
| `warm-white` on `teal-950` | 14.2:1 | AAA |
| `copper-300` on `teal-950` | 5.6:1 | AA |
| `copper-400` on `teal-950` | 4.1:1 | AA |
| `copper-500` on `neutral-0` | 3.2:1 | AA large text only |
| `copper-700` on `copper-100` | 5.1:1 | AA |
| `neutral-800` on `neutral-50` | 12.4:1 | AAA |

**Rules:**
- Copper-500 on white: large text only (18px+ bold or 24px+ regular)
- Copper-300/400 on dark teal: AA-safe for body text and UI labels
- Never use copper as the sole status indicator — pair with icon or label
- Always test new dark surface pairings before shipping

---

## 9. Typography

| Role | Font | Weights | Source |
|------|------|---------|--------|
| Display / Headings | **Plus Jakarta Sans** | 600, 700 | Google Fonts |
| Body / UI | **Inter** | 400, 500 | Google Fonts |
| Data / Code / IDs | **JetBrains Mono** | 400, 500 | Google Fonts |

```css
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700&family=Inter:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');
```

**Type Scale:**

| Token | Size | Weight | Line Height | Usage |
|-------|------|--------|-------------|-------|
| `display-xl` | 3rem / 48px | 700 | 1.15 | Hero headlines |
| `display-lg` | 2.25rem / 36px | 700 | 1.2 | Section headers, slide titles |
| `heading-xl` | 1.875rem / 30px | 700 | 1.25 | Page titles |
| `heading-lg` | 1.5rem / 24px | 600 | 1.3 | Card headers |
| `heading-md` | 1.25rem / 20px | 600 | 1.35 | Sub-section headers |
| `heading-sm` | 1.125rem / 18px | 600 | 1.4 | UI labels, column headers |
| `body-lg` | 1rem / 16px | 400 | 1.6 | Primary body text |
| `body-sm` | 0.875rem / 14px | 400 | 1.5 | Secondary body, form labels |
| `caption` | 0.75rem / 12px | 400 | 1.5 | Metadata, timestamps |
| `data` | 0.875rem / 14px | 500 | 1.4 | JetBrains Mono — numeric values |
| `code` | 0.875rem / 14px | 400 | 1.6 | JetBrains Mono — code/IDs |

---

## 10. Logo Direction Notes

- **Wordmark:** "STTIL SOLUTIONS" in Plus Jakarta Sans 700, all-caps, letter-spacing +0.05em. Color: `teal-700` on light, `warm-white` on dark.
- **Mark:** Abstract signal waveform or S-form. Precise, not decorative. Single-color only — no gradients.
- **Signal lockup:** "Signal" large (Plus Jakarta Sans 600), "Powered by STTIL Solutions" below in `neutral-400` (light) or `teal-300` (dark).
- No copper in the primary logo — copper is accent, not identity.

---

## 11. How to Use Copper

### Light Mode — Restraint Rules

**Use copper for:**
- One CTA per page or screen (secondary button or key action)
- Call-out boxes highlighting a key insight
- PA Required status badge
- One accent per LinkedIn carousel slide
- Warning/expiring range in charts (copper-400)

**Never use copper for:**
- Page or card backgrounds (copper-100 for a single call-out only)
- Navigation elements
- More than one element per visual section
- Body text on white (fails accessibility at copper-500)
- Large filled blocks — reads as orange at scale

### Dark Mode — Warm Gold Expression

On teal-950/teal-900 surfaces, copper behavior shifts:

**Permitted in dark mode:**
- `copper-400` borders on featured cards (1px)
- `copper-300` text for warm gold label accents
- `copper-glow` box-shadow on priority or featured cards
- `active-nav-copper` left border (3px) on active sidebar item
- `priority-row-bg` (copper-500 at 8% opacity) on top-priority worklist rows
- Up to 2–3 copper touchpoints per section — provided teal remains dominant

**The copper rule (both modes):** Copper marks what matters most. If everything is accented, nothing is accented. In dark mode, the expanded copper palette creates warmth; in light mode, it creates premium restraint.

---

## 12. Light Mode and Dark Mode

### Light Mode

| Surface | Token | Hex |
|---------|-------|-----|
| Page background | `neutral-50` | `#F4F9F9` |
| Card / panel | `neutral-0` | `#FFFFFF` |
| Primary text | `neutral-900` | `#111A1A` |
| Secondary text | `neutral-500` | `#5A7E7E` |
| Border | `neutral-200` | `#C8D8D8` |
| Primary brand | `teal-600` | `#147A7A` |
| Copper accent | `copper-500` | `#CB6B20` |
| Sidebar background | `teal-900` | `#072E2E` |
| Sidebar text | `neutral-0` | `#FFFFFF` |

### Dark Mode

| Surface | Token | Hex |
|---------|-------|-----|
| Page background | `teal-950` | `#041A1A` |
| Card / panel | `teal-900` | `#072E2E` |
| Elevated surface | `teal-800` | `#0A4444` |
| Primary heading | `warm-white` | `#FFFAF6` |
| Primary text | `neutral-0` | `#FFFFFF` |
| Secondary text | `teal-300` | `#5BBBBB` |
| Border | `teal-700` | `#0F5E5E` |
| Primary brand | `teal-400` | `#2EA3A3` |
| Copper accent (borders/glows) | `copper-400` | `#D97B35` |
| Copper accent (text/icons) | `copper-300` | `#E49655` |
| Priority row | `priority-row-bg` | `rgba(203,107,32,0.08)` |

---

## 13. Do / Don't

### Visuals

| Do | Don't |
|----|-------|
| Tight, well-spaced data tables | Busy dashboards with no hierarchy |
| Plus Jakarta Sans 700 at correct weight | Thin weights or system default fonts |
| Teal-900 sidebar with white nav text | Sidebar gradients or colored nav icons |
| Copper used once per section (light) | Copper as a background or nav color |
| Copper-300/400 as warm gold accents (dark) | Copper dominating over teal in dark mode |
| White cards on neutral-50 page background | Gray cards on white (visual mud) |
| Status badges with icon + label | Color-only status indicators |
| Monochromatic teal range in charts | Rainbow chart palettes |
| `copper-glow` shadow on single priority card | Glow applied to all cards (destroys signal) |

### Copy

| Do | Don't |
|----|-------|
| "35–45% first-pass denial rate for CGM claims" | "We're revolutionizing DME billing" |
| "Calculates coverage expiry using CMS wear-day rules" | "AI-powered solution that automates everything" |
| "Built for DMEPOS suppliers managing CGM reorder cycles" | "A tool for anyone in healthcare" |
| Use HCPCS codes and CMS-accurate terminology | Simplify or invent regulatory details |

### Avoiding Generic AI-Slop Aesthetics

- No purple gradients — "AI purple" signals commodity, not premium
- No glowing elements except the deliberate `copper-glow` shadow token
- No hero illustrations with floating orbs
- No "futuristic" grid textures or noise overlays
- No blue + purple gradient brand marks
- No "AI" in the product name or tagline — outcomes should speak
- No stock photo doctors smiling at tablets

---

## 14. Application by Surface

| Surface | Background | Header | CTA | Notes |
|---------|-----------|--------|-----|-------|
| Website | `neutral-50` / white cards | `teal-900` nav, white text | `teal-600` primary, `copper-500` secondary | No gradients |
| Signal UI (dark) | `teal-950` | Plus Jakarta Sans 700, `warm-white` | `teal-600` fill, `copper-400` accent border | Copper-glow on top card |
| LinkedIn carousels | `teal-900` cover, white content slides | Plus Jakarta Sans 700 | `copper-500` on cover | One copper per slide (light slides) |
| Pitch decks | `teal-900` title, `neutral-0` content | White on dark, `teal-700` on light | `copper-100` call-out boxes | Charts: teal-500 primary, copper-400 accent |
| Documentation | `neutral-0` | `teal-700` headers | Copper call-out boxes only | JetBrains Mono for codes/data |

---

## 15. Recommended Next Implementation Steps

1. Register fonts — Plus Jakarta Sans, Inter, JetBrains Mono via Google Fonts in Signal CGM app and website.
2. Implement design tokens — Apply `design-tokens-v1.json` as CSS custom properties (see `tailwind-theme-v1.md`).
3. Update Tailwind config — Extend theme with full teal/copper/neutral/sparkle scales.
4. Build component baseline — Button, Badge (status variants), Card, Sidebar, WorklistTable.
5. Apply copper-glow to the highest-priority card only per dashboard view — establishes the sparkle hierarchy.
6. Apply brand to pitch deck — teal-900/white split, copper-100 call-out boxes, two-curve workload graph as hero visual.
7. Create LinkedIn carousel template — five slides: hook, problem, data, product, CTA.
8. Audit Signal CGM UI — sweep against color tokens; standardize all status badges.
9. Generate brand assets — mark, wordmark, Signal CGM lockup as locked SVGs.
10. Build Figma/Penpot component library from the tokens.
11. Create one-page partner brand guide PDF for billing company prospects.