Comparative Analysis Dashboard

Also called: Period-over-period dashboard, Benchmark dashboard, Side-by-side comparison view

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.

“This vs that”Dashboards & DataEra: 2010s → todayTrustworthyCalmTechy

Open full screen ↗

comparative-analysis-dashboard / landingEN

comparative-analysis-dashboard / 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 sm6pxRadius md10pxRadius lg14pxRadius xl18pxDensity×1Display 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.

period over periodside-by-side barshatched previous perioddelta badges ▲▼A vs B lensdumbbell chartgrouped barsbenchmark against last term

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

Not to be confused with

Executive Dashboard →Executive shows a few big standalone KPIs; Comparative draws every metric as a pair (solid vs hatched) with delta badges and a period lens.Drill-Down Analytics →Drill-down moves vertically through a hierarchy with breadcrumbs; Comparative stays on one level and sets two periods side by side.Financial Dashboard →Financial is a navy P&L statement with accounting formatting; Comparative is cobalt-and-hatching charts with ▲▼ pill badges.

On mobile

Keep the A vs B period chip pinned under the app bar; show each metric as a card with the current value, the previous value in muted text and a delta pill. Paired bars become two thin stacked bars (solid over hatched) that fit a 350px width.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinSora · 600/700

The quick brown fox

Heading · ThaiK2D · 600/700

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

Body · LatinInter · 400/500/600

Clear words make shared decisions.

Body · ThaiAnuphan · 400/500/600

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

K2D shares Sora’s geometric, slightly technical construction for headings; loopless Anuphan matches Inter’s open, neutral UI texture for labels and numbers.

Colour palette

Light

Dark

Design tokens

Radius	`sm 6px · md 10px · lg 14px · xl 18px · pill 999px`
Border	`1px`
Shadow	`0 4px 14px rgba(22,26,46,0.07)`
Display	`clamp(2.75rem, 5.6vw, 4.5rem)`
Motion	`200ms cubic-bezier(.2,.7,.2,1)`
Density	`×1`

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 · Comparative Analysis Dashboard (comparative-analysis-dashboard) — 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=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
 */
:root {
  --radius: 14px;
  --background: #F6F7FB;
  --foreground: #161A2E;
  --card: #FFFFFF;
  --card-foreground: #161A2E;
  --popover: #FFFFFF;
  --popover-foreground: #161A2E;
  --primary: #2747D9;
  --primary-foreground: #FFFFFF;
  --secondary: #FFB224;
  --secondary-foreground: #161A2E;
  --muted: #EEF0F7;
  --muted-foreground: #565C78;
  --accent: #EEF0F7;
  --accent-foreground: #161A2E;
  --destructive: #D2353A;
  --border: #DDE1EC;
  --input: #DDE1EC;
  --ring: #2747D9;
  --chart-1: #2747D9;
  --chart-2: #A3AAC4;
  --chart-3: #0F8A5F;
  --chart-4: #FFB224;
  --chart-5: #D2353A;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #161A2E;
  --sidebar-primary: #2747D9;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #EEF0F7;
  --sidebar-accent-foreground: #161A2E;
  --sidebar-border: #DDE1EC;
  --sidebar-ring: #2747D9;
}

.dark {
  --background: #0D1020;
  --foreground: #EEF0FA;
  --card: #151A2E;
  --card-foreground: #EEF0FA;
  --popover: #151A2E;
  --popover-foreground: #EEF0FA;
  --primary: #7690FF;
  --primary-foreground: #0D1020;
  --secondary: #FFC14D;
  --secondary-foreground: #0D1020;
  --muted: #1C2238;
  --muted-foreground: #A1A8C3;
  --accent: #1C2238;
  --accent-foreground: #EEF0FA;
  --destructive: #FF6B70;
  --border: #2A3150;
  --input: #2A3150;
  --ring: #7690FF;
  --chart-1: #7690FF;
  --chart-2: #6A7194;
  --chart-3: #34C88F;
  --chart-4: #FFC14D;
  --chart-5: #FF6B70;
  --sidebar: #151A2E;
  --sidebar-foreground: #EEF0FA;
  --sidebar-primary: #7690FF;
  --sidebar-primary-foreground: #0D1020;
  --sidebar-accent: #1C2238;
  --sidebar-accent-foreground: #EEF0FA;
  --sidebar-border: #2A3150;
  --sidebar-ring: #7690FF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Comparative Analysis Dashboard (comparative-analysis-dashboard) — 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=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
 */
@theme {
  --color-bg: #F6F7FB;
  --color-surface: #FFFFFF;
  --color-surface-2: #EEF0F7;
  --color-text: #161A2E;
  --color-text-muted: #565C78;
  --color-primary: #2747D9;
  --color-on-primary: #FFFFFF;
  --color-secondary: #FFB224;
  --color-on-secondary: #161A2E;
  --color-accent: #8C93B0;
  --color-border: #DDE1EC;
  --color-success: #0F8A5F;
  --color-warning: #A86200;
  --color-danger: #D2353A;
  --color-chart-1: #2747D9;
  --color-chart-2: #A3AAC4;
  --color-chart-3: #0F8A5F;
  --color-chart-4: #FFB224;
  --color-chart-5: #D2353A;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(22,26,46,0.06);
  --shadow-md: 0 4px 14px rgba(22,26,46,0.07);
  --shadow-lg: 0 18px 40px rgba(22,26,46,0.12);
  --font-heading: "Sora", "K2D", system-ui, sans-serif;
  --font-body: "Inter", "Anuphan", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #0D1020;
  --color-surface: #151A2E;
  --color-surface-2: #1C2238;
  --color-text: #EEF0FA;
  --color-text-muted: #A1A8C3;
  --color-primary: #7690FF;
  --color-on-primary: #0D1020;
  --color-secondary: #FFC14D;
  --color-on-secondary: #0D1020;
  --color-accent: #6A7194;
  --color-border: #2A3150;
  --color-success: #34C88F;
  --color-warning: #F0B13D;
  --color-danger: #FF6B70;
  --color-chart-1: #7690FF;
  --color-chart-2: #6A7194;
  --color-chart-3: #34C88F;
  --color-chart-4: #FFC14D;
  --color-chart-5: #FF6B70;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Comparative Analysis Dashboard (comparative-analysis-dashboard). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9686,
            0.9843
          ],
          "hex": "#f6f7fb"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.9412,
            0.9686
          ],
          "hex": "#eef0f7"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.102,
            0.1804
          ],
          "hex": "#161a2e"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3373,
            0.3608,
            0.4706
          ],
          "hex": "#565c78"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1529,
            0.2784,
            0.851
          ],
          "hex": "#2747d9"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.698,
            0.1412
          ],
          "hex": "#ffb224"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.102,
            0.1804
          ],
          "hex": "#161a2e"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.549,
            0.5765,
            0.6902
          ],
          "hex": "#8c93b0"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8667,
            0.8824,
            0.9255
          ],
          "hex": "#dde1ec"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.5412,
            0.3725
          ],
          "hex": "#0f8a5f"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.3843,
            0
          ],
          "hex": "#a86200"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8235,
            0.2078,
            0.2275
          ],
          "hex": "#d2353a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1529,
            0.2784,
            0.851
          ],
          "hex": "#2747d9"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.6667,
            0.7686
          ],
          "hex": "#a3aac4"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.5412,
            0.3725
          ],
          "hex": "#0f8a5f"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.698,
            0.1412
          ],
          "hex": "#ffb224"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8235,
            0.2078,
            0.2275
          ],
          "hex": "#d2353a"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.051,
            0.0627,
            0.1255
          ],
          "hex": "#0d1020"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0824,
            0.102,
            0.1804
          ],
          "hex": "#151a2e"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.1333,
            0.2196
          ],
          "hex": "#1c2238"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.9412,
            0.9804
          ],
          "hex": "#eef0fa"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6314,
            0.6588,
            0.7647
          ],
          "hex": "#a1a8c3"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4627,
            0.5647,
            1
          ],
          "hex": "#7690ff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.051,
            0.0627,
            0.1255
          ],
          "hex": "#0d1020"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7569,
            0.302
          ],
          "hex": "#ffc14d"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.051,
            0.0627,
            0.1255
          ],
          "hex": "#0d1020"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4157,
            0.4431,
            0.5804
          ],
          "hex": "#6a7194"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1922,
            0.3137
          ],
          "hex": "#2a3150"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2039,
            0.7843,
            0.5608
          ],
          "hex": "#34c88f"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.6941,
            0.2392
          ],
          "hex": "#f0b13d"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.4392
          ],
          "hex": "#ff6b70"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4627,
            0.5647,
            1
          ],
          "hex": "#7690ff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4157,
            0.4431,
            0.5804
          ],
          "hex": "#6a7194"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2039,
            0.7843,
            0.5608
          ],
          "hex": "#34c88f"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7569,
            0.302
          ],
          "hex": "#ffc14d"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.4392
          ],
          "hex": "#ff6b70"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "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.0863,
              0.102,
              0.1804
            ],
            "hex": "#161a2e",
            "alpha": 0.06
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0863,
              0.102,
              0.1804
            ],
            "hex": "#161a2e",
            "alpha": 0.07
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 4,
            "unit": "px"
          },
          "blur": {
            "value": 14,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0863,
              0.102,
              0.1804
            ],
            "hex": "#161a2e",
            "alpha": 0.12
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 18,
            "unit": "px"
          },
          "blur": {
            "value": 40,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Sora",
        "K2D",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "JetBrains Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 200,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.7,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

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

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
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!