{
  "stadliBrandIdentity": {
    "version": "1.4.1",
    "systemName": "Stadli Brand Identity System — Modular Dark UI",
    "extendsFrom": [
      "Stadli Brand Identity System — Expanded Palette v1.3.1",
      "Modular Dark UI – Bold Neon Accents v1.0"
    ],
    "brandPlatform": {
      "purpose": "Make modern fandom easy for small, professional sports teams by unifying data and turning it into action fans can feel.",
      "promise": "Big-league marketing power for lean front offices: a branded app, unified fan profiles, and a campaign engine that drives measurable revenue.",
      "positioning": "The all-in-one revenue + marketing OS for sports teams. Anti-fragmentation. Pro-outcomes.",
      "personality": [
        "Bold",
        "Rebel",
        "Data-first",
        "Simple",
        "Visuals carry stadium emotion; product stays calm, legible, fast."
      ],
      "values": [
        "Outcomes over objects",
        "Speed over ceremony",
        "Open by default",
        "Explainable AI",
        "Respect the fan"
      ],
      "intendedAudience": [
        "Small to mid-size professional sports teams",
        "Marketing & revenue leaders",
        "Ops and data teams",
        "Modern enterprises in adjacent live-event verticals"
      ],
      "emotionalIntent": [
        "confident",
        "high-energy",
        "data-driven",
        "human",
        "inclusive"
      ]
    },
    "voiceAndTone": {
      "voicePillars": [
        "Direct & declarative — big verbs, short sentences",
        "Commercially honest — always name the revenue impact",
        "Human — stadium energy without clichés",
        "Inclusive — reflect the full spectrum of fans and teams"
      ],
      "toneSliders": {
        "heroMessagingAds": "High-energy, declarative, 5–8 words",
        "productUiDocs": "Crisp, instructive, friendly imperatives",
        "dataReports": "Calm, factual, with a short “So what?”",
        "sensitiveComms": "Clear, empathetic, solution-first"
      },
      "copyPatterns": {
        "headlineExamples": [
          "Unify your fans. Amplify revenue.",
          "Big-league marketing for small teams.",
          "Run campaigns that drive growth."
        ],
        "subheadlineRules": "1 brief line explaining how value is delivered; optionally add timeframe or metric.",
        "ctaPrimary": [
          "Get started",
          "Request a demo",
          "Sign up",
          "Contact sales"
        ],
        "ctaSecondary": [
          "Learn more",
          "View details",
          "See how it works"
        ],
        "featureBlock": {
          "titleStyle": "Noun or short phrase (1–3 words).",
          "bodyStyle": "One sentence of utility-focused text."
        },
        "lengthGuides": {
          "heroHeadlineWords": "≤8",
          "subheadlineChars": "70–140",
          "cardBodyChars": "90–140",
          "ctaChars": "8–18"
        }
      }
    },
    "productEnforcement": {
      "copyGuardrails": "Campaign Builder suggests on-brand text aligned to voice pillars",
      "appliesTo": [
        "dashboard",
        "fanFacing"
      ]
    }
  },
  "visualIdentity": {
    "logo": {
      "type": "Wordmark",
      "name": "Stadli®",
      "preferredFormats": [
        "SVG"
      ],
      "secondaryFormats": [
        "PNG",
        "PDF"
      ],
      "coloration": "White on dark / Black on light",
      "clearSpace": "cap-height S around the mark",
      "minimumSize": {
        "digital": "20px",
        "print": "6 mm"
      },
      "rules": [
        "Do not colorize the mark",
        "Do not apply effects (glow, bevel, gradient)"
      ],
      "lockups": {
        "responsive": "N/A",
        "stacked": "N/A",
        "iconOnly": "N/A",
        "appIcon": {
          "status": "comingSoon"
        },
        "socialAvatar": {
          "status": "comingSoon"
        },
        "favicon": {
          "status": "comingSoon"
        }
      }
    },
    "subbrandSystem": {
      "status": "optional",
      "programGlyphs": "Geometric monograms built from repeated primitives (3 vertical bars, four circles grid, mirrored half-circles, up-right arrow).",
      "colorMappingRule": "Assign one accent hue per program; keep the Stadli wordmark neutral.",
      "usage": "Use glyph + program name in headers or tiles; never replace the primary wordmark for brand attribution."
    },
    "layoutDNA": [
      "Poster grid: logo top-left; headline bottom-left",
      "Full-bleed photography; no overlays or washes",
      "One accent element per surface (two max for dashboards)",
      "Clean rag, generous negative space"
    ]
  },
  "layoutAndComposition": {
    "grid": {
      "columnsDesktop": 12,
      "gutter": 24,
      "marginDesktop": 64,
      "marginTablet": 40,
      "marginMobile": 20,
      "maxContentWidth": 1200
    },
    "cardSystem": {
      "cornerRadius": 16,
      "padding": {
        "x": 20,
        "y": 20
      },
      "elevation": {
        "shadow": "0 8px 24px rgba(0,0,0,0.35)",
        "border": "1px solid rgba(255,255,255,0.06)"
      },
      "spacingBetweenCards": 20,
      "variants": [
        "default-dark",
        "outlined",
        "accent-header",
        "photo-card"
      ]
    },
    "heroPatterns": [
      {
        "name": "Left Headline, Right Visual",
        "columns": {
          "text": 7,
          "visual": 5
        },
        "rules": [
          "Oversized headline on left with two short lines.",
          "Right column uses a photo, chart, or mock.",
          "CTA row beneath headline; secondary CTA outlined."
        ]
      },
      {
        "name": "Stacked Center",
        "columns": {
          "text": 12
        },
        "rules": [
          "Centered headline, subheadline, then CTA row.",
          "Optional accent strip (48–96px) above or below."
        ]
      }
    ],
    "sectionPatterns": [
      "Grid of 4 feature cards with icon dots (2x2 desktop, 1x4 mobile).",
      "Stat panel with single accent line chart or bar chart.",
      "Monochrome logo strip of partner teams."
    ],
    "textVisualInteraction": "Text anchors left/top; visuals align right/bottom within their cards. Maintain ≥24px safe space around CTAs."
  },
  "photography": {
    "subject": "People first. Real fans, raw moments, documentary style.",
    "orientation": "Vertical-first (optimize for mobile usage).",
    "lighting": "Warm stadium energy, honest contrast",
    "casting": "Inclusive, authentic",
    "resolution": {
      "print": "300 DPI",
      "digital": "1080p minimum"
    },
    "composition": [
      "Rule of thirds",
      "Clear focal point",
      "Pleasing color harmonies"
    ],
    "avoid": [
      "heavy filters",
      "generic stock"
    ]
  },
  "colorSystem": {
    "principles": [
      "Neutral-first: black/white and grays carry most surfaces",
      "Color is highlight, not background",
      "One or two accents per asset, max",
      "Accents occupy ≤10% of any composition",
      "Every accent use must have a clear reason — otherwise drop it"
    ],
    "neutrals": {
      "ink900": {
        "hex": "#0B0B0E",
        "use": "Main backgrounds"
      },
      "cloud100": {
        "hex": "#F3F5F7",
        "use": "Light backgrounds"
      },
      "stadliWhite": {
        "hex": "#FFFFFF",
        "use": "Primary text, logos, icons"
      },
      "derived": {
        "surface": "#121418",
        "surfaceContrast": "#171A1F",
        "border": "rgba(255,255,255,0.08)",
        "textSecondary": "#B7BEC7",
        "textMuted": "#8B92A1"
      }
    },
    "accents": {
      "magentaBlaze": {
        "light": {
          "hex": "#FF87C8",
          "use": "Subtle highlights"
        },
        "base": {
          "hex": "#FF2E9A",
          "use": "Campaigns",
          "emotion": "Excitement"
        },
        "dark": {
          "hex": "#D40076",
          "use": "High-contrast text/icons"
        }
      },
      "aquaTeal": {
        "light": {
          "hex": "#A3F9E8",
          "use": "Subtle highlights"
        },
        "base": {
          "hex": "#4CF3D1",
          "use": "Engagement",
          "emotion": "Freshness"
        },
        "dark": {
          "hex": "#00D1A7",
          "use": "High-contrast text/icons"
        }
      },
      "electricOrange": {
        "light": {
          "hex": "#FF996F",
          "use": "Subtle highlights"
        },
        "base": {
          "hex": "#FF5A1F",
          "use": "Revenue",
          "emotion": "Urgency"
        },
        "dark": {
          "hex": "#D13A00",
          "use": "High-contrast text/icons"
        }
      },
      "skyCyan": {
        "light": {
          "hex": "#98E5FF",
          "use": "Subtle highlights"
        },
        "base": {
          "hex": "#45D7FF",
          "use": "CRM",
          "emotion": "Transparency"
        },
        "dark": {
          "hex": "#00B6E6",
          "use": "High-contrast text/icons"
        }
      },
      "radiantYellow": {
        "light": {
          "hex": "#FFE992",
          "use": "Subtle highlights"
        },
        "base": {
          "hex": "#FFD93B",
          "use": "Growth",
          "emotion": "Optimism"
        },
        "dark": {
          "hex": "#E6B800",
          "use": "High-contrast text/icons"
        }
      },
      "pulseGreen": {
        "light": {
          "hex": "#C2E0A6",
          "use": "Subtle highlights"
        },
        "base": {
          "hex": "#99CD64",
          "use": "Loyalty",
          "emotion": "Trust"
        },
        "dark": {
          "hex": "#72A93A",
          "use": "High-contrast text/icons"
        }
      },
      "stadiumPurple": {
        "light": {
          "hex": "#C59EFF",
          "use": "Subtle highlights"
        },
        "base": {
          "hex": "#9B5CFF",
          "use": "Innovation",
          "emotion": "Creativity"
        },
        "dark": {
          "hex": "#7426F2",
          "use": "High-contrast text/icons"
        }
      },
      "emberRed": {
        "light": {
          "hex": "#FF9D9D",
          "use": "Subtle highlights"
        },
        "base": {
          "hex": "#FF4B4B",
          "use": "Alerts",
          "emotion": "Intensity"
        },
        "dark": {
          "hex": "#E01C1C",
          "use": "High-contrast text/icons"
        }
      }
    },
    "featureColorAssignments": {
      "unifiedFanProfile": {
        "primary": "magentaBlaze.light",
        "hex": "#FF87C8",
        "label": "Magenta Blaze",
        "alternates": [
          "aquaTeal.base",
          "stadiumPurple.base"
        ],
        "notes": "Primary per brief. Use alternates if adjacent features already use magenta on the same surface."
      },
      "campaignEngine": {
        "primary": "electricOrange.base",
        "hex": "#FF5A1F",
        "label": "Electric Orange",
        "alternates": [
          "radiantYellow.base",
          "magentaBlaze.base"
        ],
        "notes": "Orange = performance/revenue. Switch to yellow for growth-focused narratives."
      },
      "analytics": {
        "primary": "pulseGreen.base",
        "hex": "#99CD64",
        "label": "Pulse Green",
        "alternates": [
          "skyCyan.dark",
          "stadiumPurple.base"
        ],
        "notes": "Green = clarity/trust. Cyan alt for data/CRM contexts; Purple for innovation stories."
      },
      "brandedApp": {
        "primary": "skyCyan.base",
        "hex": "#45D7FF",
        "label": "Sky Cyan",
        "alternates": [
          "aquaTeal.dark",
          "radiantYellow.base"
        ],
        "notes": "Assigned per instruction to add another brand color to features."
      }
    },
    "useColorMap": {
      "CRM": "skyCyan.base",
      "Revenue": "electricOrange.base",
      "Growth": "radiantYellow.base",
      "Loyalty": "pulseGreen.base",
      "Engagement": "aquaTeal.base",
      "Innovation": "stadiumPurple.base",
      "Alerts": "emberRed.base"
    },
    "usage": {
      "primaryAccentSelectionRule": "Pick exactly one accent family per artifact; dashboards may use two accents with clear separation.",
      "ratioGuidance": {
        "neutrals": "≥90%",
        "accents": "≤10%"
      },
      "graphRule": "Neutrals for baselines; one accent for emphasis only.",
      "rotationPolicy": {
        "rule": "Always vary feature and use colors across designs depending on context.",
        "constraints": [
          "Do not repeat the same accent family in consecutive assets within the same campaign unless semantically required (e.g., Revenue → electricOrange).",
          "When two feature cards appear on the same surface, use different families from their primary/alternate sets."
        ],
        "fallback": "If conflict remains, prefer alternates in order listed under featureColorAssignments."
      }
    },
    "cssTokens": {
      "--accent-feature-unified-fan-profile": "#FF87C8",
      "--accent-feature-campaign-engine": "#FF5A1F",
      "--accent-feature-analytics": "#99CD64",
      "--accent-feature-branded-app": "#45D7FF"
    }
  },
  "typography": {
    "fontFamily": "Inter",
    "weights": [
      400,
      500,
      600,
      700,
      800
    ],
    "scale": {
      "displayH1": {
        "size": "4rem",
        "px": 64,
        "weight": 800,
        "lineHeight": 1.05,
        "letterSpacing": -0.5
      },
      "h1": "3rem",
      "h2": "2.25rem",
      "h3": "1.5rem",
      "body": "1rem",
      "small": "0.875rem",
      "eyebrow": {
        "size": "0.875rem",
        "weight": 600,
        "tracking": 0.5,
        "case": "uppercase"
      },
      "numeric": {
        "featureSettings": "'tnum' 1, 'lnum' 1"
      }
    },
    "rules": [
      "Headlines ≤8 words, sentence case",
      "One accent word allowed for emphasis",
      "Hierarchy through weight + size + neutral contrast",
      "Restrict to two sizes per card to reduce noise"
    ],
    "cssTokens": {
      "--font-display": "\"Inter\", system-ui, sans-serif",
      "--font-body": "\"Inter\", system-ui, sans-serif",
      "--display-h1": "4rem",
      "--h1": "3rem",
      "--h2": "2.25rem",
      "--h3": "1.5rem",
      "--body": "1rem",
      "--small": "0.875rem"
    }
  },
  "iconographyAndShapes": {
    "style": "Geometric, minimal, rounded terminals",
    "strokeWeightPx": 2,
    "cornerRadiusPx": 16,
    "motifs": [
      "filled circles/dots as bullets or status chips",
      "quarter/half circles forming abstract monograms",
      "up-right arrow for momentum/progress",
      "rectilinear bars for charts and progress"
    ],
    "do": [
      "Use single-color icons (accent or white).",
      "Keep generous negative space inside icon tiles."
    ],
    "dont": [
      "No skeuomorphic details",
      "Avoid strokes thinner than 1.5px on dark surfaces"
    ]
  },
  "backgroundsAndPatterns": {
    "base": "Solid near-black canvas (#0B0B0E)",
    "surfaceVariants": [
      "slightly lighter panels",
      "accent header strips 56–96px high"
    ],
    "dividers": "1px hairlines with 6–10% white",
    "optionalTexture": "Subtle noise ≤3% opacity"
  },
  "components": {
    "buttons": {
      "primary": {
        "shape": "rounded-2xl",
        "paddingXY": [
          18,
          14
        ],
        "background": "stadliWhite (on dark) or ink900 (on light)",
        "textColor": "ink900 (on light) or ink900 inverted when needed",
        "border": "1px solid rgba(255,255,255,0.18) on dark",
        "focusRing": "1px outline in selected accent"
      },
      "secondary": {
        "shape": "rounded-2xl",
        "paddingXY": [
          18,
          14
        ],
        "background": "transparent",
        "border": "1px solid rgba(255,255,255,0.18)",
        "textColor": "stadliWhite"
      },
      "rules": [
        "CTAs must be neutral (white/black only).",
        "Do not fill CTAs with accent colors; accents may be used for focus ring or small indicators."
      ]
    },
    "chips": {
      "dotChip": {
        "leftDot": "8–10px, solid accent",
        "label": "small",
        "background": "derived.surfaceContrast"
      }
    },
    "forms": {
      "field": {
        "fill": "derived.surfaceContrast",
        "radius": 14,
        "border": "1px solid rgba(255,255,255,0.12)",
        "focus": "1px outline in selected accent"
      }
    },
    "cards": {
      "feature": {
        "icon": "accent dot or simple glyph",
        "title": "h3",
        "body": "small",
        "ctaInline": "text link or chevron",
        "colorSource": "colorSystem.featureColorAssignments[featureKey].primary (fallback to alternates by rotationPolicy)"
      },
      "stat": {
        "title": "eyebrow",
        "valueStyle": {
          "sizePx": 28,
          "weight": 800
        },
        "viz": "single bar/line with accent color"
      },
      "notification": {
        "variants": [
          "success (aquaTeal.dark border)",
          "warning (radiantYellow.dark border)",
          "info (skyCyan.dark border)",
          "error (emberRed.dark border)"
        ],
        "icon": "monoline symbol in matching accent"
      }
    },
    "logoStrip": {
      "treatment": "monochrome partner logos",
      "opacity": 0.85,
      "spacing": 32
    }
  },
  "dataViz": {
    "style": "Minimalist; single-accent charts; rounded bars; thin axis lines",
    "lineWeightPx": 2,
    "gridlines": "off or very subtle (≤10% opacity)",
    "labels": "short, tabular numerals; minimal ticks",
    "defaults": {
      "baselineColor": "rgba(255,255,255,0.18)",
      "accent": "selected accent base",
      "positive": "accent base",
      "negative": "emberRed.base"
    }
  },
  "animationAndInteraction": {
    "motion": {
      "entrance": "fade + 8px upward slide, 200–300ms, ease-out",
      "hover": "elevate cards by +4px shadow; buttons scale 1.02",
      "chipPulse": "subtle 2s opacity oscillation for dot indicators (optional)"
    }
  },
  "patternsAndTemplates": {
    "repeatablePatterns": [
      "Accent color tiles/strips to segment sections",
      "Rows of rounded cards with consistent padding and icon dots",
      "Hero headline split across two lines with mirrored verbs",
      "Single-accent charts and progress widgets for proof blocks"
    ],
    "idealUseCases": [
      "Web hero sections and sales pages",
      "Feature overviews and pricing pages",
      "Webinar promos and event splash graphics",
      "Performance/metric callouts on social",
      "Product one-pagers and pitch decks"
    ],
    "aspectRatiosAndSizes": {
      "webHero": "1440x900",
      "socialLandscape": "1200x630",
      "socialSquare": "1080x1080",
      "storyVertical": "1080x1920",
      "presentationSlide": "1920x1080"
    },
    "compositionAlgorithm": {
      "steps": [
        "Set canvas to ink900; apply 64px outer margins (desktop).",
        "Place hero headline using displayH1 or h1; keep to two lines.",
        "Add subheadline/body below with 20–28px spacing.",
        "Insert CTA row (neutral primary + outlined secondary).",
        "Add right/adjacent visual (photo or chart) aligned to grid.",
        "Below hero, render a 2x2 grid of feature cards with icon dots.",
        "Add a stat card row with one accent chart and a large numeric.",
        "Close with testimonial or logo strip and a final neutral CTA band."
      ],
      "accentSelectionRule": "Choose one accent family and apply to chips, icons, and charts only."
    }
  },
  "accessibilityAndQA": {
    "rules": [
      "Enforce the one-accent rule and ≤10% accent coverage per asset",
      "Maintain 4.5:1 contrast for body text (3:1 for large display)",
      "CTAs must be neutral (white/black only)",
      "Headlines ≤8 words for clean translation",
      "Enforce brand guardrails in dashboard (accent ≤10%, neutral CTAs)",
      "Focus states must be visible using selected accent"
    ]
  },
  "governance": {
    "sourceOfTruth": "Figma library with synced tokens",
    "qaProcess": "Monthly brand reviews to check accent coverage, CTA neutrality, and contrast",
    "changeControl": "Any new accent shades require accessibility review and documented rationale",
    "enforcementTargets": [
      "dashboard",
      "fanFacing"
    ],
    "noDarkPatterns": true
  },
  "quickStartCheatSheet": [
    "Logo in white or black, never colorized",
    "Headline in Inter, ≤8 words; use displayH1 for hero",
    "Photography full-bleed, raw fan energy",
    "One accent max per asset (two only for complex dashboards)",
    "CTAs always white or black; focus ring may use an accent",
    "Charts: neutrals + one accent highlight",
    "Copy: declarative, commercial",
    "Feature colors → UFP: #FF87C8 (magentaBlaze.light), Campaign: #FF5A1F (electricOrange.base), Analytics: #99CD64 (pulseGreen.base), Branded App: #45D7FF (skyCyan.base). Rotate by context per rotationPolicy."
  ]
}