Data-Dense Dashboard

Also called: Dense BI, Terminal dashboard, Information-dense UI

Compact, hairline-gridded panels packed with small condensed type, tabular numbers, zebra tables and a sparkline on every figure.

“Trading desk”Dashboards & DataEra: 1990s terminals → 2020s BISeriousTechyTrustworthy

Open full screen ↗

data-dense-dashboard / landingEN

data-dense-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 sm2pxRadius md3pxRadius lg4pxRadius xl6pxDensity×0.85Display 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.

compact densitysmall condensed typetabular numeralssparklines everywherehairline panelszebra tablesmany widgets per screenpanel title stripsred/green deltas

Built for analysts who keep the screen open all day: a compact 0.85 density, 13–14px type, a condensed grotesque for labels and tabular mono numerals so columns line up. Panels butt together with 1px hairlines and 8px gutters instead of floating cards; each has a grey title strip with a tiny uppercase label. Every number carries context — a delta, a sparkline, a coloured up/down cue — and tables are zebra-striped with 28px rows. Colour is reserved for data and status.

Best for

Trading, treasury and portfolio monitoring
Ops and BI consoles used all day by experts
Admin back-offices with many KPIs per view
Risk and compliance reporting

Avoid for

Executive or board summaries
Consumer onboarding and marketing-first products
First-time or occasional users

✓ Do

Keep body text 13–14px and table rows 28–32px
Right-align numbers and use tabular figures (font-variant-numeric: tabular-nums)
Give every KPI a delta and a 12-point sparkline
Use 1px #CDD2DA hairlines and 8px gutters between panels, and a 44px white app top bar with a 56px navy icon rail

✕ Don't

Don’t add decorative illustrations or big hero imagery inside the app
Don’t use drop shadows on panels or radii above 4px on panels and controls (6px only for popovers)
Don’t let colour decorate — colour means data or status only

Not to be confused with

Enterprise SaaS →Enterprise SaaS is roomy navy B2B chrome with forms and approvals; Data-Dense packs 2–3× more figures per screen with condensed type and sparklines.Financial Dashboard →Financial Dashboard is a serious P&L/cash-flow report; Data-Dense is about the packing itself — tiny panels, zebra tables and sparklines for any domain.Executive Dashboard →Executive shows four huge numbers on lots of air; Data-Dense shows forty small ones edge to edge.

On mobile

Keep the compact type but raise touch targets to 44px; swap the panel grid for stacked full-width panels with title strips, show 2-up KPI tiles with sparklines, and use a flat hairline tab bar. Tables become two-line list rows with the number right-aligned.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinIBM Plex Sans Condensed · 500/600/700

The quick brown fox

Heading · ThaiIBM Plex Sans Thai · 500/600/700

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

Body · LatinIBM Plex Sans · 400/500/600

Clear words make shared decisions.

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

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

IBM Plex Sans Thai is drawn as part of the Plex family, so its loopless, slightly squared strokes and compact x-height sit exactly on the condensed Plex labels and Plex Mono figures.

Colour palette

Light

Dark

Design tokens

Radius	`sm 2px · md 3px · lg 4px · xl 6px · pill 3px`
Border	`1px`
Shadow	`none`
Display	`clamp(2.25rem, 4.6vw, 3.6rem)`
Motion	`90ms linear`
Density	`×0.85`

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 · Data-Dense Dashboard (data-dense-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=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap
 */
:root {
  --radius: 4px;
  --background: #E9ECF0;
  --foreground: #0B1220;
  --card: #FFFFFF;
  --card-foreground: #0B1220;
  --popover: #FFFFFF;
  --popover-foreground: #0B1220;
  --primary: #1F4FD8;
  --primary-foreground: #FFFFFF;
  --secondary: #0B1220;
  --secondary-foreground: #FFFFFF;
  --muted: #F4F6F8;
  --muted-foreground: #4A5465;
  --accent: #F4F6F8;
  --accent-foreground: #0B1220;
  --destructive: #C8281C;
  --border: #CDD2DA;
  --input: #CDD2DA;
  --ring: #1F4FD8;
  --chart-1: #1F4FD8;
  --chart-2: #0E9F9A;
  --chart-3: #E8A317;
  --chart-4: #7C3AED;
  --chart-5: #64748B;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #0B1220;
  --sidebar-primary: #1F4FD8;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F4F6F8;
  --sidebar-accent-foreground: #0B1220;
  --sidebar-border: #CDD2DA;
  --sidebar-ring: #1F4FD8;
}

.dark {
  --background: #07090D;
  --foreground: #E4E9F0;
  --card: #0E1219;
  --card-foreground: #E4E9F0;
  --popover: #0E1219;
  --popover-foreground: #E4E9F0;
  --primary: #5B8CFF;
  --primary-foreground: #07090D;
  --secondary: #E4E9F0;
  --secondary-foreground: #07090D;
  --muted: #141A23;
  --muted-foreground: #93A0B2;
  --accent: #141A23;
  --accent-foreground: #E4E9F0;
  --destructive: #FF5B4F;
  --border: #232C39;
  --input: #232C39;
  --ring: #5B8CFF;
  --chart-1: #5B8CFF;
  --chart-2: #2CC7C0;
  --chart-3: #F2B533;
  --chart-4: #A78BFA;
  --chart-5: #7D8AA0;
  --sidebar: #0E1219;
  --sidebar-foreground: #E4E9F0;
  --sidebar-primary: #5B8CFF;
  --sidebar-primary-foreground: #07090D;
  --sidebar-accent: #141A23;
  --sidebar-accent-foreground: #E4E9F0;
  --sidebar-border: #232C39;
  --sidebar-ring: #5B8CFF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Data-Dense Dashboard (data-dense-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=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap
 */
@theme {
  --color-bg: #E9ECF0;
  --color-surface: #FFFFFF;
  --color-surface-2: #F4F6F8;
  --color-text: #0B1220;
  --color-text-muted: #4A5465;
  --color-primary: #1F4FD8;
  --color-on-primary: #FFFFFF;
  --color-secondary: #0B1220;
  --color-on-secondary: #FFFFFF;
  --color-accent: #E8A317;
  --color-border: #CDD2DA;
  --color-success: #0E7C45;
  --color-warning: #A86500;
  --color-danger: #C8281C;
  --color-chart-1: #1F4FD8;
  --color-chart-2: #0E9F9A;
  --color-chart-3: #E8A317;
  --color-chart-4: #7C3AED;
  --color-chart-5: #64748B;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-xl: 6px;
  --radius-pill: 3px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 8px 24px rgba(11,18,32,0.12);
  --font-heading: "IBM Plex Sans Condensed", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai", monospace;
}

.dark {
  --color-bg: #07090D;
  --color-surface: #0E1219;
  --color-surface-2: #141A23;
  --color-text: #E4E9F0;
  --color-text-muted: #93A0B2;
  --color-primary: #5B8CFF;
  --color-on-primary: #07090D;
  --color-secondary: #E4E9F0;
  --color-on-secondary: #07090D;
  --color-accent: #F2B533;
  --color-border: #232C39;
  --color-success: #2FCB78;
  --color-warning: #F2B533;
  --color-danger: #FF5B4F;
  --color-chart-1: #5B8CFF;
  --color-chart-2: #2CC7C0;
  --color-chart-3: #F2B533;
  --color-chart-4: #A78BFA;
  --color-chart-5: #7D8AA0;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Data-Dense Dashboard (data-dense-dashboard). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.9255,
            0.9412
          ],
          "hex": "#e9ecf0"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9647,
            0.9725
          ],
          "hex": "#f4f6f8"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0706,
            0.1255
          ],
          "hex": "#0b1220"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.3294,
            0.3961
          ],
          "hex": "#4a5465"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.3098,
            0.8471
          ],
          "hex": "#1f4fd8"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0706,
            0.1255
          ],
          "hex": "#0b1220"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.6392,
            0.0902
          ],
          "hex": "#e8a317"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8039,
            0.8235,
            0.8549
          ],
          "hex": "#cdd2da"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.4863,
            0.2706
          ],
          "hex": "#0e7c45"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.3961,
            0
          ],
          "hex": "#a86500"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7843,
            0.1569,
            0.1098
          ],
          "hex": "#c8281c"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.3098,
            0.8471
          ],
          "hex": "#1f4fd8"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.6235,
            0.6039
          ],
          "hex": "#0e9f9a"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9098,
            0.6392,
            0.0902
          ],
          "hex": "#e8a317"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4863,
            0.2275,
            0.9294
          ],
          "hex": "#7c3aed"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3922,
            0.4549,
            0.5451
          ],
          "hex": "#64748b"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0275,
            0.0353,
            0.051
          ],
          "hex": "#07090d"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.0706,
            0.098
          ],
          "hex": "#0e1219"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.102,
            0.1373
          ],
          "hex": "#141a23"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8941,
            0.9137,
            0.9412
          ],
          "hex": "#e4e9f0"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5765,
            0.6275,
            0.698
          ],
          "hex": "#93a0b2"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.549,
            1
          ],
          "hex": "#5b8cff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0275,
            0.0353,
            0.051
          ],
          "hex": "#07090d"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8941,
            0.9137,
            0.9412
          ],
          "hex": "#e4e9f0"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0275,
            0.0353,
            0.051
          ],
          "hex": "#07090d"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7098,
            0.2
          ],
          "hex": "#f2b533"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1373,
            0.1725,
            0.2235
          ],
          "hex": "#232c39"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.7961,
            0.4706
          ],
          "hex": "#2fcb78"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7098,
            0.2
          ],
          "hex": "#f2b533"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3569,
            0.3098
          ],
          "hex": "#ff5b4f"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.549,
            1
          ],
          "hex": "#5b8cff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1725,
            0.7804,
            0.7529
          ],
          "hex": "#2cc7c0"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7098,
            0.2
          ],
          "hex": "#f2b533"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6549,
            0.5451,
            0.9804
          ],
          "hex": "#a78bfa"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4902,
            0.5412,
            0.6275
          ],
          "hex": "#7d8aa0"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 3,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 3,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0431,
              0.0706,
              0.1255
            ],
            "hex": "#0b1220",
            "alpha": 0.12
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 24,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Sans Condensed",
        "IBM Plex Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Sans",
        "IBM Plex Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "IBM Plex Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 90,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0,
      0,
      1,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 0.85
  }
}

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!