Predictive Analytics

Also called: Forecast dashboard, ML insights dashboard, Predictive BI

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.

“Forecast fan”Dashboards & DataEra: 2018 → todayTechyTrustworthyCalm

Open full screen ↗

predictive-analytics / landingEN

predictive-analytics / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm8pxRadius md12pxRadius lg16pxRadius xl22pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

confidence bandsforecast fan chartdashed future lineToday markerscenario togglemodel confidence meterfeature-importance driversprobability barsteal facts, violet predictions

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

Not to be confused with

Real-Time Monitoring →Real-time monitoring is about now (live dots, alerts, dark NOC); Predictive is about later (fan-shaped bands past a Today line, scenario switches).AI-Native UI →AI-native UI is a chat/agent interface; Predictive Analytics is a classic chart dashboard whose numbers come from a model.Comparative Analysis Dashboard →Comparative pairs this period with the last (solid vs hatched); Predictive extends the line forward into violet probability bands.

On mobile

Show one forecast card at a time with the fan chart cropped to the next 30 days, a horizontal scenario switch above it and a confidence meter on the headline number. Use the floating tab bar; drop the dot-grid future zone and keep only two bands (50/90%) for performance and legibility.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinOutfit · 500/600

The quick brown fox

Heading · ThaiPrompt · 500/600

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinDM Sans · 400/500/600

Clear words make shared decisions.

Body · ThaiIBM Plex Sans Thai Looped · 400/500/600

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 8px · md 12px · lg 16px · xl 22px · pill 999px`
Border	`1px`
Shadow	`0 8px 24px rgba(10,60,60,0.08)`
Display	`clamp(2.75rem, 5.8vw, 4.75rem)`
Motion	`260ms cubic-bezier(.25,.8,.25,1)`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Predictive Analytics (predictive-analytics) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 16px;
  --background: #F2F7F7;
  --foreground: #10282B;
  --card: #FFFFFF;
  --card-foreground: #10282B;
  --popover: #FFFFFF;
  --popover-foreground: #10282B;
  --primary: #0A7A73;
  --primary-foreground: #FFFFFF;
  --secondary: #6A50D3;
  --secondary-foreground: #FFFFFF;
  --muted: #E8F1F1;
  --muted-foreground: #4B6266;
  --accent: #E8F1F1;
  --accent-foreground: #10282B;
  --destructive: #C93545;
  --border: #D3E2E2;
  --input: #D3E2E2;
  --ring: #0A7A73;
  --chart-1: #0A7A73;
  --chart-2: #6A50D3;
  --chart-3: #8FD3CB;
  --chart-4: #E9A23B;
  --chart-5: #C93545;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #10282B;
  --sidebar-primary: #0A7A73;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #E8F1F1;
  --sidebar-accent-foreground: #10282B;
  --sidebar-border: #D3E2E2;
  --sidebar-ring: #0A7A73;
}

.dark {
  --background: #0B1716;
  --foreground: #E6F2F0;
  --card: #112220;
  --card-foreground: #E6F2F0;
  --popover: #112220;
  --popover-foreground: #E6F2F0;
  --primary: #3CC7B9;
  --primary-foreground: #062220;
  --secondary: #A895FF;
  --secondary-foreground: #120B2E;
  --muted: #172D2A;
  --muted-foreground: #9DB8B4;
  --accent: #172D2A;
  --accent-foreground: #E6F2F0;
  --destructive: #FF6F7D;
  --border: #24403C;
  --input: #24403C;
  --ring: #3CC7B9;
  --chart-1: #3CC7B9;
  --chart-2: #A895FF;
  --chart-3: #2E7F77;
  --chart-4: #E9B04A;
  --chart-5: #FF6F7D;
  --sidebar: #112220;
  --sidebar-foreground: #E6F2F0;
  --sidebar-primary: #3CC7B9;
  --sidebar-primary-foreground: #062220;
  --sidebar-accent: #172D2A;
  --sidebar-accent-foreground: #E6F2F0;
  --sidebar-border: #24403C;
  --sidebar-ring: #3CC7B9;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Predictive Analytics (predictive-analytics) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #F2F7F7;
  --color-surface: #FFFFFF;
  --color-surface-2: #E8F1F1;
  --color-text: #10282B;
  --color-text-muted: #4B6266;
  --color-primary: #0A7A73;
  --color-on-primary: #FFFFFF;
  --color-secondary: #6A50D3;
  --color-on-secondary: #FFFFFF;
  --color-accent: #9B8AFB;
  --color-border: #D3E2E2;
  --color-success: #12805C;
  --color-warning: #A05C00;
  --color-danger: #C93545;
  --color-chart-1: #0A7A73;
  --color-chart-2: #6A50D3;
  --color-chart-3: #8FD3CB;
  --color-chart-4: #E9A23B;
  --color-chart-5: #C93545;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(10,60,60,0.06);
  --shadow-md: 0 8px 24px rgba(10,60,60,0.08);
  --shadow-lg: 0 24px 56px rgba(10,60,60,0.14);
  --font-heading: "Outfit", "Prompt", system-ui, sans-serif;
  --font-body: "DM Sans", "IBM Plex Sans Thai Looped", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai Looped", monospace;
}

.dark {
  --color-bg: #0B1716;
  --color-surface: #112220;
  --color-surface-2: #172D2A;
  --color-text: #E6F2F0;
  --color-text-muted: #9DB8B4;
  --color-primary: #3CC7B9;
  --color-on-primary: #062220;
  --color-secondary: #A895FF;
  --color-on-secondary: #120B2E;
  --color-accent: #7C6AE0;
  --color-border: #24403C;
  --color-success: #45C98F;
  --color-warning: #E9B04A;
  --color-danger: #FF6F7D;
  --color-chart-1: #3CC7B9;
  --color-chart-2: #A895FF;
  --color-chart-3: #2E7F77;
  --color-chart-4: #E9B04A;
  --color-chart-5: #FF6F7D;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Predictive Analytics (predictive-analytics). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.9686,
            0.9686
          ],
          "hex": "#f2f7f7"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.9451,
            0.9451
          ],
          "hex": "#e8f1f1"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0627,
            0.1569,
            0.1686
          ],
          "hex": "#10282b"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2941,
            0.3843,
            0.4
          ],
          "hex": "#4b6266"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.4784,
            0.451
          ],
          "hex": "#0a7a73"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4157,
            0.3137,
            0.8275
          ],
          "hex": "#6a50d3"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6078,
            0.5412,
            0.9843
          ],
          "hex": "#9b8afb"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.8863,
            0.8863
          ],
          "hex": "#d3e2e2"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.502,
            0.3608
          ],
          "hex": "#12805c"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6275,
            0.3608,
            0
          ],
          "hex": "#a05c00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.2078,
            0.2706
          ],
          "hex": "#c93545"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0392,
            0.4784,
            0.451
          ],
          "hex": "#0a7a73"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4157,
            0.3137,
            0.8275
          ],
          "hex": "#6a50d3"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5608,
            0.8275,
            0.7961
          ],
          "hex": "#8fd3cb"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.6353,
            0.2314
          ],
          "hex": "#e9a23b"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.2078,
            0.2706
          ],
          "hex": "#c93545"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0902,
            0.0863
          ],
          "hex": "#0b1716"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.1333,
            0.1255
          ],
          "hex": "#112220"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.1765,
            0.1647
          ],
          "hex": "#172d2a"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.949,
            0.9412
          ],
          "hex": "#e6f2f0"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6157,
            0.7216,
            0.7059
          ],
          "hex": "#9db8b4"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2353,
            0.7804,
            0.7255
          ],
          "hex": "#3cc7b9"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0235,
            0.1333,
            0.1255
          ],
          "hex": "#062220"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.5843,
            1
          ],
          "hex": "#a895ff"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.0431,
            0.1804
          ],
          "hex": "#120b2e"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4863,
            0.4157,
            0.8784
          ],
          "hex": "#7c6ae0"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.251,
            0.2353
          ],
          "hex": "#24403c"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2706,
            0.7882,
            0.5608
          ],
          "hex": "#45c98f"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.6902,
            0.2902
          ],
          "hex": "#e9b04a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4353,
            0.4902
          ],
          "hex": "#ff6f7d"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2353,
            0.7804,
            0.7255
          ],
          "hex": "#3cc7b9"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.5843,
            1
          ],
          "hex": "#a895ff"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.498,
            0.4667
          ],
          "hex": "#2e7f77"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.6902,
            0.2902
          ],
          "hex": "#e9b04a"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4353,
            0.4902
          ],
          "hex": "#ff6f7d"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 22,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0392,
              0.2353,
              0.2353
            ],
            "hex": "#0a3c3c",
            "alpha": 0.06
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 3,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0392,
              0.2353,
              0.2353
            ],
            "hex": "#0a3c3c",
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 24,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0392,
              0.2353,
              0.2353
            ],
            "hex": "#0a3c3c",
            "alpha": 0.14
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 24,
            "unit": "px"
          },
          "blur": {
            "value": 56,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Outfit",
        "Prompt",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "DM Sans",
        "IBM Plex Sans Thai Looped",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "DM Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "IBM Plex Sans Thai Looped",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 260,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.25,
      0.8,
      0.25,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 2
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!