# Comparative Analysis Dashboard > Every number has a partner: solid cobalt for this period, hatched slate for the last, an amber “vs” between them and a ▲▼ delta badge on everything. - Nickname: This vs that - Also called: Period-over-period dashboard, Benchmark dashboard, Side-by-side comparison view - Category: Dashboards & Data - Moods: Trustworthy, Calm, Techy - Industries: Education, SaaS, Corporate & B2B, Government & Nonprofit, E‑commerce - Style page: https://uilingo.dev/styles/comparative-analysis-dashboard/ A comparative dashboard answers one question everywhere: better or worse than before? The page opens with a comparison lens — period A vs period B — and every widget is drawn as a pair. The current period is solid cobalt; the comparison period is the same shape in hatched slate, so the eye reads “ghost vs real” without a legend. Grouped bars, dumbbell plots and two-line trends replace single-series charts, and each figure carries a pill-shaped delta badge in green or red. Surfaces stay calm and white so the paired colours do the talking. ## Best for - Term-over-term or year-over-year reporting - A/B tests and campaign comparisons - Benchmarking branches, schools or teams - Monthly business reviews ## Avoid for - Real-time operations with no meaningful baseline - Consumer apps where one number is enough - Forecast-heavy planning (use predictive views) ## Do - Encode the comparison period as the same mark in a hatched or lighter variant, never a different hue family - Put a signed delta badge (▲ +5.2 pts / ▼ −18) next to every headline number - Lock both periods to the same axis and scale ## Don't - Don’t compare two different chart types — pair like with like - Don’t show a delta without saying what it is compared to - Don’t use more than two periods in one widget ## Audit Passed after 1 round · 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 "Comparative Analysis Dashboard" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Every number has a partner: solid cobalt for this period, hatched slate for the last, an amber “vs” between them and a ▲▼ delta badge on everything. Design keywords: period over period, side-by-side bars, hatched previous period, delta badges ▲▼, A vs B lens, dumbbell chart, grouped bars, benchmark against last term. ## Visual language A calm white analytics workspace where every number has a partner. The current period is always solid cobalt (#2747D9) and the comparison period is the same mark drawn in diagonal hatching of slate grey, so 'now vs before' reads without a legend. A comparison lens bar (period switch, two period chips and an amber 'VS' disc) sits above everything, and every figure carries a pill-shaped ▲/▼ delta badge in green or red. Geometric Sora headings, Inter body, 10–14px radii, soft one-step shadows. ## Signature details (must be visible) - Paired encoding everywhere: current = solid #2747D9; previous = repeating-linear-gradient(135deg, #A3AAC4 0 2.5px, transparent 2.5px 6px) with a 1–1.5px inset outline of the same slate - Comparison lens bar under the page title: 'Compare' label, pill segmented Week/Month/Term/Year, chip A (cobalt tint, solid swatch) — amber 34px 'VS' disc with a 4px halo — chip B (hatched swatch) - Delta badges: pill, JetBrains Mono 600 0.78rem, '▲ 14%' on 14% green tint or '▼ 18' on 12% red tint; a grey '■ 0.0' for no change - KPI cards show value, 'Last term: 16,158' in muted text and two stacked 7px bars (solid over hatched) scaled to the larger of the two - Grouped vertical bars: solid and hatched bar side by side per category with a delta pill floating above each pair - Dumbbell plot for benchmark metrics: hollow slate dot = previous, solid cobalt dot = current, joined by a 4px green (better) or red (worse) segment on a 2px grey track - Two-line trends: cobalt 3px solid line with a light area fill vs slate 2.5px dashed line for last year - Motif reuse outside dashboards: eyebrow marker = a solid+hatched mini pair, icon tiles half tint/half hatch, progress tracks hatched, stats underlined by a long solid bar over a shorter hatched one ## Design tokens — use these exact values Colours (light mode): - background #F6F7FB - surface #FFFFFF - surface-2 #EEF0F7 - text #161A2E - text-muted #565C78 - primary #2747D9 (text on it #FFFFFF) - secondary #FFB224 (text on it #161A2E) - accent #8C93B0 - border #DDE1EC - success #0F8A5F · warning #A86200 · danger #D2353A - chart series #2747D9, #A3AAC4, #0F8A5F, #FFB224, #D2353A Radius: sm 6px, md 10px, lg 14px, xl 18px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(22,26,46,0.06)`, md `0 4px 14px rgba(22,26,46,0.07)`, lg `0 18px 40px rgba(22,26,46,0.12)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 200ms cubic-bezier(.2,.7,.2,1) ## Typography (Latin + Thai) - Headings: Sora 600/700 with Thai fallback K2D 600/700 - Body: Inter 400/500/600 with Thai fallback Anuphan 400/500/600 - Mono: JetBrains Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Sora:wght@600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@500;600&family=K2D:wght@600;700&family=Anuphan:wght@400;500;600&display=swap - CSS stacks: heading `"Sora", "K2D", system-ui, sans-serif`; body `"Inter", "Anuphan", system-ui, sans-serif`; mono `"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Anuphan — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.75rem, 5.6vw, 4.5rem), heading weight 700, heading tracking -0.03em (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: K2D shares Sora’s geometric, slightly technical construction for headings; loopless Anuphan matches Inter’s open, neutral UI texture for labels and numbers. ## Components - Buttons: 44px, 10px radius; primary cobalt with a soft cobalt glow shadow; secondary white with 1px border that fills with slate hatching on hover; accent amber #FFB224 with dark text - Segmented control: pill track on #EEF0F7, selected segment solid cobalt with white text and a small cobalt shadow - Cards: white, 1px #DDE1EC border, 14px radius, 0 1px 2px shadow; card titles Sora 600 1rem; legends use square swatches (solid vs hatched) - Badges: pill; status badges tinted; neutral badge grey with a 1px border; solid badge amber - Inputs: 10px radius, focus = cobalt border + 4px 15% cobalt ring - Switch: off track hatched grey, on track solid cobalt - Tables: muted 0.75rem headers, an extra 'vs last term' column of delta pills; summary tables use A | B | Δ columns right-aligned with tabular figures - Mobile tab bar: plain bar, active icon sits in a 48×28 cobalt-tint pill; onboarding dots = one solid, one hatched ## 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: two columns — copy left, product visual right. Navigation: bar style. Sections in order: hero → logos → stats → features → showcase → testimonials → pricing → cta. Feature section as grid. Landing: split hero with a two-line (this year vs last year) product chart, a logo strip, stat figures each underlined by a solid/hatched bar pair, a 3-column feature grid with half-hatched icon tiles, a showcase, testimonials, pricing and a cobalt CTA band whose right half is white hatching. Dashboard: top navigation shell, page title, then the comparison lens bar, then a 4-up KPI row of paired values, then grouped bars (8) + dumbbell benchmark (4), then a two-line trend (8) + A/B/Δ summary table (4), then a full-width table with a delta column. ## Content Use realistic product copy (fictional brand) suited to: Term-over-term or year-over-year reporting. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Encode the comparison period as the same mark in a hatched or lighter variant, never a different hue family - Put a signed delta badge (▲ +5.2 pts / ▼ −18) next to every headline number - Lock both periods to the same axis and scale ## Don't - Don’t compare two different chart types — pair like with like - Don’t show a delta without saying what it is compared to - Don’t use more than two periods in one widget - Encoding the previous period in a different hue (e.g. orange vs blue) — it must be the same mark, hatched or lighter - Delta numbers without arrows, sign or the comparison label ('vs last term') - Single-series charts with no baseline — that is an executive or generic dashboard - Dark neon themes, glows or gradients on data — this is a calm reporting tool - Letter-spacing or uppercase on Thai labels ## Stack notes One self-contained HTML file with a