# Executive Dashboard > Four huge numbers, one trend line and a one-paragraph story on lots of warm white air — the dashboard you can read in five seconds. - Nickname: Boardroom view - Also called: C-suite dashboard, KPI summary, Board report dashboard - Category: Dashboards & Data - Moods: Luxury, Calm, Trustworthy, Serious - Industries: Corporate & B2B, SaaS, Fintech & Banking, Startup & Tech, Government & Nonprofit - Style page: https://uilingo.dev/styles/executive-dashboard/ Designed for leaders who glance, not analyse. The screen holds only what matters: three or four oversized KPIs set in an elegant serif with a quiet delta and a plain-language comparison, one trend chart with a thick ink line, and a short written summary. Everything else is removed — no sidebar, no search, no dense tables. Generous 40–56px padding, warm paper canvas, navy ink and a single brass accent give it the calm authority of a printed board report. ## Best for - CEO and board weekly snapshots - Investor and stakeholder updates - Company-wide TV/lobby screens - Monthly business reviews ## Avoid for - Analysts who need to slice and filter - Operational monitoring with live alerts - Screens that must show more than ~6 numbers ## Do - Limit the view to 3–4 KPIs and one chart - Set KPI values at 56–72px with a one-line comparison (“vs last quarter”) - Give cards 40px+ padding and 32px gaps - Write a two-sentence summary of what changed and why ## Don't - Don’t add tables, filters or a search bar - Don’t use more than one accent colour - Don’t show sparklines or gridlines that compete with the main trend ## 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 "Executive Dashboard" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Four huge numbers, one trend line and a one-paragraph story on lots of warm white air — the dashboard you can read in five seconds. Design keywords: few huge KPIs, one trend line, serif numerals, lots of whitespace, plain-language summary, no sidebar, navy ink and brass, board-report calm. ## Visual language A calm, printed-board-report feel: warm paper canvas (#F6F4EE), white cards with no borders and a whisper of shadow, navy ink (#131B2E) and a single brass accent (#B8862B). The screen holds very little — a two-sentence written summary, four oversized KPIs set in the Newsreader serif at 56–72px, one thick trend line and one quiet comparison — surrounded by 40–64px of air. Labels are tiny, uppercase and widely tracked; numbers are big and light. Nothing blinks, nothing is dense. ## Signature details (must be visible) - KPI values in Newsreader 400 at clamp(2.8rem, 4.6vw, 4.2rem) with -0.03em tracking, inside 240px-tall cards with 32–40px padding - Under each KPI: a 1px rule, then the delta (no icon) followed by a muted ‘vs last quarter’ - An executive summary block: brass 2px left rule, tiny brass uppercase label, then a 1.6–2rem serif paragraph with key metrics in bold and a soft brass highlighter underline - Exactly one trend chart: 3.5px navy line, dotted brass comparison line, no gridlines except the baseline, months labelled quarterly - No sidebar and no search: a thin top navigation with the active item underlined in brass - Cards: #FFFFFF, no border, 18px radius, shadow 0 14px 40px rgba(19,27,46,0.06) - Pill-shaped buttons; primary navy, secondary transparent with a thin ink outline - Page header ‘Overview’ in serif at ~3.4rem, light weight ## Design tokens — use these exact values Colours (light mode): - background #F6F4EE - surface #FFFFFF - surface-2 #EEEBE2 - text #131B2E - text-muted #5A6070 - primary #131B2E (text on it #FFFFFF) - secondary #9A6B1F (text on it #FFFFFF) - accent #B8862B - border #E3DFD4 - success #1E7A4F · warning #9A6200 · danger #B42318 - chart series #131B2E, #B8862B, #1E6B52, #8C93A3, #CFC8B6 Radius: sm 6px, md 10px, lg 18px, xl 26px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(19,27,46,0.04)`, md `0 14px 40px rgba(19,27,46,0.06)`, lg `0 30px 80px rgba(19,27,46,0.10)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.3 density Motion: 360ms cubic-bezier(.22,1,.36,1) ## Typography (Latin + Thai) - Headings: Newsreader 400/500/600 with Thai fallback Noto Serif Thai 400/500/600 - Body: Inter 400/500/600 with Thai fallback Noto Sans Thai 400/500/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600&family=Inter:wght@400;500;600&family=Noto+Serif+Thai:wght@400;500;600&family=Noto+Sans+Thai:wght@400;500;600&display=swap - CSS stacks: heading `"Newsreader", "Noto Serif Thai", system-ui, sans-serif`; body `"Inter", "Noto Sans Thai", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3rem, 6.4vw, 5.6rem), heading weight 500, heading tracking -0.02em (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: Noto Serif Thai carries the same calm, bookish stroke contrast as Newsreader for headlines, while Noto Sans Thai matches Inter’s neutral, open forms for labels and body. ## Components - Buttons: 999px pill, 500 weight, generous 24px side padding; primary navy, hover warms slightly toward brass; secondary outline turns white on hover - Cards: borderless white with a large soft shadow and 32px+ padding; hover only deepens the shadow - Inputs: 52px tall, 10px radius, white; focus = brass border + 4px brass 16% ring - Card titles: Inter 500, 0.78rem, uppercase, 0.14em tracking, muted - Badges: transparent with a 1px currentColor outline; solid badge is brass - Comparison bars: 6px tracks, navy current vs brass previous, value in serif on the right - Stats (landing): huge serif numbers (up to 5rem) under a 1px ink rule - Quotes and pull quotes: serif italic (Latin), preceded by a 48×2px brass bar - Segmented control: pill track in surface-2 with a navy pill for the selected item - Mobile tab bar: plain paper background, hairline top, active icon in brass ## 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: oversized flush-left headline on a wide column with a narrow supporting column. Navigation: minimal style. Sections in order: hero → logos → stats → features → testimonials → cta. Feature section as list. Landing: minimal transparent nav, editorial hero with a large serif headline and a few elegant product cards, a muted serif logo strip between hairlines, a stats row of huge serif numbers, a two-column hairline feature list (no boxes), italic serif testimonials and a navy CTA panel with a brass button. Sections are 100px+ apart. Dashboard: top navigation only, a centred 1280px column, an ‘Overview’ serif title, the written summary, four big KPI cards, then one trend chart (8 columns) beside one comparison (4 columns). Nothing else. ## Content Use realistic product copy (fictional brand) suited to: CEO and board weekly snapshots. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Limit the view to 3–4 KPIs and one chart - Set KPI values at 56–72px with a one-line comparison (“vs last quarter”) - Give cards 40px+ padding and 32px gaps - Write a two-sentence summary of what changed and why ## Don't - Don’t add tables, filters or a search bar - Don’t use more than one accent colour - Don’t show sparklines or gridlines that compete with the main trend - Tables, filters, search bars or more than ~6 numbers on one screen - Sparklines, dense gridlines or multiple charts competing with the one trend - Bright multi-colour palettes — only navy, brass and status colours - Small sans KPI values or tight 16px card padding (that is a generic or data-dense dashboard) - Dark glowing ops-room styling or live pulses ## Stack notes One self-contained HTML file with a