Drill-Down Analytics

Also called: Hierarchical analytics, Explorer dashboard, Master–detail analytics

Breadcrumbed hierarchy, removable filter chips and expandable rows: start at the total, click a funnel step and dig down to the table that explains it.

“Click to dig”Dashboards & DataEra: 2010s BI → todayTechyTrustworthyCalm

Open full screen ↗

drill-down-analytics / landingEN

drill-down-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 sm6pxRadius md8pxRadius lg12pxRadius xl16pxDensity×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.

breadcrumb trailfilter chips with ×expandable rowstree table with guide linesfunnel to tableselected segment outlinelevel tags L1 / L2 / L3master–detail

An exploratory analytics layout built around one gesture — click to go one level deeper. A breadcrumb trail (All stores › Bangkok › Ceramics) always shows where you are, removable filter chips show what is applied, and the page flows from a summary funnel or bar into a tree table whose rows expand to reveal children on indented guide lines. The selected segment is outlined in indigo and every level carries a small L1/L2/L3 depth tag. Cool, clean surfaces keep focus on the path.

Best for

Sales by region → store → product exploration
Marketing attribution and campaign break-downs
Inventory and catalogue analytics
Support or ops metrics with many dimensions

Avoid for

Single-glance executive screens
Live monitoring walls
Mobile-first consumer apps with shallow data

✓ Do

Always show a breadcrumb with each level clickable
Make every applied filter a removable chip and offer “Clear all”
Indent child rows ~50px with a 1px guide line and elbow, and a rotating chevron on the parent
Outline the drilled segment (2px primary) so the path stays visible

✕ Don't

Don’t open drill-downs in modals that hide the context
Don’t go deeper than 3–4 levels on one screen
Don’t reset filters silently when the level changes

Not to be confused with

Comparative Analysis Dashboard →Comparative puts periods side by side with delta badges; Drill-Down goes vertically through levels with breadcrumbs and expandable rows.User Behavior Analytics →User Behavior tracks people through funnels, cohorts and journeys; Drill-Down slices any metric through a dimension hierarchy.Data-Dense Dashboard →Data-Dense shows everything at once in small panels; Drill-Down shows one level at a time and reveals detail on click.

On mobile

Turn the breadcrumb into a back-chevron app bar with the parent level as a small caption, keep filters as a horizontally scrolling chip row, and replace expandable rows with tap-through list items that push the next level. Never nest more than two levels on one phone screen.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinManrope · 600/700/800

The quick brown fox

Heading · ThaiPrompt · 500/600/700

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

Body · LatinManrope · 400/500/600

Clear words make shared decisions.

Body · ThaiAnuphan · 400/500/600

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

Prompt’s clean geometric loopless shapes match Manrope’s modern grotesque headings, and Anuphan keeps the same friendly, open proportions for body text and table cells.

Colour palette

Light

Dark

Design tokens

Radius	`sm 6px · md 8px · lg 12px · xl 16px · pill 999px`
Border	`1px`
Shadow	`0 6px 18px rgba(22,26,46,0.08)`
Display	`clamp(2.6rem, 5.6vw, 4.6rem)`
Motion	`200ms cubic-bezier(.2,.8,.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 · Drill-Down Analytics (drill-down-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=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500&family=Prompt:wght@500;600;700&family=Anuphan:wght@400;500;600&display=swap
 */
:root {
  --radius: 12px;
  --background: #F5F6FA;
  --foreground: #161A2E;
  --card: #FFFFFF;
  --card-foreground: #161A2E;
  --popover: #FFFFFF;
  --popover-foreground: #161A2E;
  --primary: #4F46E5;
  --primary-foreground: #FFFFFF;
  --secondary: #E0E3FF;
  --secondary-foreground: #2E2A8A;
  --muted: #EEF0F7;
  --muted-foreground: #565C78;
  --accent: #EEF0F7;
  --accent-foreground: #161A2E;
  --destructive: #D92D20;
  --border: #DDE1EC;
  --input: #DDE1EC;
  --ring: #4F46E5;
  --chart-1: #4F46E5;
  --chart-2: #0891B2;
  --chart-3: #A855F7;
  --chart-4: #F59E0B;
  --chart-5: #94A3B8;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #161A2E;
  --sidebar-primary: #4F46E5;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #EEF0F7;
  --sidebar-accent-foreground: #161A2E;
  --sidebar-border: #DDE1EC;
  --sidebar-ring: #4F46E5;
}

.dark {
  --background: #0E1020;
  --foreground: #ECEEFF;
  --card: #161935;
  --card-foreground: #ECEEFF;
  --popover: #161935;
  --popover-foreground: #ECEEFF;
  --primary: #8B85FF;
  --primary-foreground: #0E1020;
  --secondary: #2B2F63;
  --secondary-foreground: #E0E3FF;
  --muted: #1E2244;
  --muted-foreground: #A3A8C8;
  --accent: #1E2244;
  --accent-foreground: #ECEEFF;
  --destructive: #FB7185;
  --border: #2C3160;
  --input: #2C3160;
  --ring: #8B85FF;
  --chart-1: #8B85FF;
  --chart-2: #22D3EE;
  --chart-3: #C084FC;
  --chart-4: #FBBF24;
  --chart-5: #7C84A8;
  --sidebar: #161935;
  --sidebar-foreground: #ECEEFF;
  --sidebar-primary: #8B85FF;
  --sidebar-primary-foreground: #0E1020;
  --sidebar-accent: #1E2244;
  --sidebar-accent-foreground: #ECEEFF;
  --sidebar-border: #2C3160;
  --sidebar-ring: #8B85FF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Drill-Down Analytics (drill-down-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=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500&family=Prompt:wght@500;600;700&family=Anuphan:wght@400;500;600&display=swap
 */
@theme {
  --color-bg: #F5F6FA;
  --color-surface: #FFFFFF;
  --color-surface-2: #EEF0F7;
  --color-text: #161A2E;
  --color-text-muted: #565C78;
  --color-primary: #4F46E5;
  --color-on-primary: #FFFFFF;
  --color-secondary: #E0E3FF;
  --color-on-secondary: #2E2A8A;
  --color-accent: #0891B2;
  --color-border: #DDE1EC;
  --color-success: #12805C;
  --color-warning: #B25E09;
  --color-danger: #D92D20;
  --color-chart-1: #4F46E5;
  --color-chart-2: #0891B2;
  --color-chart-3: #A855F7;
  --color-chart-4: #F59E0B;
  --color-chart-5: #94A3B8;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(22,26,46,0.06);
  --shadow-md: 0 6px 18px rgba(22,26,46,0.08);
  --shadow-lg: 0 18px 44px rgba(22,26,46,0.14);
  --font-heading: "Manrope", "Prompt", system-ui, sans-serif;
  --font-body: "Manrope", "Anuphan", system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #0E1020;
  --color-surface: #161935;
  --color-surface-2: #1E2244;
  --color-text: #ECEEFF;
  --color-text-muted: #A3A8C8;
  --color-primary: #8B85FF;
  --color-on-primary: #0E1020;
  --color-secondary: #2B2F63;
  --color-on-secondary: #E0E3FF;
  --color-accent: #22D3EE;
  --color-border: #2C3160;
  --color-success: #34D399;
  --color-warning: #FBBF24;
  --color-danger: #FB7185;
  --color-chart-1: #8B85FF;
  --color-chart-2: #22D3EE;
  --color-chart-3: #C084FC;
  --color-chart-4: #FBBF24;
  --color-chart-5: #7C84A8;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Drill-Down Analytics (drill-down-analytics). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500&family=Prompt:wght@500;600;700&family=Anuphan:wght@400;500;600&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.9647,
            0.9804
          ],
          "hex": "#f5f6fa"
        }
      },
      "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.3098,
            0.2745,
            0.898
          ],
          "hex": "#4f46e5"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.8902,
            1
          ],
          "hex": "#e0e3ff"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.1647,
            0.5412
          ],
          "hex": "#2e2a8a"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0314,
            0.5686,
            0.698
          ],
          "hex": "#0891b2"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8667,
            0.8824,
            0.9255
          ],
          "hex": "#dde1ec"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.502,
            0.3608
          ],
          "hex": "#12805c"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.698,
            0.3686,
            0.0353
          ],
          "hex": "#b25e09"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.1765,
            0.1255
          ],
          "hex": "#d92d20"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3098,
            0.2745,
            0.898
          ],
          "hex": "#4f46e5"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0314,
            0.5686,
            0.698
          ],
          "hex": "#0891b2"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.3333,
            0.9686
          ],
          "hex": "#a855f7"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.6196,
            0.0431
          ],
          "hex": "#f59e0b"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5804,
            0.6392,
            0.7216
          ],
          "hex": "#94a3b8"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.0627,
            0.1255
          ],
          "hex": "#0e1020"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.098,
            0.2078
          ],
          "hex": "#161935"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.1333,
            0.2667
          ],
          "hex": "#1e2244"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9255,
            0.9333,
            1
          ],
          "hex": "#eceeff"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.6588,
            0.7843
          ],
          "hex": "#a3a8c8"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5451,
            0.5216,
            1
          ],
          "hex": "#8b85ff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.0627,
            0.1255
          ],
          "hex": "#0e1020"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.1843,
            0.3882
          ],
          "hex": "#2b2f63"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.8902,
            1
          ],
          "hex": "#e0e3ff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1333,
            0.8275,
            0.9333
          ],
          "hex": "#22d3ee"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1725,
            0.1922,
            0.3765
          ],
          "hex": "#2c3160"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2039,
            0.8275,
            0.6
          ],
          "hex": "#34d399"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.749,
            0.1412
          ],
          "hex": "#fbbf24"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.4431,
            0.5216
          ],
          "hex": "#fb7185"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5451,
            0.5216,
            1
          ],
          "hex": "#8b85ff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1333,
            0.8275,
            0.9333
          ],
          "hex": "#22d3ee"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7529,
            0.5176,
            0.9882
          ],
          "hex": "#c084fc"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.749,
            0.1412
          ],
          "hex": "#fbbf24"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4863,
            0.5176,
            0.6588
          ],
          "hex": "#7c84a8"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "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.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 6,
            "unit": "px"
          },
          "blur": {
            "value": 18,
            "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.14
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 18,
            "unit": "px"
          },
          "blur": {
            "value": 44,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Manrope",
        "Prompt",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Manrope",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Roboto 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.8,
      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: 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!