Spaces:
Running
Running
File size: 4,928 Bytes
15d717a cb18184 15d717a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 | # 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`
|