STYLE_GUIDE.md

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)

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:

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

background: linear-gradient(135deg, #124b5f 0%, #1a6b7a 100%);
/* White text on teal background */

Metric Cards (hero/highlight)

background: #ffffff;
border: 1px solid #d1ddc8;
border-left: 4px solid #124b5f;  /* or semantic color */
border-radius: 12px;

Section Labels

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