# Predictive Analytics > The future is drawn as a widening violet fan of confidence bands right of a “Today” line — with scenario toggles, driver bars and model-confidence meters on every prediction. - Nickname: Forecast fan - Also called: Forecast dashboard, ML insights dashboard, Predictive BI - Category: Dashboards & Data - Moods: Techy, Trustworthy, Calm - Industries: Healthcare, AI Products, SaaS, Fintech & Banking, E‑commerce - Style page: https://uilingo.dev/styles/predictive-analytics/ Predictive analytics dashboards show what is likely to happen, and how sure the model is. Actual history is a solid teal line; past the dashed “Today” marker the forecast continues as a dashed violet line inside nested 50/80/95% confidence bands that widen with time, over a faint dot-grid “future zone”. A scenario switch (conservative · expected · optimistic) and horizon chips sit above the chart, every predicted number carries a segmented confidence meter, and a driver panel explains why with diverging feature-importance bars. The skin is clean and clinical: icy mint-white, soft 12–16px corners, teal for facts, violet for probabilities. ## Best for - Demand, staffing and capacity planning - Risk scoring (churn, no-show, fraud) - Sales and inventory forecasting - ML product surfaces that must explain predictions ## Avoid for - Pure historical reporting with no model behind it - Audiences who will read a forecast as a promise - Real-time incident monitoring ## Do - Always separate actual from predicted with a Today marker and a line-style change (solid → dashed) - Show uncertainty as bands that widen with the horizon, plus a numeric confidence on every prediction - Explain the forecast with drivers and let users switch scenarios ## Don't - Don’t draw a forecast as a single confident solid line - Don’t use the same colour for actual and predicted values - Don’t hide model age, accuracy or drift ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Predictive Analytics" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line The future is drawn as a widening violet fan of confidence bands right of a “Today” line — with scenario toggles, driver bars and model-confidence meters on every prediction. Design keywords: confidence bands, forecast fan chart, dashed future line, Today marker, scenario toggle, model confidence meter, feature-importance drivers, probability bars, teal facts, violet predictions. ## Visual language A clean, clinical forecasting workspace on icy mint-white (#F2F7F7) with white 16px-radius cards and soft teal-tinted shadows. Facts are teal; predictions are violet. The hero element is a fan chart: a solid teal history line runs to a dashed 'Today' marker, then continues as a dashed violet forecast inside nested 50/80/95% violet bands that widen with time over a faint violet dot-grid 'future zone'. Scenario switches, horizon chips and small 4-bar confidence meters make uncertainty explicit everywhere. ## Signature details (must be visible) - Fan chart: actual = 3px solid #0A7A73; forecast = 2.5px #6A50D3 dashed 7/5; bands = violet at 24% (50%), 16% (80%), 12% (95%) opacity, widening roughly with horizon^0.85 - 'Today' marker: 1.25px dashed vertical line with a dark pill label on top; the area right of it gets a 5% violet tint plus a 10px violet dot grid - Other scenarios drawn as thin 1.25px dotted violet lines above and below the forecast - Confidence meter: four ascending 4px bars (5/7/9/12px tall) in violet, filled 2–4 by level, followed by 'High · 92%' - Every predicted KPI shows the value, a mono '± 4%' range in violet and 'Predicted · next 30 days' under it, separated from the meter by a dashed rule - Driver panel: diverging feature-importance bars around a centre hairline — teal to the right (raises), danger #C93545 at 85% opacity to the left (lowers) — with mono SHAP values - Progress bars read as actual + projected: teal fill over a striped violet track - Decorative art = a widening violet wedge (clip-path triangle, two opacities) to the right of a dashed vertical line on a dot grid - Hero headline fade: background: linear-gradient(90deg, #10282B 0 45%, #6A50D3 100%); -webkit-background-clip:text; color: transparent — only on the hero headline, nowhere else - Accent #9B8AFB is decorative only (wedge art, dot grid, band tint); never use it for text on white ## Design tokens — use these exact values Colours (light mode): - background #F2F7F7 - surface #FFFFFF - surface-2 #E8F1F1 - text #10282B - text-muted #4B6266 - primary #0A7A73 (text on it #FFFFFF) - secondary #6A50D3 (text on it #FFFFFF) - accent #9B8AFB - border #D3E2E2 - success #12805C · warning #A05C00 · danger #C93545 - chart series #0A7A73, #6A50D3, #8FD3CB, #E9A23B, #C93545 Radius: sm 8px, md 12px, lg 16px, xl 22px, pill 999px Border width: 1px Shadows: sm `0 1px 3px rgba(10,60,60,0.06)`, md `0 8px 24px rgba(10,60,60,0.08)`, lg `0 24px 56px rgba(10,60,60,0.14)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.05 density Motion: 260ms cubic-bezier(.25,.8,.25,1) ## Typography (Latin + Thai) - Headings: Outfit 500/600 with Thai fallback Prompt 500/600 - Body: DM Sans 400/500/600 with Thai fallback IBM Plex Sans Thai Looped 400/500/600 - Mono: DM Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Outfit:wght@500;600&family=DM+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&family=Prompt:wght@500;600&family=IBM+Plex+Sans+Thai+Looped:wght@400;500;600&display=swap - CSS stacks: heading `"Outfit", "Prompt", system-ui, sans-serif`; body `"DM Sans", "IBM Plex Sans Thai Looped", system-ui, sans-serif`; mono `"DM Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai Looped", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to IBM Plex Sans Thai Looped — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.75rem, 5.8vw, 4.75rem), heading weight 600, heading tracking -0.025em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Prompt has the same clean geometric circles as Outfit for headings; looped IBM Plex Sans Thai Looped keeps clinical body text and small chart labels highly legible next to DM Sans. ## Components - Buttons: 44px, 12px radius; primary teal with a soft teal glow; secondary white with a violet-tinted border and a 7% violet hover; accent violet - Controls bar card: 'Scenario' pill segmented control (Conservative · Expected · Optimistic, selected = solid violet), 'Horizon' chips (active chip violet), and a teal 'Confidence bands' switch - Badges: pill; model badges violet-tint with an inline confidence meter; status badges tinted green/amber/red - Eyebrow: violet-tint pill with a tiny 4-step meter glyph before the text - Inputs: 12px radius, focus = teal border + 4px 16% teal ring - Probability cells in tables: 8px rounded track with teal (<30%), amber (30–60%) or red (>60%) fill and a mono percentage - Model health card: status dots with soft halos, mono values, and a backtest mini chart of teal bars (actual) with violet ticks (predicted) - Floating mobile tab bar: white pill with border and large shadow, active icon teal with a 5px violet dot below - Charts: inline SVG is allowed and preferred for the fan chart, bands and scenario lines (paths with vector-effect: non-scaling-stroke); axis and mono numbers use "DM Mono", "IBM Plex Sans Thai Looped" so Thai digits and units fall back cleanly; Thai month labels on axes use the Thai body face ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: centred headline with the product visual below it. Navigation: pill style. Sections in order: hero → trust → features → showcase → steps → faq → cta. Feature section as alternating. Landing: pill nav; centered hero whose headline uses the ink→violet fade; the hero product visual is the controls bar + a fan chart card with the Today marker + a 3-up predicted KPI row, each with a ± range and a confidence meter. Then trust = 4–5 pill badges with a small teal dot (compliance, accuracy e.g. 'MAPE 6.8%', customer count); alternating feature rows illustrated with violet fan wedges; showcase = drivers panel + risk-score table + model-health card side by side; steps with dashed violet number rings (first one solid teal); FAQ with dashed separators; a teal→violet CTA with a white wedge. Dashboard: white sidebar (with a Models entry and a model card showing a confidence meter), topbar with a 'Predictions updated 06:00' violet badge, title + What-if and Export buttons, the controls bar, predicted KPI row, fan chart (8) + drivers (4), then risk-score table (8) + model health with backtest (4). Forms carry the signature too: a teal 'actual' progress fill over a striped violet 'projected' track at the top, and a dashed violet rule after each section legend. ## Content Use realistic product copy (fictional brand) suited to: Demand, staffing and capacity planning. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Always separate actual from predicted with a Today marker and a line-style change (solid → dashed) - Show uncertainty as bands that widen with the horizon, plus a numeric confidence on every prediction - Explain the forecast with drivers and let users switch scenarios ## Don't - Don’t draw a forecast as a single confident solid line - Don’t use the same colour for actual and predicted values - Don’t hide model age, accuracy or drift - A forecast drawn as one solid line with no bands, or in the same colour as actuals - Dark NOC styling, pulsing live dots and alert walls — that is Real-time Monitoring - Chat bubbles or agent UIs as the main surface — that is AI-native UI - Neon glow or heavy gradients on data marks; violet is for probability, not decoration - Hiding model age, accuracy or the scenario that is currently selected - Letter-spacing or uppercase on Thai labels; Thai body stays in looped IBM Plex Sans Thai Looped at line-height 1.75 ## Stack notes One self-contained HTML file with a