Sales Intelligence Dashboard

Also called: Sales dashboard, Revenue intelligence, CRM pipeline dashboard

A revenue scoreboard: a thick quota bar with commit markers, chevron pipeline stages, a ranked rep leaderboard and a deal table in ink, paper and signal orange.

“Quota scoreboard”Dashboards & DataEra: 2015 → todayBoldSeriousTechy

Open full screen ↗

sales-intelligence-dashboard / landingEN

sales-intelligence-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 sm4pxRadius md8pxRadius lg12pxRadius xl16pxDensity×0.95Display 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.

quota progress barcommit / best case markerschevron pipeline stagesrep leaderboard with medalsdeal table with stage pillswin rate & coveragecondensed scoreboard numberssignal orange on ink

Sales intelligence dashboards motivate as much as they inform. The page leads with the number everyone is chasing — closed revenue against quota — as a thick progress bar with tick markers for commit, best case and target, beside the forecast call. Below it, the pipeline runs left to right as interlocking chevron stages with deal counts, values and stage-to-stage conversion; a leaderboard ranks reps with oversized condensed rank numbers, medals and attainment bars; and the deal table flags stalled or at-risk deals. The skin is warm paper and heavy ink with one signal orange, condensed uppercase labels and tabular figures — closer to a stadium scoreboard than a BI tool.

Best for

CRM and revenue-intelligence products
Sales team TV screens and weekly pipeline reviews
Partner, channel and franchise sales tracking
Any quota- or target-driven team

Avoid for

Patient, learner or citizen-facing services where ranking people feels wrong
Calm reporting for boards and investors
Content and engagement analytics

✓ Do

Lead with the quota: one thick bar, closed vs target, with commit and best-case markers
Show the pipeline left to right as stages with count, value and conversion to the next stage
Flag stalled deals with days-in-stage, not just a colour

✕ Don't

Don’t bury the quota under generic KPI tiles
Don’t rank more than ~8 reps on one screen or show losers in red
Don’t add a second loud colour — orange only; use green only for attainment ≥ 100%

Not to be confused with

Executive Dashboard →Executive shows a few calm, high-level KPIs; Sales Intelligence is competitive — a quota bar, chevron pipeline and ranked leaderboard in scoreboard type.User Behavior Analytics →Behaviour analytics funnels track anonymous users through events; Sales pipeline stages track named deals and money owned by reps.Gamified Playful →Gamified UIs use mascots, XP and rounded candy colours; Sales Intelligence keeps the leaderboard but stays ink-and-orange professional.

On mobile

Open on a full-width quota card (big condensed %, thick orange bar, commit marker), then a horizontally scrolling chevron strip of stages and a top-5 leaderboard. Deals become cards with a stage pill and amount. Floating ink tab bar with an orange active dot.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinBarlow Semi Condensed · 600/700

The quick brown fox

Heading · ThaiKanit · 500/600/700

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

Body · LatinBarlow · 400/500/600

Clear words make shared decisions.

Body · ThaiBai Jamjuree · 400/500/600

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

Kanit’s compact, heavy loopless forms carry the same scoreboard punch as Barlow Semi Condensed; Bai Jamjuree’s squarish, engineered strokes sit naturally beside Barlow’s DIN-like body.

Colour palette

Light

Dark

Design tokens

Radius	`sm 4px · md 8px · lg 12px · xl 16px · pill 999px`
Border	`1px`
Shadow	`0 6px 18px rgba(23,24,28,0.08)`
Display	`clamp(3rem, 7vw, 5.75rem)`
Motion	`180ms cubic-bezier(.2,.9,.3,1)`
Density	`×0.95`

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 · Sales Intelligence Dashboard (sales-intelligence-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=Barlow+Semi+Condensed:wght@600;700&family=Barlow:wght@400;500;600&family=Roboto+Mono:wght@500;600&family=Kanit:wght@500;600;700&family=Bai+Jamjuree:wght@400;500;600&display=swap
 */
:root {
  --radius: 12px;
  --background: #F6F4EF;
  --foreground: #17181C;
  --card: #FFFFFF;
  --card-foreground: #17181C;
  --popover: #FFFFFF;
  --popover-foreground: #17181C;
  --primary: #FF5A1F;
  --primary-foreground: #17181C;
  --secondary: #17181C;
  --secondary-foreground: #FFFFFF;
  --muted: #EEEAE1;
  --muted-foreground: #585961;
  --accent: #EEEAE1;
  --accent-foreground: #17181C;
  --destructive: #D2302A;
  --border: #E0DBCF;
  --input: #E0DBCF;
  --ring: #FF5A1F;
  --chart-1: #FF5A1F;
  --chart-2: #17181C;
  --chart-3: #00A86B;
  --chart-4: #F2B705;
  --chart-5: #8A8F99;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #17181C;
  --sidebar-primary: #FF5A1F;
  --sidebar-primary-foreground: #17181C;
  --sidebar-accent: #EEEAE1;
  --sidebar-accent-foreground: #17181C;
  --sidebar-border: #E0DBCF;
  --sidebar-ring: #FF5A1F;
}

.dark {
  --background: #111214;
  --foreground: #F4F2EC;
  --card: #1A1B1F;
  --card-foreground: #F4F2EC;
  --popover: #1A1B1F;
  --popover-foreground: #F4F2EC;
  --primary: #FF6B33;
  --primary-foreground: #111214;
  --secondary: #F4F2EC;
  --secondary-foreground: #111214;
  --muted: #232429;
  --muted-foreground: #A3A39B;
  --accent: #232429;
  --accent-foreground: #F4F2EC;
  --destructive: #FF5A4E;
  --border: #2E2F35;
  --input: #2E2F35;
  --ring: #FF6B33;
  --chart-1: #FF6B33;
  --chart-2: #F4F2EC;
  --chart-3: #2BD98B;
  --chart-4: #F2B705;
  --chart-5: #7C808A;
  --sidebar: #1A1B1F;
  --sidebar-foreground: #F4F2EC;
  --sidebar-primary: #FF6B33;
  --sidebar-primary-foreground: #111214;
  --sidebar-accent: #232429;
  --sidebar-accent-foreground: #F4F2EC;
  --sidebar-border: #2E2F35;
  --sidebar-ring: #FF6B33;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Sales Intelligence Dashboard (sales-intelligence-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=Barlow+Semi+Condensed:wght@600;700&family=Barlow:wght@400;500;600&family=Roboto+Mono:wght@500;600&family=Kanit:wght@500;600;700&family=Bai+Jamjuree:wght@400;500;600&display=swap
 */
@theme {
  --color-bg: #F6F4EF;
  --color-surface: #FFFFFF;
  --color-surface-2: #EEEAE1;
  --color-text: #17181C;
  --color-text-muted: #585961;
  --color-primary: #FF5A1F;
  --color-on-primary: #17181C;
  --color-secondary: #17181C;
  --color-on-secondary: #FFFFFF;
  --color-accent: #00A86B;
  --color-border: #E0DBCF;
  --color-success: #0E8A4F;
  --color-warning: #A85800;
  --color-danger: #D2302A;
  --color-chart-1: #FF5A1F;
  --color-chart-2: #17181C;
  --color-chart-3: #00A86B;
  --color-chart-4: #F2B705;
  --color-chart-5: #8A8F99;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 0 rgba(23,24,28,0.08);
  --shadow-md: 0 6px 18px rgba(23,24,28,0.08);
  --shadow-lg: 0 20px 44px rgba(23,24,28,0.16);
  --font-heading: "Barlow Semi Condensed", "Kanit", system-ui, sans-serif;
  --font-body: "Barlow", "Bai Jamjuree", system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, "Bai Jamjuree", monospace;
}

.dark {
  --color-bg: #111214;
  --color-surface: #1A1B1F;
  --color-surface-2: #232429;
  --color-text: #F4F2EC;
  --color-text-muted: #A3A39B;
  --color-primary: #FF6B33;
  --color-on-primary: #111214;
  --color-secondary: #F4F2EC;
  --color-on-secondary: #111214;
  --color-accent: #2BD98B;
  --color-border: #2E2F35;
  --color-success: #2BD98B;
  --color-warning: #F2B705;
  --color-danger: #FF5A4E;
  --color-chart-1: #FF6B33;
  --color-chart-2: #F4F2EC;
  --color-chart-3: #2BD98B;
  --color-chart-4: #F2B705;
  --color-chart-5: #7C808A;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Sales Intelligence Dashboard (sales-intelligence-dashboard). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:wght@600;700&family=Barlow:wght@400;500;600&family=Roboto+Mono:wght@500;600&family=Kanit:wght@500;600;700&family=Bai+Jamjuree:wght@400;500;600&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9569,
            0.9373
          ],
          "hex": "#f6f4ef"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.9176,
            0.8824
          ],
          "hex": "#eeeae1"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.0941,
            0.1098
          ],
          "hex": "#17181c"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3451,
            0.349,
            0.3804
          ],
          "hex": "#585961"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3529,
            0.1216
          ],
          "hex": "#ff5a1f"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.0941,
            0.1098
          ],
          "hex": "#17181c"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.0941,
            0.1098
          ],
          "hex": "#17181c"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.6588,
            0.4196
          ],
          "hex": "#00a86b"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.8588,
            0.8118
          ],
          "hex": "#e0dbcf"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.5412,
            0.3098
          ],
          "hex": "#0e8a4f"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.3451,
            0
          ],
          "hex": "#a85800"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8235,
            0.1882,
            0.1647
          ],
          "hex": "#d2302a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3529,
            0.1216
          ],
          "hex": "#ff5a1f"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.0941,
            0.1098
          ],
          "hex": "#17181c"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.6588,
            0.4196
          ],
          "hex": "#00a86b"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7176,
            0.0196
          ],
          "hex": "#f2b705"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5412,
            0.5608,
            0.6
          ],
          "hex": "#8a8f99"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.0706,
            0.0784
          ],
          "hex": "#111214"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.1059,
            0.1216
          ],
          "hex": "#1a1b1f"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1373,
            0.1412,
            0.1608
          ],
          "hex": "#232429"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.949,
            0.9255
          ],
          "hex": "#f4f2ec"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.6392,
            0.6078
          ],
          "hex": "#a3a39b"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.2
          ],
          "hex": "#ff6b33"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.0706,
            0.0784
          ],
          "hex": "#111214"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.949,
            0.9255
          ],
          "hex": "#f4f2ec"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.0706,
            0.0784
          ],
          "hex": "#111214"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.851,
            0.5451
          ],
          "hex": "#2bd98b"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.1843,
            0.2078
          ],
          "hex": "#2e2f35"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.851,
            0.5451
          ],
          "hex": "#2bd98b"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7176,
            0.0196
          ],
          "hex": "#f2b705"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3529,
            0.3059
          ],
          "hex": "#ff5a4e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.2
          ],
          "hex": "#ff6b33"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.949,
            0.9255
          ],
          "hex": "#f4f2ec"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.851,
            0.5451
          ],
          "hex": "#2bd98b"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7176,
            0.0196
          ],
          "hex": "#f2b705"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4863,
            0.502,
            0.5412
          ],
          "hex": "#7c808a"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "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.0902,
              0.0941,
              0.1098
            ],
            "hex": "#17181c",
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0902,
              0.0941,
              0.1098
            ],
            "hex": "#17181c",
            "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.0902,
              0.0941,
              0.1098
            ],
            "hex": "#17181c",
            "alpha": 0.16
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 20,
            "unit": "px"
          },
          "blur": {
            "value": 44,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Barlow Semi Condensed",
        "Kanit",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Barlow",
        "Bai Jamjuree",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Roboto Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Bai Jamjuree",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 180,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.9,
      0.3,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 0.95
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 3
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!