# Enterprise SaaS > Professional B2B software: navy shell, indigo actions, IBM Plex, dense zebra tables, uppercase labels, approval badges and role-aware layouts. - Nickname: Navy B2B - Also called: B2B SaaS, Corporate SaaS, Enterprise app UI - Category: Platform Design Systems - Moods: Serious, Trustworthy, Calm - Industries: SaaS, Corporate & B2B, Fintech & Banking, Government & Nonprofit - Style page: https://uilingo.dev/styles/enterprise-saas/ Enterprise SaaS is the look of software bought by procurement and used all day by operations teams. A dark navy sidebar and hero frame a calm light-grey workspace; one indigo marks actions and selection. IBM Plex Sans and Plex Mono give an engineered, trustworthy voice. Information is dense and ruled: zebra-striped tables with uppercase headers (Latin only; Thai labels stay sentence case), KPI tiles with coloured edge markers, square status badges for approval states, compliance seals, and squared avatars that read as accounts and roles rather than friends. ## Best for - B2B platforms with roles, permissions and approval flows - Back-office, ERP, HR, procurement and compliance tools - Sales-led landing pages with a “request a demo” form - Admin consoles that show a lot of tabular data ## Avoid for - Consumer apps that need delight and personality - Creative portfolios and lifestyle brands - Kids, gaming or entertainment products ## Do - Frame the app in navy (#14213D) and keep the workspace light grey (#F4F6FA) - Use one indigo (#4338CA) for actions and selection; status colours only for status - Make tables dense: 8–10px rows, zebra stripes, uppercase 11px headers, tabular mono numbers ## Don't - Don’t use gradients, glows or playful illustrations — the navy hero gets only a 32px blueprint grid and a 4px indigo bottom rule - Don’t use pill-shaped cards or radii above 8px - Don’t hide data behind cards when a table would do ## 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 "Enterprise SaaS" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Professional B2B software: navy shell, indigo actions, IBM Plex, dense zebra tables, uppercase labels, approval badges and role-aware layouts. Design keywords: navy sidebar, indigo primary, IBM Plex Sans, dense zebra tables, uppercase column headers, approval status badges, compliance seals, request-a-demo form hero. ## Visual language Serious, procurement-ready B2B software. A deep navy (#14213D) frames the product — the app sidebar, the landing hero, the CTA and the footer — around a calm light-grey workspace (#F4F6FA) of white, 1px-ruled panels with 6px corners. One indigo (#4338CA) marks actions and selection. IBM Plex Sans carries headings and UI, IBM Plex Mono carries numbers, and small uppercase tracked labels head every column, KPI and form field in Latin (Thai labels stay sentence case). The mood is dense, orderly and auditable: zebra tables, square approval badges, compliance seals, squared account avatars and a workspace switcher in the app sidebar. ## Signature details (must be visible) - Navy frame: #14213D sidebar / hero / CTA with a faint 32px blueprint grid of rgba(255,255,255,.05) lines and no glow; footer in deeper #0B1529 - Indigo #4338CA (hover #3730A3) as the only action colour; a 4px indigo rule under the navy hero and on top of the hero form card - Labels: in Latin, 11–12px, 600 weight, uppercase, letter-spacing .06–.1em on table headers, KPI labels, form labels and eyebrows. On Thai pages, write labels in Thai, sentence case, 13px 600, letter-spacing 0; only Latin-only codes (SKU, ID, SLA, ISO) stay uppercase tracked - Dense zebra tables: 9px rows, even rows #F9FAFC, hover rows #EEF0FF, #EEF1F6 header band - Square status badges: 3px radius, 1px tinted border, 11px. Tints (bg / border / text): success #ECFDF3/#A6E3BE/#15803D, warning #FFF7E6/#F5C983/#B45309, danger #FEF2F2/#F5B5B5/#B91C1C, neutral #EEF1F6/#C9D1DE/#4F5B76. Labels: APPROVED / PENDING / REJECTED (uppercase) on English pages; the Thai words for approved / pending / rejected, in plain sentence case, on Thai pages - KPI tiles with a 3px coloured left edge (indigo, teal, amber, navy) and Plex Mono values - Squared avatars (4px radius) in navy with white initials — accounts and roles, not faces - Named extras beyond the tokens: footer #0B1529, active nav #1C2C4F, indicator #818CF8, indigo tint #EEF0FF, zebra #F9FAFC, field border #B9C2D3, primary hover #3730A3. Active sidebar item = #1C2C4F with a 3px #818CF8 inset left bar ## Design tokens — use these exact values Colours (light mode): - background #F4F6FA - surface #FFFFFF - surface-2 #EEF1F6 - text #111A2E - text-muted #4F5B76 - primary #4338CA (text on it #FFFFFF) - secondary #14213D (text on it #FFFFFF) - accent #0E7490 - border #D5DBE5 - success #15803D · warning #B45309 · danger #B91C1C - chart series #4338CA, #0E7490, #94A3B8, #D97706, #14213D Radius: sm 3px, md 4px, lg 6px, xl 8px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(17,26,46,0.06)`, md `0 1px 3px rgba(17,26,46,0.10), 0 1px 2px rgba(17,26,46,0.06)`, lg `0 12px 28px rgba(17,26,46,0.16)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 0.85 density Motion: 120ms cubic-bezier(0.2, 0, 0.38, 0.9) ## Typography (Latin + Thai) - Headings: IBM Plex Sans 600/700 with Thai fallback IBM Plex Sans Thai 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:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap - CSS stacks: heading `"IBM Plex Sans", "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.4rem, 4.8vw, 3.75rem), heading weight 600, heading tracking -0.015em (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 the official Thai member of the Plex family, so Latin, Thai and Plex Mono numbers share one engineered, corporate voice. ## Components - Buttons: 4px radius, 38px tall, 600 weight; primary indigo (hover #3730A3); secondary white with 1px #B9C2D3 border - Inputs: 40px, 1px #B9C2D3 border, 4px radius; focus = indigo border + 3px rgba(67,56,202,.16) ring; labels above (uppercase tracked in Latin, sentence case in Thai) - Hero form card: white, 4px indigo top rule, a segmented control (Request a demo | Start trial) on top, 4 fields in a 2×2 grid, then a full-width indigo submit - Cards/panels: white, 1px #D5DBE5 border, 6px radius, shadow 0 1px 2px rgba(17,26,46,.06); header row separated by a 1px rule - Feature list: 6 items in one bordered container split into a 2-column grid of ruled cells with #EEF0FF icon squares - Stats strip: a single bordered bar divided by vertical rules, mono numbers and uppercase captions (Thai captions sentence case) - Trust/compliance seals: bordered 4px tiles with a 3px indigo left edge and shield icons - Segmented control: joined bordered segments, selected = #EEF0FF fill with a 2px indigo bottom bar - Tabs: 2px indigo underline; chips 4px radius, selected = navy fill - Charts: 2px indigo line, teal comparison, dashed forecast with a shaded confidence band; square status dots. Alerts: white with a 4px coloured left border ## 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 → trust → features → stats → showcase → testimonials → pricing → faq → cta. Feature section as list. Landing: white top bar (no workspace switcher — the switcher chevron is for the app sidebar only), then a navy hero with a 32px blueprint grid and a 4px indigo bottom rule — no glow — holding the headline, lead and, on the right, the white demo-request form card (segmented control, 2×2 fields, full-width submit) with an indigo top rule. Follow with a greyscale logo row, compliance seals, a ruled 2-column feature list of 6 items, a ruled stats strip, a showcase section — copy on the left, a white ruled panel on the right holding a zebra approvals table with square badges — testimonials with squared avatars, pricing where the recommended plan is navy with an indigo top edge, a ruled FAQ panel and a left-aligned navy CTA. Dashboard: navy sidebar with workspace switcher, white top bar with search, KPI tiles with coloured left edges, a zebra projects table with approval badges, system status, quarter comparison bars and a forecast chart. ## Content Use realistic product copy (fictional brand) suited to: B2B platforms with roles, permissions and approval flows. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Frame the app in navy (#14213D) and keep the workspace light grey (#F4F6FA) - Use one indigo (#4338CA) for actions and selection; status colours only for status - Make tables dense: 8–10px rows, zebra stripes, uppercase 11px headers, tabular mono numbers ## Don't - Don’t use gradients, glows or playful illustrations — the navy hero gets only a 32px blueprint grid and a 4px indigo bottom rule - Don’t use pill-shaped cards or radii above 8px - Don’t hide data behind cards when a table would do - Gradients, radial glows, glass or playful illustrations (the blueprint grid is the only background texture) - Pill buttons, pill cards or radii above 8px - Bright blue Fluent styling with acrylic blur, or Shopify-style black bevel buttons - Sparse layouts with huge whitespace — enterprise users want density - Colourful status colours used as decoration - Letter-spaced or uppercase-English labels and badges on Thai pages; round friendly avatars and emoji-heavy copy ## Stack notes One self-contained HTML file with a