From d25728d198add73f70b70baef3dd7a94d43d7d33 Mon Sep 17 00:00:00 2001 From: DanFashauer Date: Tue, 19 May 2026 10:35:38 -0400 Subject: [PATCH] docs: align SignalGrid branding with runtime decision-layer direction --- README.md | 10 + docs/BRAND_SYSTEM.md | 88 +++++++++ startup/branding/brand.md | 294 ++++++++---------------------- startup/branding/logo_concepts.md | 287 +++++++++-------------------- 4 files changed, 262 insertions(+), 417 deletions(-) create mode 100644 docs/BRAND_SYSTEM.md diff --git a/README.md b/README.md index ba8daf1..40921bf 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,16 @@ - **Who we serve:** Regulated and high-consequence frontline organizations. - **Why it matters:** Better risk control, operational resilience, productivity, and accountability without workflow-breaking friction. +## Brand and presentation direction + +SignalGrid branding is being aligned to a premium enterprise style that matches the current product framing: + +- Warm charcoal foundations, off-white typography, and muted teal accents +- Minimal, architectural visuals with restrained risk-state colors +- Runtime decision-layer positioning (not a generic identity/security dashboard) + +See [docs/BRAND_SYSTEM.md](docs/BRAND_SYSTEM.md) and [startup/branding/brand.md](startup/branding/brand.md) for current guidance. + ## The problem we solve Shared and mobile devices in hospitals, warehouses, and other regulated environments are often used by multiple people across shifts and locations. Traditional controls often assume static trust, creating operational and security gaps between identity, device posture, context, and enforcement. diff --git a/docs/BRAND_SYSTEM.md b/docs/BRAND_SYSTEM.md new file mode 100644 index 0000000..74d87b7 --- /dev/null +++ b/docs/BRAND_SYSTEM.md @@ -0,0 +1,88 @@ +# SignalGrid Brand System + +## Positioning Line + +**SignalGrid is a runtime decision layer for Zero Trust orchestration in shared and mobile frontline environments.** + +## Tone + +- Serious, calm, and operationally credible +- Clear and precise over promotional language +- Enterprise-forward without jargon inflation +- Confident while respecting MVP/demo claim boundaries + +See [Claim boundaries](./CLAIM_BOUNDARIES.md) for allowed and disallowed language. + +## Visual Principles + +1. **Architectural clarity** — structured layouts, clear information hierarchy. +2. **Minimal surface noise** — remove decorative clutter. +3. **Trust through restraint** — premium style via proportion, contrast, and spacing. +4. **Decision-centric emphasis** — visual focus aligns to trust outcome and context. + +## Color Palette + +### Core Palette + +| Role | Token | Hex | +|---|---|---| +| Primary background | Warm Charcoal 950 | `#15181B` | +| Secondary background | Warm Charcoal 900 | `#1D2226` | +| Primary text | Off-White 100 | `#F3F1EC` | +| Secondary text | Off-White 300 | `#D8D4CC` | +| Brand accent | Muted Teal 500 | `#4F8C87` | +| Accent hover | Muted Teal 400 | `#6FA7A1` | + +### Functional State Palette + +| State | Hex | Guidance | +|---|---|---| +| Allow | `#5E8F73` | Positive/compliant outcomes | +| Review / Step-up | `#B08B57` | Elevated trust checks or caution | +| Deny | `#A15B5B` | Risk-critical or blocked outcomes | +| Neutral border | `#2A3136` | Dividers and low-emphasis boundaries | + +## Typography Guidance + +- **Primary:** Inter (400, 500, 600, 700) +- **Secondary:** IBM Plex Sans for technical callouts and dense integration snippets +- Use sentence case for UI copy and section headings +- Keep line lengths readable (roughly 60–90 characters where possible) +- Avoid futuristic display fonts or novelty typefaces + +## Logo Direction + +Primary path: +- Abstract S/G monogram or decision-core symbol +- Geometric, minimal, and scalable +- Strong negative-space behavior + +Constraints: +- Must work at favicon sizes +- Must work in monochrome +- Must avoid shield, padlock, badge, or clichéd cyber icon language + +## What to Avoid + +- Neon cyberpunk color treatments +- Generic “security dashboard” motifs +- Shield/badge/lock logo clichés +- Overclaiming “production-ready” status in visual captions or marketing copy +- Visual inconsistency between repo docs, demo views, and website surfaces + +## Repo / Website / Demo Usage Rules + +### Repository docs +- Keep positioning consistent: runtime decision layer + orchestration. +- Use safe claim language consistent with MVP/demo boundaries. +- Prefer clean diagrams over decorative marketing graphics. + +### Website and landing pages +- Lead with problem-to-outcome narrative for frontline environments. +- Emphasize deterministic decisions and auditable context. +- Avoid promises about compliance or production SLAs without validation. + +### Demo visuals +- Keep overlays and labels minimal and enterprise-readable. +- Highlight decision inputs and resulting actions clearly. +- Label simulated elements as simulated where applicable. diff --git a/startup/branding/brand.md b/startup/branding/brand.md index b368823..f3143dd 100644 --- a/startup/branding/brand.md +++ b/startup/branding/brand.md @@ -1,270 +1,138 @@ # SignalGrid Brand Guide -## Company Identity +## Positioning ### Company Name **SignalGrid** -### Product Name -**SignalGrid Identity Platform** +### Product Framing +**SignalGrid Runtime Decision Layer** -### Tagline -> Device identity and security automation for modern enterprises. +### Positioning Line +> Zero Trust orchestration for shared and mobile frontline environments. -### Brand Personality +### Category Definition +SignalGrid sits between authentication, device posture, session context, and enforcement systems to determine the correct access outcome at runtime. -SignalGrid feels: - -- **Modern** — Cutting-edge technology, forward-thinking -- **Enterprise-Grade** — Reliable, scalable, secure -- **Security-First** — Trustworthy, vigilant, protective -- **Intelligent** — Smart automation, predictive capabilities - -### Brand Voice - -- **Confident** — Clear, decisive, authoritative -- **Professional** — Enterprise-appropriate, not casual -- **Helpful** — Educational, solution-oriented -- **Technical** — Precise, accurate, knowledgeable +### Claim Boundary Reminder +Use this guide with [docs/CLAIM_BOUNDARIES.md](../../docs/CLAIM_BOUNDARIES.md). Do not imply production guarantees, compliance certification, or autonomous remediation unless validated in target environments. --- -## Logo Direction - -### Concept +## Brand Character -**SignalGrid** represents the connection of device signals across an enterprise. +SignalGrid should feel: -### Visual Themes +- **Premium Enterprise** — serious, reliable, and decision-critical. +- **Architectural** — precise, structured, intentional. +- **Calm Under Pressure** — no alarmist cyber aesthetics. +- **Operationally Grounded** — tied to real frontline workflows. -- Grid network -- Signal nodes -- Identity connections -- Central hub +### Voice and Tone -### Logo Mark Idea +- **Clear** — direct language over buzzwords. +- **Measured** — confident without overclaiming. +- **Technical-but-business-readable** — explainable to security and operations leaders. +- **Outcome-oriented** — emphasize deterministic decisions and auditable context. -``` - • • - │ - • ■ • - │ - • • -``` +--- -- **Center node (■)** — Device identity (the core) -- **Outer nodes (•)** — Signals from across the infrastructure -- **Connecting lines** — The relationships between signals +## Visual Direction -### Color in Logo +### Core Style -Use the **Electric Blue (#2F80ED)** for the center node to emphasize identity as the core of the platform. +- Dark warm charcoal foundation +- Off-white typography +- Muted teal accents +- Minimal geometry and negative space +- Refined enterprise restraint (no neon/cyberpunk styling) ---- +### Design Principles -## Color Palette +1. **Decision-first hierarchy**: the most important access outcome should be instantly legible. +2. **Low-noise surfaces**: reduce decorative visual noise and avoid “busy dashboard” patterns. +3. **Intentional contrast**: use contrast to support trust states and readability, not decoration. +4. **Scalable simplicity**: all marks and UI motifs must hold from favicon to keynote scale. -### Primary Colors +--- -| Color Name | Hex | Usage | -|------------|-----|-------| -| Deep Navy | `#0B1E34` | Backgrounds, headers, primary text | -| Electric Blue | `#2F80ED` | Primary actions, links, highlights | -| Cyber Teal | `#00D1C1` | Success states, positive indicators | +## Color System -### Secondary Colors +### Primary Palette -| Color Name | Hex | Usage | -|------------|-----|-------| -| Graphite | `#1F2937` | Secondary text, borders | -| Cloud White | `#F9FAFB` | Light backgrounds, cards | -| Signal Green | `#22C55E` | Success, active states | +| Token | Hex | Usage | +|---|---|---| +| Warm Charcoal 950 | `#15181B` | Primary background, hero surfaces | +| Warm Charcoal 900 | `#1D2226` | Secondary dark surfaces, nav | +| Off-White 100 | `#F3F1EC` | Primary typography on dark | +| Off-White 300 | `#D8D4CC` | Secondary typography | +| Muted Teal 500 | `#4F8C87` | Primary accent, key highlights | +| Muted Teal 400 | `#6FA7A1` | Hover/accent variation | -### Accent Colors +### Functional / Risk Colors (Restrained) -| Color Name | Hex | Usage | -|------------|-----|-------| -| Warning Orange | `#F59E0B` | Warnings, medium risk | -| Danger Red | `#EF4444` | Errors, high risk, alerts | +| Token | Hex | Usage | +|---|---|---| +| Decision Allow | `#5E8F73` | Positive/allow states | +| Decision Review | `#B08B57` | Caution/step-up/review states | +| Decision Deny | `#A15B5B` | Deny/risk-critical states | +| Border Neutral | `#2A3136` | Dividers, low-emphasis outlines | -### Color Usage +### Color Usage Rules -- **Backgrounds:** Deep Navy for dark mode, Cloud White for light mode -- **Primary Actions:** Electric Blue -- **Success States:** Signal Green / Cyber Teal -- **Error States:** Danger Red -- **Text:** Deep Navy (dark mode), Graphite (light mode) +- Keep Muted Teal for key product accents and primary focal points. +- Avoid saturated electric blues, cyber cyan, or neon gradients. +- Use risk colors for state communication only, never as broad brand accents. --- ## Typography -### Primary Font - +### Primary Typeface **Inter** -- Used for: Headlines, body text, UI elements -- Weights: 400 (regular), 500 (medium), 600 (semibold), 700 (bold) - -### Secondary Font +- UI and body: 400, 500 +- Headings: 600, 700 +### Supporting Typeface **IBM Plex Sans** -- Used for: Code blocks, technical content -- Weights: 400 (regular), 500 (medium), 600 (semibold) - -### Fallback Font - -**Roboto** +- Monospaced-adjacent technical callouts and integration examples. -- System fallback for cross-platform consistency +### Type Guidance -### Type Scale - -| Element | Font | Size | Weight | -|---------|------|------|--------| -| H1 | Inter | 48px | 700 | -| H2 | Inter | 36px | 700 | -| H3 | Inter | 24px | 600 | -| H4 | Inter | 20px | 600 | -| Body | Inter | 16px | 400 | -| Small | Inter | 14px | 400 | -| Caption | Inter | 12px | 400 | -| Code | IBM Plex Sans | 14px | 400 | +- Prefer medium-to-tight heading spacing with generous margins. +- Use sentence case for most UI labels and section headings. +- Avoid overly playful, condensed, or futuristic display fonts. --- -## Design Tone - -### Overall Feel - -- Clean and minimal -- Professional but not stiff -- Technical but accessible -- Security-focused without being intimidating - -### UI Patterns - -- **Cards** — Cloud White background with subtle Graphite border -- **Buttons** — Electric Blue with white text, rounded corners (8px) -- **Badges** — Small, colored pills for status indicators -- **Alerts** — Full-width banners with icon + color coding - -### Spacing - -- Base unit: 4px -- Standard spacing: 16px, 24px, 32px -- Container max-width: 1200px - ---- - -## Imagery & Iconography +## Imagery and Iconography ### Icon Style -- Line-based icons (1.5px stroke) -- Rounded corners (2px radius) -- Electric Blue or Deep Navy color +- Geometric, minimal, and functional. +- 1.5–2px optical stroke balance. +- No shield/padlock clichés. -### Icon Set +### Imagery -Use Heroicons or Phosphor Icons for consistency. - -### Photography - -- Avoid stock photos when possible -- If using photos: focus on enterprise settings, modern offices, technology -- Dark, moody tones preferred for security-focused imagery - -### Illustrations - -- Simple, geometric illustrations -- Abstract representations of device connections -- Blue and teal color scheme +- Focus on operational environments, device workflows, and system diagrams. +- Favor subtle, low-saturation treatment. +- Avoid generic stock “blue cybersecurity dashboard” visuals. --- -## Website Guidelines - -### Layout - -- Clean, single-column for readability -- Generous whitespace -- Clear hierarchy +## Implementation Guidance -### Content +### Repo and Documentation -- Lead with value proposition -- Use concrete examples -- Include social proof (customer logos, metrics) -- Clear CTAs +- Keep diagrams and visuals aligned to runtime decision + orchestration framing. +- Reflect MVP/demo boundaries in all messaging. +- Maintain consistency between README, docs, and demo surfaces. -### Dark Mode - -- Primary dark mode design -- Deep Navy background (#0B1E34) -- Cloud White text -- Electric Blue accents - ---- - -## Application UI - -### Dashboard Design - -- Dark mode default -- Card-based layout -- Status indicators use Signal Green / Cyber Teal / Danger Red -- Data tables with clear headers - -### Charts & Graphs - -- Electric Blue for primary data -- Cyber Teal for secondary -- Graphite for axes and labels - -### Forms - -- Clear labels above inputs -- Inline validation messages -- Electric Blue focus states - ---- - -## Competitive Positioning - -### Similar Brands for Reference - -- **Okta** — Clean, modern, identity-focused -- **CrowdStrike** — Security-first, dark mode, professional -- **Cloudflare** — Technical, fast, innovative - -### Differentiation - -SignalGrid owns: -- The intersection of device identity + security automation -- Visual language that emphasizes "grid" / network -- Action-oriented messaging ("automate," "connect," "respond") - ---- - -## Brand Assets - -### Files to Create - -- [ ] Logo (SVG, PNG) — Full color, horizontal -- [ ] Logo mark (SVG, PNG) — Icon only -- [ ] Logo (white) — For dark backgrounds -- [ ] Favicon (ICO) -- [ ] Social media profile images - -### Social Media - -- Twitter: @signalgrid -- LinkedIn: SignalGrid -- GitHub: signalgrid - ---- +### Demo and Website -*Last Updated: 2024* -*Version: 1.0* +- Emphasize deterministic outcomes and decision traceability. +- Avoid language that implies validated production SLA/compliance posture. +- Keep motion and visual effects minimal and purposeful. diff --git a/startup/branding/logo_concepts.md b/startup/branding/logo_concepts.md index efc3e34..3b7a685 100644 --- a/startup/branding/logo_concepts.md +++ b/startup/branding/logo_concepts.md @@ -1,248 +1,127 @@ # SignalGrid Logo Concepts -## Enterprise Security Tone +## Status -**Design Principles:** -- Trustworthy, professional, enterprise-ready -- Simple, memorable, scalable -- Works at 16x16 favicon and 512x512 hero -- Works in light and dark mode -- Avoid: cutesy, childish, overly complex +This document supersedes earlier concept exploration. + +- **Deprecated concepts**: shield/badge, padlock-adjacent forms, and cyber-signal wave clichés. +- **Preferred direction**: premium abstract **S/G monogram** or **decision-core** mark. --- -## Concept 1: Grid Signal +## Brand Fit Criteria -### Description -A stylized grid pattern with signal waves emanating from a central point. Represents both "grid" (network/device ecosystem) and "signal" (authentication/proximity). - -### Visual Elements - -``` - ╔═══════════════════════════════════════╗ - ║ ║ - ║ Concept: Grid Signal ║ - ║ ║ - ║ ╭─────╮ ║ - ║ ╱ ╲ ║ - ║ │ ● │ ← Central dot ║ - ║ ╲ ╱ ║ - ║ ╰─────╯ ║ - ║ │ │ ║ - ║ ╭─╯ ╰─╮ ║ - ║ ╱ ╲ ║ - ║ │ ━━━━ │ ← Signal waves ║ - ║ ╲ ╱ ║ - ║ ╰─────╯ ║ - ║ ║ - ║ SIGNALGRID ║ - ║ ║ - ╚═══════════════════════════════════════╝ -``` - -### Colors -- Primary: `#0F172A` (Slate 900 - deep navy) -- Accent: `#3B82F6` (Blue 500 - trust blue) -- Signal wave: `#22D3EE` (Cyan 400 - tech accent) - -### Typography -- Wordmark: Inter or SF Pro (clean, modern sans-serif) -- Weight: 600 (semibold) for Signal, 400 (regular) for Grid -- Letter-spacing: -0.02em for modern feel - -### Usage -- Favicon: Central dot with one signal wave -- Header: Full icon + wordmark -- Dark mode: Invert colors or use white stroke +Any final logo must communicate: + +- Runtime decision intelligence +- Enterprise seriousness +- Architectural clarity +- Scalability from 16px favicon to large-format presentation + +It must **not** communicate: + +- Generic cybersecurity branding +- Consumer app playfulness +- Tactical “security tool” tropes (shields, lock icons, badges) --- -## Concept 2: Badge Shield +## Deprecated Concepts (for record) -### Description -A security badge shape integrated with a shield, representing secure device access. The badge notch at top evokes physical access cards while the shield communicates security. - -### Visual Elements - -``` - ╔═══════════════════════════════════════╗ - ║ ║ - ║ Concept: Badge Shield ║ - ║ ║ - ║ ╭───╮ ║ - ║ ╱ ╲ ║ - ║ │ │ ║ - ║ │ ✓✓✓ │ ← Verification ║ - ║ │ │ marks ║ - ║ ╲ ╱ ║ - ║ ╰───╯ ║ - ║ │ ║ - ║ ╭──────╮ ║ - ║ ╱ ╲ ║ - ║ │ ════════ │ ← Shield body ║ - ║ ╲ ╱ ║ - ║ ╰──────╯ ║ - ║ ║ - ║ SIGNALGRID ║ - ║ ║ - ╚═══════════════════════════════════════╝ -``` - -### Colors -- Primary: `#1E293B` (Slate 800) -- Badge accent: `#10B981` (Emerald 500 - verified) -- Shield accent: `#3B82F6` (Blue 500) - -### Typography -- Same as Concept 1 - -### Usage -- Favicon: Shield shape alone -- App icon: Badge + shield with checkmarks +### 1) Grid Signal (Deprecated) +Reason: too close to generic SaaS/security iconography and over-indexed on “signal waves.” + +### 2) Badge Shield (Deprecated) +Reason: directly conflicts with updated direction to avoid shield/badge clichés. + +### 3) Device Chain (Deprecated) +Reason: visually literal and network-diagram-heavy; weak brand distinctiveness. --- -## Concept 3: Device Chain +## Preferred Concepts + +## Concept A: S/G Monogram (Primary Candidate) ### Description -Connected device nodes forming a chain/network. Represents the ecosystem of shared devices managed by SignalGrid. - -### Visual Elements - -``` - ╔═══════════════════════════════════════╗ - ║ ║ - ║ Concept: Device Chain ║ - ║ ║ - ║ ●────● ║ - ║ ╱ ╲ ║ - ║ ● ● ║ - ║ ╲ ╱ ║ - ║ ●────● ║ - ║ │ │ ║ - ║ ●────● ← Multiple ║ - ║ ╱ ╲ device clusters ║ - ║ ● ● ║ - ║ ║ - ║ SIGNALGRID ║ - ║ ║ - ╚═══════════════════════════════════════╝ -``` - -### Colors -- Primary: `#0F172A` (Slate 900) -- Accent: `#6366F1` (Indigo 500 - connectivity) -- Node inactive: `#94A3B8` (Slate 400) - -### Typography -- Same as Concept 1 - -### Usage -- Favicon: 2x2 node cluster -- Marketing: Larger network visualization +A minimal geometric monogram where **S** and **G** are resolved through shared structure and negative space. The mark should feel like a designed architectural symbol, not lettering ornament. ---- +### Visual Intent -## Logo Do's and Don'ts +- Interlocking geometry, balanced optical weight +- Strong silhouette for favicon usage +- Distinctive internal cut/void suggesting directional decision flow -### ✅ Do -- Use the logo at sizes >= 32px with adequate padding -- Maintain clear space (height of "S" in SignalGrid) around logo -- Use provided color variants for different backgrounds -- Use for favicon: simplified version (concept 1 or 2) +### Use Cases -### ❌ Don't -- Stretch or distort the logo -- Add effects (shadows, gradients, glows) -- Change colors outside of approved palette -- Place on busy backgrounds without clear space -- Modify the icon apart from the wordmark +- Product app icon +- README/website hero lockup +- Slide title pages and enterprise collateral --- -## Wordmark Variants +## Concept B: Decision Core Mark (Secondary Candidate) -### Full Logo (Default) -``` -SIGNALGRID -``` -- Use for: Headers, marketing materials +### Description +An abstract “decision core” symbol: a central structural form with restrained branching paths implying context evaluation and deterministic outcomes. -### Icon Only (Favicon) -``` -[Concept 1 or 2 simplified] -``` -- Use for: Browser tab, app icon, small contexts +### Visual Intent -### Stacked (Mobile) -``` -SIGNAL -GRID -``` -- Use for: App splash, narrow containers +- One core + subtle directional elements +- Minimal line complexity +- Works as monochrome stamp and single-accent version ---- +### Use Cases -## Color Palette +- Integration diagrams +- Small UI identity markers +- Social profile avatar -### Primary Colors +--- -| Name | Hex | Usage | -|------|-----|-------| -| Slate 900 | `#0F172A` | Primary text, dark backgrounds | -| Slate 800 | `#1E293B` | Secondary text, cards | -| Blue 500 | `#3B82F6` | Primary accent, CTAs | -| Blue 600 | `#2563EB` | Hover states | +## Geometry and Construction Rules -### Accent Colors +- Build on a simple grid, but avoid obvious grid visual artifacts. +- Prioritize symmetry or near-symmetry with purposeful asymmetry only where it improves legibility. +- Use negative space intentionally to imply decision boundaries. +- Avoid thin details that break at small sizes. -| Name | Hex | Usage | -|------|-----|-------| -| Cyan 400 | `#22D3EE` | Signal indicators, success | -| Emerald 500 | `#10B981` | Verified, secure | -| Amber 500 | `#F59E0B` | Warnings | -| Red 500 | `#EF4444` | Errors, alerts | +--- -### Neutral Colors +## Color Guidance -| Name | Hex | Usage | -|------|-----|-------| -| White | `#FFFFFF` | Light backgrounds | -| Slate 100 | `#F1F5F9` | Light card backgrounds | -| Slate 200 | `#E2E8F0` | Borders | -| Slate 400 | `#94A3B8` | Muted text | +Use brand palette from `startup/branding/brand.md` and `docs/BRAND_SYSTEM.md`. ---- +### Recommended Logo Variants -## Animation Guidelines +1. Off-White mark on Warm Charcoal background +2. Warm Charcoal mark on Off-White background +3. Muted Teal accent variant (single accent region only) +4. Monochrome fallback -### Loading State -- Fade in logo with subtle scale (0.95 → 1.0) -- Duration: 300ms, ease-out -- Signal wave animation: ripple outward +### Avoid -### Interaction -- Hover: Subtle brightness increase -- Click: Scale down (1.0 → 0.98), scale back -- Don't over-animate; keep professional +- Neon gradients +- Multi-hue rainbow treatments +- Glows, bevels, and embossed effects --- -## File Deliverables (When Ready) +## Wordmark Direction + +- Typeface: Inter or equivalent modern enterprise sans-serif +- Weight: 500–600 for balanced authority +- Tracking: slight tightening for premium compactness +- Casing: “SignalGrid” preferred (title case) + +--- -### Required Formats -- SVG (primary, scalable) -- PNG (2x for retina) -- ICO (favicon) +## Acceptance Checklist -### Sizes to Generate -- 16x16 (favicon) -- 32x32 (favicon retina) -- 128x128 (app icon small) -- 512x512 (app icon) -- 1024x1024 (marketing) +A candidate can move forward only if it: -### Variants -- Light background (dark logo) -- Dark background (light logo) -- Monochrome (single color) +- Reads clearly at 16px, 24px, and 32px +- Works in monochrome without loss of meaning +- Avoids shield/padlock/badge resemblance +- Feels consistent with runtime decision-layer positioning +- Looks credible in enterprise procurement and board-level contexts