"""
CXInsights Dashboard - Configuration & Branding
Based on Beyond Brand Identity Guidelines v1.0
"""
import streamlit as st
# =============================================================================
# BEYOND BRAND COLORS
# =============================================================================
COLORS = {
# Primary colors
"black": "#000000", # Beyond Black - Primary
"blue": "#6D84E3", # Beyond Blue - Accent (ONLY accent color)
"grey": "#B1B1B0", # Beyond Grey - Secondary
"light_grey": "#E4E4E4", # Beyond Light Grey - Backgrounds
"white": "#FFFFFF",
# Derived colors for UI states
"blue_hover": "#5A6FD1", # Blue darkened 10%
"blue_light": "#DBE2FC", # Light blue for subtle backgrounds
# Chart colors (ordered by importance) - light theme
"chart_primary": "#6D84E3", # Blue - main data
"chart_secondary": "#B1B1B0", # Grey - comparison/benchmark
"chart_tertiary": "#7A7A7A", # Dark grey - third series
"chart_quaternary": "#E4E4E4", # Light grey - fourth series
# Gradients for charts - light theme
"gradient_blue": ["#E4E4E4", "#B1B1B0", "#6D84E3"],
"gradient_grey": ["#FFFFFF", "#E4E4E4", "#B1B1B0", "#7A7A7A"],
"gradient_red": ["#E4E4E4", "#B1B1B0", "#6D84E3", "#5A6FD1"], # For severity
}
# Chart color sequence (for Plotly) - light theme
CHART_COLORS = [
COLORS["blue"], # Primary
COLORS["grey"], # Secondary
COLORS["chart_tertiary"], # Dark grey - Tertiary
COLORS["light_grey"], # Quaternary
]
# =============================================================================
# TYPOGRAPHY (Outfit font via Google Fonts)
# =============================================================================
FONTS = {
"family": "'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
"sizes": {
"h1": "40px",
"h2": "35px",
"h3": "21px",
"body": "17px",
"small": "12px",
"caption": "10px",
},
"weights": {
"black": 900,
"bold": 700,
"medium": 500,
"regular": 400,
"light": 300,
"thin": 100,
}
}
# =============================================================================
# THEME CONFIG FOR PLOTLY CHARTS
# =============================================================================
THEME_CONFIG = {
"layout": {
"font": {
"family": FONTS["family"],
"color": COLORS["black"],
},
"paper_bgcolor": COLORS["white"],
"plot_bgcolor": COLORS["white"],
"title": {
"font": {
"size": 18,
"family": FONTS["family"],
"color": COLORS["black"],
},
"x": 0,
"xanchor": "left",
},
"legend": {
"font": {"size": 14},
"bgcolor": "rgba(255,255,255,0)",
},
"xaxis": {
"gridcolor": COLORS["light_grey"],
"linecolor": COLORS["grey"],
"tickfont": {"size": 12, "color": COLORS["grey"]},
"title_font": {"size": 14, "color": COLORS["grey"]},
},
"yaxis": {
"gridcolor": COLORS["light_grey"],
"linecolor": COLORS["grey"],
"tickfont": {"size": 12, "color": COLORS["grey"]},
"title_font": {"size": 14, "color": COLORS["grey"]},
"rangemode": "tozero", # Always start at 0 (McKinsey standard)
},
"margin": {"l": 60, "r": 40, "t": 60, "b": 60},
}
}
# =============================================================================
# STREAMLIT CUSTOM CSS
# =============================================================================
def apply_custom_css():
"""Apply Beyond brand CSS to Streamlit app."""
st.markdown("""
""", unsafe_allow_html=True)
def get_plotly_layout(title: str = "", height: int = 400) -> dict:
"""Get standard Plotly layout with Beyond branding."""
layout = THEME_CONFIG["layout"].copy()
layout["height"] = height
if title:
layout["title"]["text"] = title
return layout
def format_metric_card(value: str, label: str, delta: str = None) -> str:
"""Generate HTML for a branded KPI card."""
delta_html = f'{delta}
' if delta else ""
return f"""
{value}
{label}
{delta_html}
"""
def format_evidence_quote(text: str, speaker: str = None) -> str:
"""Format evidence text with Beyond styling."""
speaker_html = f'— {speaker}
' if speaker else ""
return f"""
"{text}"
{speaker_html}
"""