# Sales Intelligence 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. - Nickname: Quota scoreboard - Also called: Sales dashboard, Revenue intelligence, CRM pipeline dashboard - Category: Dashboards & Data - Moods: Bold, Serious, Techy - Industries: SaaS, Corporate & B2B, Startup & Tech, Real Estate, Fintech & Banking - Style page: https://uilingo.dev/styles/sales-intelligence-dashboard/ 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% ## Audit Passed after 3 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 "Sales Intelligence Dashboard" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line 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. Design keywords: quota progress bar, commit / best case markers, chevron pipeline stages, rep leaderboard with medals, deal table with stage pills, win rate & coverage, condensed scoreboard numbers, signal orange on ink. ## Visual language A revenue scoreboard rather than a BI tool: warm paper (#F6F4EF) with faint vertical stadium lines and a 4px signal-orange rule across the top, heavy ink (#17181C) type and borders, and exactly one loud colour — orange #FF5A1F. Headings and numbers are Barlow Semi Condensed 700 in uppercase (Thai in Kanit, never uppercased), Latin labels are tracked condensed caps (Thai labels use Kanit 600 at 0.8rem in ink with no tracking), and everything that shows progress is a thick bar. Pipeline stages are interlocking chevrons that darken toward the close, and the one 'closed won' chevron is orange. ## Signature details (must be visible) - Quota card: a giant condensed '70%' (orange % sign) beside 'THB 8.42M closed of THB 12M', then a 30px bar — orange fill for closed, a solid light-orange segment (rgba(255,90,31,.35)) up to the Commit tick, a hatched ghost beyond it up to Best case (repeating-linear-gradient(135deg, rgba(255,90,31,.45) 0 3px, transparent 3px 7px)), a 10%-segment track, and 3px ink tick markers for Commit, Best case and Quota with condensed labels (Thai: มั่นใจ / กรณีดีที่สุด / เป้า, never uppercased English) and mono values - Chevron pipeline: five stages via clip-path polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%, 18px 50%), ink tint 10% → 34% left to right, final 'Closed won' stage solid orange; each shows stage name (caps), value (1.9rem condensed) and deal count; conversion pills (→ 67%) sit under each joint. At ≤480px the chevrons become a horizontally scrolling strip (min-width 150px each, scroll-snap) and each joint pill moves inside its chevron as '→ 67%' — never stack them - Leaderboard: rank numbers in 1.9rem condensed (medals: gold #C9921A, silver #8E9399, bronze #B0703C for the top 3), ink avatar, name + mono closed amount, a 6px attainment bar whose track = 0–125% of quota with the ink 100% tick at 80% of the track (fills over 100% stay inside the track, capped at 125%), attainment % turning accent green #00A86B at 100% and above; rank 1 row has a 10% orange tint - Deal table: ink 2px header rule with condensed caps, stage shown as small chevron pills (later stages darker, Negotiation solid ink), mono right-aligned amounts, probability mini-bar, health badges with days-in-stage ('Stalled 18 d'; Thai short labels 'ตามแผน', 'ค้าง 18 วัน', 'ไม่มีนัด') set white-space: nowrap. The deal table is dashboard only — not on the landing - Active nav item and selected segment = solid ink with a 3px orange bottom inset; chips and radio cards reuse the orange underline - Primary buttons: orange with ink text, condensed uppercase, box-shadow: inset 0 -3px 0 #C2410C (darker orange edge); hover adds a hard ink drop: 0 3px 0 #17181C - Eyebrow and form-legend glyph: a single filled orange chevron, 14px (12px on legends), clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%, 45% 50%) - Colour roles: orange #FF5A1F is the only loud colour and is never used for text on paper (≈2.8:1) — orange text is allowed only on ink #17181C (≈5.7:1) or as a non-essential glyph next to ink text; accent green #00A86B appears only for attainment ≥ 100% and positive deltas; success #0E8A4F is for status badges - Thai headline rule: the hero headline is Thai in Kanit 700 at normal case — never add English uppercase lines just to get the scoreboard look; the scoreboard feel comes from size (clamp up to 5.75rem), tight leading (1.0 Latin; Thai no tighter than 1.3 so tone marks don't clip) and a decorative 0.16em orange square after the last word (a ::after or aria-hidden span, not a Latin period) - Paper canvas: faint vertical stadium lines repeating-linear-gradient(90deg, rgba(23,24,28,.035) 0 1px, transparent 1px 120px) under a 4px orange top rule - Allowed decorative extras outside the tokens: medal colours #C9921A / #8E9399 / #B0703C, light orange rgba(255,90,31,.35) for the commit segment, hatch rgba(255,90,31,.45), button edge #C2410C and the form card's 8px 8px 0 #FF5A1F hard shadow — every other colour comes from the tokens ## Design tokens — use these exact values Colours (light mode): - background #F6F4EF - surface #FFFFFF - surface-2 #EEEAE1 - text #17181C - text-muted #585961 - primary #FF5A1F (text on it #17181C) - secondary #17181C (text on it #FFFFFF) - accent #00A86B - border #E0DBCF - success #0E8A4F · warning #A85800 · danger #D2302A - chart series #FF5A1F, #17181C, #00A86B, #F2B705, #8A8F99 Radius: sm 4px, md 8px, lg 12px, xl 16px, pill 999px Border width: 1px Shadows: sm `0 1px 0 rgba(23,24,28,0.08)`, md `0 6px 18px rgba(23,24,28,0.08)`, lg `0 20px 44px rgba(23,24,28,0.16)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.95 density Motion: 180ms cubic-bezier(.2,.9,.3,1) ## Typography (Latin + Thai) - Headings: Barlow Semi Condensed 600/700 with Thai fallback Kanit 500/600/700 - Body: Barlow 400/500/600 with Thai fallback Bai Jamjuree 400/500/600 - Mono: Roboto Mono - Google Fonts URL: 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 - CSS stacks: heading `"Barlow Semi Condensed", "Kanit", system-ui, sans-serif`; body `"Barlow", "Bai Jamjuree", system-ui, sans-serif`; mono `"Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, "Bai Jamjuree", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Bai Jamjuree — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3rem, 7vw, 5.75rem), heading weight 700, 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: 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. ## Components - Buttons: 44px, 8px radius, Barlow Semi Condensed 700 uppercase 0.06em; primary orange/ink; secondary white with a 2px ink border that inverts to ink on hover - Cards: white, 1px warm border, 12px radius, hairline shadow; card titles condensed caps 0.85rem 0.08em - KPI tiles: caps label with icon, 2.4rem condensed value, delta with 'vs Q3' - Forecast-call card: four rows (Closed, Commit, Best case, Coverage) each with a 6px bar — solid orange, light orange, hatched orange, ink - Badges: 4px radius, uppercase 0.7rem 700, tinted tones; solid badge orange - Inputs: 8px radius, ink-tinted border; focus = ink border + 3px solid orange ring - Landing form hero: the 'book a demo' card has a 2px ink border and box-shadow: 8px 8px 0 #FF5A1F; fields = full name, work email, company, and team-size radio cards (1–10 / 11–50 / 51+) with the custom ink/orange radio, never native browser radios; CTA 'BOOK A DEMO' (Thai: 'จองเดโม') - Mobile floating tab bar: solid ink pill, grey icons, active icon orange with a 14×3 orange bar under it - Deal-table health badges: white-space: nowrap with short labels; below 1360px hide the owner avatar and the close-date column so badges never wrap or overflow ## 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: copy on the left and a sign-up form card on the right. Navigation: bar style. Sections in order: hero → logos → stats → features → testimonials → pricing → faq → cta. Feature section as grid. Landing: bar nav with a 2px ink bottom rule; a 'book a demo' form hero (big condensed headline left, orange-shadowed form right); caps logo strip; stats as huge ink #17181C condensed numbers with an orange %/+/× unit glyph on 4px orange top rules (never orange numerals on paper); then — required, right after stats — a scoreboard preview section: the quota card (big % + thick bar with Commit/Best case/Quota ticks) beside a top-4 leaderboard, and the full-width chevron pipeline under them. Then a feature grid with ink icon tiles and orange glyphs, testimonials, pricing with an ink highlighted plan, FAQ on 2px ink rules and an ink CTA with an orange chevron stripe pattern (45° orange chevrons at 24px pitch, 12% opacity on ink). All copy is about sales, quota and pipeline. The deal table is dashboard only. Dashboard: top nav shell (ink active tab), eyebrow 'Q4 FY26 · 34 days left', 'REVENUE SCOREBOARD' title, My team/All regions switch and Submit forecast; then quota (8) + forecast call (4), KPI row, full-width chevron pipeline, deal table (8) + leaderboard (4). ## Content Use realistic product copy (fictional brand) suited to: CRM and revenue-intelligence products. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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% - Burying the quota among equal KPI tiles — the quota bar is the hero - Orange numerals or orange body text on paper (fails contrast); more than one loud colour, rainbow stage colours or red rows for low performers - Rounded candy shapes, mascots or XP badges — that is Gamified/Playful - Thin light type or lots of empty air — it should feel dense and competitive - Uppercase or letter-spacing on Thai text; Thai headings use Kanit at normal case with 1.3+ line-height - English filler headlines in a Thai page, or task/sprint project-management copy on the landing, dashboard and mobile home — those carry quota, pipeline and reps (shared demo pages such as the form and components sheet may keep the default scenario copy) ## Stack notes One self-contained HTML file with a