# Data-Dense Dashboard > Compact, hairline-gridded panels packed with small condensed type, tabular numbers, zebra tables and a sparkline on every figure. - Nickname: Trading desk - Also called: Dense BI, Terminal dashboard, Information-dense UI - Category: Dashboards & Data - Moods: Serious, Techy, Trustworthy - Industries: Fintech & Banking, SaaS, Corporate & B2B, Web3 & Crypto - Style page: https://uilingo.dev/styles/data-dense-dashboard/ 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 ## Audit Passed after 2 rounds · 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 "Data-Dense Dashboard" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Compact, hairline-gridded panels packed with small condensed type, tabular numbers, zebra tables and a sparkline on every figure. Design keywords: compact density, small condensed type, tabular numerals, sparklines everywhere, hairline panels, zebra tables, many widgets per screen, panel title strips, red/green deltas. ## Visual language A light, spreadsheet-calm analyst console where nothing is wasted: a cool grey canvas (#E9ECF0) with a faint 16px graph-paper grid, white panels that butt together with 1px #CDD2DA hairlines and 8px gutters, a navy (#0B1220) landing nav and app icon rail, and a slim white app top bar. Type is small and condensed — 14px root, IBM Plex Sans Condensed for uppercase panel labels, IBM Plex Mono with tabular figures for every number — so two to three times more figures fit than in a normal dashboard. Panels never have a shadow and panels/controls never round beyond 2px; colour appears only as data series and red/green/amber status. Every figure carries a delta chip and a sparkline. ## Signature details (must be visible) - Root font-size 14px on web (15px on mobile). rem is based on that 14px root, so the hero display is 31–50px; keep the landing headline at most 3 lines. Latin body text is 13px, Thai body text 14px; Latin panel labels 11–12px uppercase condensed with 0.07em tracking - In Thai, panel labels are IBM Plex Sans Thai 600 at 12px in text-muted, with no tracking and no uppercase. Short Latin codes inside labels (NAV, P&L, VaR, USD) stay IBM Plex Mono 500 uppercase at 11px with 0.07em tracking - Spacing: the 8px × 0.85 density unit is 6.8px — in practice use 4/8/12/16px steps; panel padding 10–12px; landing section padding 64px - Panels: #FFFFFF, 1px solid #CDD2DA, border-radius 2px, no shadow, 8px gaps between panels. Radius xl 6px is only for popovers and menus; panels, buttons and inputs use 2px. Shadow lg (0 8px 24px) is only for floating dropdowns and tooltips; panels never have a shadow - Panel title strip: full-bleed 32px header in #F4F6F8 with a 1px bottom hairline, uppercase condensed title on the left, tiny legend or badge on the right - All numbers in IBM Plex Mono 500 with font-variant-numeric: tabular-nums; numeric table columns right-aligned - Every KPI tile = label + mono value (~22px) + tinted delta chip (green/red at 12% alpha) + a sparkline filling ~60% of the tile width. Sparklines are inline SVG with a 1.5px stroke, no fill and 12 points - Zebra tables: 28px rows, 5px 10px cell padding, even rows #F4F6F8, header row filled grey, hover row tinted primary at 7% - Navy #0B1220 landing nav (48px) and app icon rail (56px), with the active rail item as a solid #1F4FD8 square. The app top bar is a slim 44px white bar with a hairline bottom - Square status markers (6px squares, border-radius 1px) instead of round dots, inside 2px-radius mono badges — including the ‘Live’ badge - Accent amber #E8A317 is the CTA-panel button fill (with #0B1220 text) and the third chart series. Nowhere else ## Design tokens — use these exact values Colours (light mode): - background #E9ECF0 - surface #FFFFFF - surface-2 #F4F6F8 - text #0B1220 - text-muted #4A5465 - primary #1F4FD8 (text on it #FFFFFF) - secondary #0B1220 (text on it #FFFFFF) - accent #E8A317 - border #CDD2DA - success #0E7C45 · warning #A86500 · danger #C8281C - chart series #1F4FD8, #0E9F9A, #E8A317, #7C3AED, #64748B Radius: sm 2px, md 3px, lg 4px, xl 6px, pill 3px Border width: 1px Shadows: sm `none`, md `none`, lg `0 8px 24px rgba(11,18,32,0.12)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.85 density Motion: 90ms linear ## Typography (Latin + Thai) - Headings: IBM Plex Sans Condensed 500/600/700 with Thai fallback IBM Plex Sans Thai 500/600/700 - Body: IBM Plex Sans 400/500/600 with Thai fallback IBM Plex Sans Thai 400/500/600 - Mono: IBM Plex Mono - Google Fonts URL: 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 - CSS stacks: heading `"IBM Plex Sans Condensed", "IBM Plex Sans Thai", system-ui, sans-serif`; body `"IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif`; mono `"IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to IBM Plex Sans Thai — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.25rem, 4.6vw, 3.6rem), heading weight 600, heading tracking -0.01em (Latin only), uppercase small labels (Latin only). - 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: 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. ## Components - Buttons: 34px tall (28px small), 2px radius, 500 weight; primary #1F4FD8 darkens 14% on hover, no lift; secondary white with hairline border - Inputs: 34px tall, 2px radius, 1px hairline; focus = 1px primary border plus a 1px primary ring, no glow - Tabs: folder tabs — selected tab is a white box with hairline sides and a 2px primary top edge - Segmented control and active chips: solid navy fill with white text, 2px radius - Badges: mono 11px, 2px radius, a 6px square marker in currentColor before the label - Charts: 1.6px lines with butt caps, solid (non-dashed) faint gridlines, dashed comparison series, 1px gaps in heatmaps, square bars with no radius - Status list: rows separated by dashed hairlines, label left, mono value right-aligned - Switch: 34×18px square track with a square knob - Popovers and menus: 6px radius, 1px hairline, shadow 0 8px 24px rgba(11,18,32,0.12) — the only floating, shadowed surfaces - Landing stats: one bordered strip of cells divided by hairlines, each a mono figure with a mini sparkline underneath - FAQ: hairline-separated rows (no cards); each question ends in a mono ‘+’ that turns into ‘−’ when open - Mobile tab bar: flat white bar with hairline top; active item gets a 2px primary bar on top ## 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 → trust → pricing → faq → cta. Feature section as list. Landing pages keep the console feel: navy 48px nav bar; split hero with a compact headline (max 3 lines) and a product shot framed in a grey tray of panels — a mini 40px navy rail strip down the left of the tray, a line-chart panel and at least four KPI cells with mono figures and sparklines; a logo strip in uppercase mono; a single bordered stat strip with sparklines; section heads left-aligned with a 20–22px heading and the sub-copy right-aligned on the same baseline (no centred marketing heads); features as a 2-column hairline list (not floating cards); a showcase of folder tabs over a zebra-table panel plus a bars panel; a trust section of 3 bordered panels with title strips that list certifications as label / mono-value rows; a hairline FAQ; and a navy CTA panel with sparkline art and the amber button. Section padding is 64px, not 96px+. The dashboard uses a 56px navy icon rail, a slim 44px white top bar with a hairline bottom, 12px page padding and as many panels as fit: KPI row, line + status, table + bars, heatmap + donut, forecast + compare. ## Content Use realistic product copy (fictional brand) suited to: Trading, treasury and portfolio monitoring. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Roomy cards with 24px+ padding, large radii or drop shadows on panels (that is a generic SaaS dashboard) - Big hero numbers or a few KPIs on lots of whitespace (that is the Executive Dashboard) - Decorative gradients, illustrations or colour used for anything but data and status — including amber outside the CTA button and series 3 - Proportional, non-tabular figures or left-aligned numeric columns - Round status dots, centred marketing section heads or a navy app top bar - Dark neon glow or terminal green-on-black (that is Terminal or HUD, not this) ## Stack notes One self-contained HTML file with a