Enterprise SaaS

Also called: B2B SaaS, Corporate SaaS, Enterprise app UI

Professional B2B software: navy shell, indigo actions, IBM Plex, dense zebra tables, uppercase labels, approval badges and role-aware layouts.

“Navy B2B”Platform Design SystemsEra: 2010s → todaySeriousTrustworthyCalm

Open full screen ↗

enterprise-saas / landingEN

enterprise-saas / 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 sm3pxRadius md4pxRadius lg6pxRadius xl8pxDensity×0.85Display 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.

navy sidebarindigo primaryIBM Plex Sansdense zebra tablesuppercase column headersapproval status badgescompliance sealsrequest-a-demo form hero

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

Not to be confused with

Fluent 2 →Fluent 2 is light and airy with Mica, acrylic blur and a bright blue; Enterprise SaaS frames everything in solid navy with indigo actions and ruled, zebra tables.Shopify Polaris →Polaris uses a black top bar, grey sidebar, black bevelled buttons and green success; Enterprise SaaS uses a navy sidebar, flat indigo buttons and uppercase ruled tables.Data-Dense Dashboard →Data-dense dashboards are about charts edge to edge; Enterprise SaaS is about workflows — approvals, roles, forms and tables — with charts as support.

On mobile

The mobile companion is for approvals on the go: navy app bar and status bar, light-grey screens, ruled white lists with square badges for each request state, a navy featured card summarising what needs sign-off and a plain white tab bar with an indigo indicator. Keep tables as stacked list rows on phones.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinIBM Plex Sans · 600/700

The quick brown fox

Heading · ThaiIBM Plex Sans Thai · 600/700

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

Body · LatinIBM Plex Sans · 400/500/600

Clear words make shared decisions.

Body · ThaiIBM Plex Sans Thai · 400/500/600

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

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 3px · md 4px · lg 6px · xl 8px · pill 999px`
Border	`1px`
Shadow	`0 1px 3px rgba(17,26,46,0.10), 0 1px 2px rgba(17,26,46,0.06)`
Display	`clamp(2.4rem, 4.8vw, 3.75rem)`
Motion	`120ms cubic-bezier(0.2, 0, 0.38, 0.9)`
Density	`×0.85`

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 · Enterprise SaaS (enterprise-saas) — 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=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
 */
:root {
  --radius: 6px;
  --background: #F4F6FA;
  --foreground: #111A2E;
  --card: #FFFFFF;
  --card-foreground: #111A2E;
  --popover: #FFFFFF;
  --popover-foreground: #111A2E;
  --primary: #4338CA;
  --primary-foreground: #FFFFFF;
  --secondary: #14213D;
  --secondary-foreground: #FFFFFF;
  --muted: #EEF1F6;
  --muted-foreground: #4F5B76;
  --accent: #EEF1F6;
  --accent-foreground: #111A2E;
  --destructive: #B91C1C;
  --border: #D5DBE5;
  --input: #D5DBE5;
  --ring: #4338CA;
  --chart-1: #4338CA;
  --chart-2: #0E7490;
  --chart-3: #94A3B8;
  --chart-4: #D97706;
  --chart-5: #14213D;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #111A2E;
  --sidebar-primary: #4338CA;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #EEF1F6;
  --sidebar-accent-foreground: #111A2E;
  --sidebar-border: #D5DBE5;
  --sidebar-ring: #4338CA;
}

.dark {
  --background: #0B1222;
  --foreground: #E7ECF5;
  --card: #131C30;
  --card-foreground: #E7ECF5;
  --popover: #131C30;
  --popover-foreground: #E7ECF5;
  --primary: #818CF8;
  --primary-foreground: #0B1222;
  --secondary: #E7ECF5;
  --secondary-foreground: #0B1222;
  --muted: #1A2540;
  --muted-foreground: #9AA6BF;
  --accent: #1A2540;
  --accent-foreground: #E7ECF5;
  --destructive: #F87171;
  --border: #273350;
  --input: #273350;
  --ring: #818CF8;
  --chart-1: #818CF8;
  --chart-2: #38BDF8;
  --chart-3: #64748B;
  --chart-4: #FBBF24;
  --chart-5: #E7ECF5;
  --sidebar: #131C30;
  --sidebar-foreground: #E7ECF5;
  --sidebar-primary: #818CF8;
  --sidebar-primary-foreground: #0B1222;
  --sidebar-accent: #1A2540;
  --sidebar-accent-foreground: #E7ECF5;
  --sidebar-border: #273350;
  --sidebar-ring: #818CF8;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Enterprise SaaS (enterprise-saas) — 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=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
 */
@theme {
  --color-bg: #F4F6FA;
  --color-surface: #FFFFFF;
  --color-surface-2: #EEF1F6;
  --color-text: #111A2E;
  --color-text-muted: #4F5B76;
  --color-primary: #4338CA;
  --color-on-primary: #FFFFFF;
  --color-secondary: #14213D;
  --color-on-secondary: #FFFFFF;
  --color-accent: #0E7490;
  --color-border: #D5DBE5;
  --color-success: #15803D;
  --color-warning: #B45309;
  --color-danger: #B91C1C;
  --color-chart-1: #4338CA;
  --color-chart-2: #0E7490;
  --color-chart-3: #94A3B8;
  --color-chart-4: #D97706;
  --color-chart-5: #14213D;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 8px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(17,26,46,0.06);
  --shadow-md: 0 1px 3px rgba(17,26,46,0.10), 0 1px 2px rgba(17,26,46,0.06);
  --shadow-lg: 0 12px 28px rgba(17,26,46,0.16);
  --font-heading: "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", "IBM Plex Sans Thai", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "IBM Plex Sans Thai", monospace;
}

.dark {
  --color-bg: #0B1222;
  --color-surface: #131C30;
  --color-surface-2: #1A2540;
  --color-text: #E7ECF5;
  --color-text-muted: #9AA6BF;
  --color-primary: #818CF8;
  --color-on-primary: #0B1222;
  --color-secondary: #E7ECF5;
  --color-on-secondary: #0B1222;
  --color-accent: #38BDF8;
  --color-border: #273350;
  --color-success: #4ADE80;
  --color-warning: #FBBF24;
  --color-danger: #F87171;
  --color-chart-1: #818CF8;
  --color-chart-2: #38BDF8;
  --color-chart-3: #64748B;
  --color-chart-4: #FBBF24;
  --color-chart-5: #E7ECF5;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Enterprise SaaS (enterprise-saas). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9647,
            0.9804
          ],
          "hex": "#f4f6fa"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.9451,
            0.9647
          ],
          "hex": "#eef1f6"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0667,
            0.102,
            0.1804
          ],
          "hex": "#111a2e"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3098,
            0.3569,
            0.4627
          ],
          "hex": "#4f5b76"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2627,
            0.2196,
            0.7922
          ],
          "hex": "#4338ca"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.1294,
            0.2392
          ],
          "hex": "#14213d"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.4549,
            0.5647
          ],
          "hex": "#0e7490"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8353,
            0.8588,
            0.898
          ],
          "hex": "#d5dbe5"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0824,
            0.502,
            0.2392
          ],
          "hex": "#15803d"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7059,
            0.3255,
            0.0353
          ],
          "hex": "#b45309"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7255,
            0.1098,
            0.1098
          ],
          "hex": "#b91c1c"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2627,
            0.2196,
            0.7922
          ],
          "hex": "#4338ca"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0549,
            0.4549,
            0.5647
          ],
          "hex": "#0e7490"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5804,
            0.6392,
            0.7216
          ],
          "hex": "#94a3b8"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.4667,
            0.0235
          ],
          "hex": "#d97706"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.1294,
            0.2392
          ],
          "hex": "#14213d"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0706,
            0.1333
          ],
          "hex": "#0b1222"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0745,
            0.1098,
            0.1882
          ],
          "hex": "#131c30"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.102,
            0.1451,
            0.251
          ],
          "hex": "#1a2540"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9059,
            0.9255,
            0.9608
          ],
          "hex": "#e7ecf5"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.651,
            0.749
          ],
          "hex": "#9aa6bf"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5059,
            0.549,
            0.9725
          ],
          "hex": "#818cf8"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0706,
            0.1333
          ],
          "hex": "#0b1222"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9059,
            0.9255,
            0.9608
          ],
          "hex": "#e7ecf5"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0431,
            0.0706,
            0.1333
          ],
          "hex": "#0b1222"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2196,
            0.7412,
            0.9725
          ],
          "hex": "#38bdf8"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1529,
            0.2,
            0.3137
          ],
          "hex": "#273350"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2902,
            0.8706,
            0.502
          ],
          "hex": "#4ade80"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.749,
            0.1412
          ],
          "hex": "#fbbf24"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9725,
            0.4431,
            0.4431
          ],
          "hex": "#f87171"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5059,
            0.549,
            0.9725
          ],
          "hex": "#818cf8"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2196,
            0.7412,
            0.9725
          ],
          "hex": "#38bdf8"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3922,
            0.4549,
            0.5451
          ],
          "hex": "#64748b"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.749,
            0.1412
          ],
          "hex": "#fbbf24"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9059,
            0.9255,
            0.9608
          ],
          "hex": "#e7ecf5"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 3,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 8,
        "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.0667,
              0.102,
              0.1804
            ],
            "hex": "#111a2e",
            "alpha": 0.06
          },
          "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.0667,
              0.102,
              0.1804
            ],
            "hex": "#111a2e",
            "alpha": 0.1
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 3,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        },
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0667,
              0.102,
              0.1804
            ],
            "hex": "#111a2e",
            "alpha": 0.06
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0667,
              0.102,
              0.1804
            ],
            "hex": "#111a2e",
            "alpha": 0.16
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 12,
            "unit": "px"
          },
          "blur": {
            "value": 28,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Sans",
        "IBM Plex Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Sans",
        "IBM Plex Sans Thai",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "IBM Plex Sans Thai",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 120,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0,
      0.38,
      0.9
    ]
  },
  "density": {
    "$type": "number",
    "$value": 0.85
  }
}

Prompt builder

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

PageTech stackContent languageMode

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