sttil/Signal
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
Signal/docs/sttil-brand-system-v1.md
Kisa c2141a127a Update Signal brand language and add pitch/build artifacts 
- Remove 'coverage' from worklist description across all docs
- Add whitepaper v2, documentation gap whitepaper, gate demo, sample
- Add TERAX.md, Claude Code settings, test-data generator
- Add settings.local.json to .gitignore

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-28 10:14:16 -04:00

17 KiB
Raw Blame History

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 
@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.