Spaces:
Running
Running
| # LiiS Brand Style Guide — Simulator Dashboard | |
| This document defines the visual style for the LiiS Circular Economy Simulator. All UI elements, charts, and custom HTML should follow these rules. | |
| ## Brand Assets | |
| ``` | |
| branding/ | |
| ├── Futura.ttc # Brand font | |
| ├── pasted-image-1.png # Logo (deep purple, for light backgrounds) | |
| ├── pasted-image-2-1.png # Logo (light green, for dark backgrounds) | |
| └── Skjermbilde 2026-02-05 kl. 13.45.30.png # Color palette reference | |
| ``` | |
| ## Color Palette | |
| ### Core Brand Colors | |
| | Token | Hex | Usage | | |
| |--------------------|-----------|---------------------------------------------| | |
| | `background` | `#f9fcf3` | Page background, main content area | | |
| | `surface` | `#ffffff` | Cards, panels, elevated elements | | |
| | `surface-alt` | `#eef5e6` | Sidebar, secondary backgrounds | | |
| | `primary` | `#124b5f` | Primary CTA, positive indicators, key data | | |
| | `secondary` | `#785964` | Secondary CTA, accents, supporting elements | | |
| | `text` | `#1a1a2e` | Primary body text, headings | | |
| | `text-muted` | `#4a5568` | Secondary labels, captions | | |
| | `text-subtle` | `#718096` | Tertiary info, placeholders | | |
| | `border` | `#d1ddc8` | Card borders, dividers | | |
| ### Semantic Colors | |
| | Token | Hex | Usage | | |
| |--------------------|-----------|---------------------------------------| | |
| | `positive` | `#124b5f` | Profit, success, circular model | | |
| | `negative` | `#a0444a` | Loss, errors, linear model | | |
| | `warning` | `#c87941` | Cautions, break-even zone | | |
| | `info` | `#4a7c9b` | Neutral information, notes | | |
| ### Chart Palette (ordered for multi-series) | |
| ```python | |
| CHART_COLORS = [ | |
| "#124b5f", # Deep teal (primary) | |
| "#785964", # Muted mauve (secondary) | |
| "#2a7f62", # Sage green | |
| "#c87941", # Warm amber | |
| "#4a7c9b", # Steel blue | |
| "#a0444a", # Muted red | |
| ] | |
| ``` | |
| Use `#124b5f` for the "good" series (revenue, circular model), `#a0444a` for the "bad" series (cost, linear model). When only two series exist, use primary + secondary. | |
| ### Grade Colors (product return grading) | |
| | Grade | Hex | Meaning | | |
| |---------|-----------|---------------------| | |
| | Grade A | `#124b5f` | Clean only | | |
| | Grade B | `#c87941` | Repair needed | | |
| | Grade C | `#a0444a` | Scrap | | |
| ## Typography | |
| - **Font:** Futura (geometric sans-serif) — brand font | |
| - **Fallback stack:** `'Futura', 'Century Gothic', 'Arial', sans-serif` | |
| - **Headings:** Bold weight, sentence case (not ALL CAPS unless very short labels) | |
| - **Body:** Regular weight | |
| - **Streamlit config:** `font = "sans serif"` (closest available) | |
| ## Plotly Chart Theming | |
| All charts use a custom light theme. Key settings: | |
| ```python | |
| LIIS_LAYOUT = dict( | |
| paper_bgcolor="#f9fcf3", | |
| plot_bgcolor="#ffffff", | |
| font=dict(family="Futura, Century Gothic, Arial, sans-serif", color="#1a1a2e"), | |
| xaxis=dict(gridcolor="#e2e8f0", zerolinecolor="#d1ddc8"), | |
| yaxis=dict(gridcolor="#e2e8f0", zerolinecolor="#d1ddc8"), | |
| colorway=["#124b5f", "#785964", "#2a7f62", "#c87941", "#4a7c9b", "#a0444a"], | |
| legend=dict(orientation="h", yanchor="bottom", y=1.02), | |
| hovermode="x unified", | |
| ) | |
| ``` | |
| ## Custom HTML/CSS Patterns | |
| ### Header Banner | |
| ```css | |
| background: linear-gradient(135deg, #124b5f 0%, #1a6b7a 100%); | |
| /* White text on teal background */ | |
| ``` | |
| ### Metric Cards (hero/highlight) | |
| ```css | |
| background: #ffffff; | |
| border: 1px solid #d1ddc8; | |
| border-left: 4px solid #124b5f; /* or semantic color */ | |
| border-radius: 12px; | |
| ``` | |
| ### Section Labels | |
| ```css | |
| color: #718096; | |
| font-size: 0.75rem; | |
| text-transform: uppercase; | |
| letter-spacing: 1px; | |
| ``` | |
| ### Status Badges | |
| | Status | Background | Text | | |
| |-------------|-----------|---------| | |
| | Profitable | `#124b5f` | `#fff` | | |
| | Healthy | `#c87941` | `#fff` | | |
| | Break-even | `#785964` | `#fff` | | |
| | Loss | `#a0444a` | `#fff` | | |
| ## What NOT to Do | |
| - No dark backgrounds (`#0e1117`, `#1a1f2e`, `#2c3e50`) | |
| - No bright neon colors (`#2ecc71`, `#e74c3c`, `#3498db`) | |
| - No `plotly_dark` template | |
| - No white text on dark cards (flip: dark text on light cards) | |
| - No heavy drop shadows — keep it light and airy | |
| ## Quick Migration Checklist | |
| When adding new features or charts: | |
| 1. Use `LIIS_LAYOUT` for all `fig.update_layout()` calls | |
| 2. Use semantic colors (positive/negative/warning) not arbitrary hex | |
| 3. Card backgrounds should be `#ffffff` with `#d1ddc8` border | |
| 4. Text should be dark (`#1a1a2e`) on light backgrounds | |
| 5. Accent colors from `CHART_COLORS` list only | |
| 6. Muted text uses `#718096`, not `#888` or `#666` | |