# 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`