Executive Dashboard

Also called: C-suite dashboard, KPI summary, Board report 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.

“Boardroom view”Dashboards & DataEra: 2010s → todayLuxuryCalmTrustworthySerious

Open full screen ↗

executive-dashboard / landingEN

executive-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 lg18pxRadius xl26pxDensity×1.3Display 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.

few huge KPIsone trend lineserif numeralslots of whitespaceplain-language summaryno sidebarnavy ink and brassboard-report calm

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

Not to be confused with

Data-Dense Dashboard →Data-Dense packs forty small figures edge to edge; Executive shows four huge serif numbers floating on air.Minimal & Direct →Minimal & Direct is a sparse marketing landing page; Executive is a sparse logged-in KPI report with a trend chart.Financial Dashboard →Financial Dashboard details P&L lines and cash flow with red/green tables; Executive summarises the whole business in a few headline numbers.

On mobile

One KPI per row at 44–52px serif, a single full-width trend card and a two-line summary; hide secondary lists behind “See details”. Keep the tab bar plain and roomy and let whitespace, not dividers, separate content.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinNewsreader · 400/500/600

The quick brown fox

Heading · ThaiNoto Serif Thai · 400/500/600

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

Body · LatinInter · 400/500/600

Clear words make shared decisions.

Body · ThaiNoto Sans Thai · 400/500/600

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

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 6px · md 10px · lg 18px · xl 26px · pill 999px`
Border	`1px`
Shadow	`0 14px 40px rgba(19,27,46,0.06)`
Display	`clamp(3rem, 6.4vw, 5.6rem)`
Motion	`360ms cubic-bezier(.22,1,.36,1)`
Density	`×1.3`

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 · Executive Dashboard (executive-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=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
 */
:root {
  --radius: 18px;
  --background: #F6F4EE;
  --foreground: #131B2E;
  --card: #FFFFFF;
  --card-foreground: #131B2E;
  --popover: #FFFFFF;
  --popover-foreground: #131B2E;
  --primary: #131B2E;
  --primary-foreground: #FFFFFF;
  --secondary: #9A6B1F;
  --secondary-foreground: #FFFFFF;
  --muted: #EEEBE2;
  --muted-foreground: #5A6070;
  --accent: #EEEBE2;
  --accent-foreground: #131B2E;
  --destructive: #B42318;
  --border: #E3DFD4;
  --input: #E3DFD4;
  --ring: #131B2E;
  --chart-1: #131B2E;
  --chart-2: #B8862B;
  --chart-3: #1E6B52;
  --chart-4: #8C93A3;
  --chart-5: #CFC8B6;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #131B2E;
  --sidebar-primary: #131B2E;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #EEEBE2;
  --sidebar-accent-foreground: #131B2E;
  --sidebar-border: #E3DFD4;
  --sidebar-ring: #131B2E;
}

.dark {
  --background: #0F1420;
  --foreground: #F3EFE6;
  --card: #161C2B;
  --card-foreground: #F3EFE6;
  --popover: #161C2B;
  --popover-foreground: #F3EFE6;
  --primary: #E9D9B5;
  --primary-foreground: #0F1420;
  --secondary: #D4A64F;
  --secondary-foreground: #0F1420;
  --muted: #1D2436;
  --muted-foreground: #A9AEBB;
  --accent: #1D2436;
  --accent-foreground: #F3EFE6;
  --destructive: #F07067;
  --border: #2A3247;
  --input: #2A3247;
  --ring: #E9D9B5;
  --chart-1: #F3EFE6;
  --chart-2: #D4A64F;
  --chart-3: #5CC48A;
  --chart-4: #7D859A;
  --chart-5: #4A5268;
  --sidebar: #161C2B;
  --sidebar-foreground: #F3EFE6;
  --sidebar-primary: #E9D9B5;
  --sidebar-primary-foreground: #0F1420;
  --sidebar-accent: #1D2436;
  --sidebar-accent-foreground: #F3EFE6;
  --sidebar-border: #2A3247;
  --sidebar-ring: #E9D9B5;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Executive Dashboard (executive-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=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
 */
@theme {
  --color-bg: #F6F4EE;
  --color-surface: #FFFFFF;
  --color-surface-2: #EEEBE2;
  --color-text: #131B2E;
  --color-text-muted: #5A6070;
  --color-primary: #131B2E;
  --color-on-primary: #FFFFFF;
  --color-secondary: #9A6B1F;
  --color-on-secondary: #FFFFFF;
  --color-accent: #B8862B;
  --color-border: #E3DFD4;
  --color-success: #1E7A4F;
  --color-warning: #9A6200;
  --color-danger: #B42318;
  --color-chart-1: #131B2E;
  --color-chart-2: #B8862B;
  --color-chart-3: #1E6B52;
  --color-chart-4: #8C93A3;
  --color-chart-5: #CFC8B6;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-xl: 26px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(19,27,46,0.04);
  --shadow-md: 0 14px 40px rgba(19,27,46,0.06);
  --shadow-lg: 0 30px 80px rgba(19,27,46,0.10);
  --font-heading: "Newsreader", "Noto Serif Thai", system-ui, sans-serif;
  --font-body: "Inter", "Noto Sans Thai", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Noto Sans Thai", monospace;
}

.dark {
  --color-bg: #0F1420;
  --color-surface: #161C2B;
  --color-surface-2: #1D2436;
  --color-text: #F3EFE6;
  --color-text-muted: #A9AEBB;
  --color-primary: #E9D9B5;
  --color-on-primary: #0F1420;
  --color-secondary: #D4A64F;
  --color-on-secondary: #0F1420;
  --color-accent: #D4A64F;
  --color-border: #2A3247;
  --color-success: #5CC48A;
  --color-warning: #E0A94A;
  --color-danger: #F07067;
  --color-chart-1: #F3EFE6;
  --color-chart-2: #D4A64F;
  --color-chart-3: #5CC48A;
  --color-chart-4: #7D859A;
  --color-chart-5: #4A5268;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Executive Dashboard (executive-dashboard). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9569,
            0.9333
          ],
          "hex": "#f6f4ee"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.9216,
            0.8863
          ],
          "hex": "#eeebe2"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0745,
            0.1059,
            0.1804
          ],
          "hex": "#131b2e"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3529,
            0.3765,
            0.4392
          ],
          "hex": "#5a6070"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0745,
            0.1059,
            0.1804
          ],
          "hex": "#131b2e"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.4196,
            0.1216
          ],
          "hex": "#9a6b1f"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.5255,
            0.1686
          ],
          "hex": "#b8862b"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8902,
            0.8745,
            0.8314
          ],
          "hex": "#e3dfd4"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.4784,
            0.3098
          ],
          "hex": "#1e7a4f"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.3843,
            0
          ],
          "hex": "#9a6200"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.1373,
            0.0941
          ],
          "hex": "#b42318"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0745,
            0.1059,
            0.1804
          ],
          "hex": "#131b2e"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.5255,
            0.1686
          ],
          "hex": "#b8862b"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.4196,
            0.3216
          ],
          "hex": "#1e6b52"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.549,
            0.5765,
            0.6392
          ],
          "hex": "#8c93a3"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8118,
            0.7843,
            0.7137
          ],
          "hex": "#cfc8b6"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.0784,
            0.1255
          ],
          "hex": "#0f1420"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.1098,
            0.1686
          ],
          "hex": "#161c2b"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1137,
            0.1412,
            0.2118
          ],
          "hex": "#1d2436"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9373,
            0.902
          ],
          "hex": "#f3efe6"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6627,
            0.6824,
            0.7333
          ],
          "hex": "#a9aebb"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9137,
            0.851,
            0.7098
          ],
          "hex": "#e9d9b5"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.0784,
            0.1255
          ],
          "hex": "#0f1420"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8314,
            0.651,
            0.3098
          ],
          "hex": "#d4a64f"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0588,
            0.0784,
            0.1255
          ],
          "hex": "#0f1420"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8314,
            0.651,
            0.3098
          ],
          "hex": "#d4a64f"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1961,
            0.2784
          ],
          "hex": "#2a3247"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3608,
            0.7686,
            0.5412
          ],
          "hex": "#5cc48a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.6627,
            0.2902
          ],
          "hex": "#e0a94a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.4392,
            0.4039
          ],
          "hex": "#f07067"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9373,
            0.902
          ],
          "hex": "#f3efe6"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8314,
            0.651,
            0.3098
          ],
          "hex": "#d4a64f"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3608,
            0.7686,
            0.5412
          ],
          "hex": "#5cc48a"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4902,
            0.5216,
            0.6039
          ],
          "hex": "#7d859a"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.3216,
            0.4078
          ],
          "hex": "#4a5268"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 18,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 26,
        "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.0745,
              0.1059,
              0.1804
            ],
            "hex": "#131b2e",
            "alpha": 0.04
          },
          "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.0745,
              0.1059,
              0.1804
            ],
            "hex": "#131b2e",
            "alpha": 0.06
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 14,
            "unit": "px"
          },
          "blur": {
            "value": 40,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0745,
              0.1059,
              0.1804
            ],
            "hex": "#131b2e",
            "alpha": 0.1
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 30,
            "unit": "px"
          },
          "blur": {
            "value": 80,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Newsreader",
        "Noto Serif Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Inter",
        "Noto Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Noto Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 500
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 360,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.22,
      1,
      0.36,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.3
  }
}

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!