Dashboardsystem

Corporate Enterprise

🚮 AI SlopAI would generate this anyway

Generates UI with the polished reliability of enterprise software — navy and white palette, data tables with proper headers, professional typography, breadcrumbs, and the quiet confidence of software that handles billions.

professionaltablesnavigationenterprise

Added February 5, 2026 by unslop.dev

Example output

Data table with pagination

Active Users

Name	Role	Status	Last Active
Sarah Chen	Admin	Active	2 min ago
James Wright	Editor	Active	14 min ago
Priya Patel	Viewer	Pending	—

Showing 1–3 of 1,247 users

View code

<div style="padding: 1.5rem; background: #f8f9fa; font-family: 'Segoe UI', 'Roboto', -apple-system, sans-serif;">
  <div style="max-width: 36rem; background: white; border: 1px solid #d1d5db; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.06);">
    <div style="padding: 0.75rem 1rem; border-bottom: 1px solid #d1d5db; display: flex; justify-content: space-between; align-items: center;">
      <h3 style="font-size: 0.9375rem; font-weight: 600; color: #1a1a1a; margin: 0;">Active Users</h3>
      <button style="background: #1e3a5f; color: white; border: none; border-radius: 3px; padding: 0.375rem 0.875rem; font-size: 0.75rem; font-weight: 600; cursor: pointer; font-family: inherit;">+ Add User</button>
    </div>
    <table style="width: 100%; border-collapse: collapse; font-size: 0.8125rem;">
      <thead>
        <tr style="background: #f3f4f6;">
          <th style="text-align: left; padding: 0.5rem 1rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; border-bottom: 1px solid #d1d5db;">Name</th>
          <th style="text-align: left; padding: 0.5rem 1rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; border-bottom: 1px solid #d1d5db;">Role</th>
          <th style="text-align: left; padding: 0.5rem 1rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; border-bottom: 1px solid #d1d5db;">Status</th>
          <th style="text-align: right; padding: 0.5rem 1rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; border-bottom: 1px solid #d1d5db;">Last Active</th>
        </tr>
      </thead>
      <tbody>
        <tr style="border-bottom: 1px solid #e5e7eb;">
          <td style="padding: 0.5rem 1rem; color: #1e3a5f; font-weight: 500;">Sarah Chen</td>
          <td style="padding: 0.5rem 1rem; color: #4a4a4a;">Admin</td>
          <td style="padding: 0.5rem 1rem;"><span style="background: #ecfdf5; color: #0f7b3f; font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 3px;">Active</span></td>
          <td style="padding: 0.5rem 1rem; text-align: right; color: #6b7280;">2 min ago</td>
        </tr>
        <tr style="background: #fafafa; border-bottom: 1px solid #e5e7eb;">
          <td style="padding: 0.5rem 1rem; color: #1e3a5f; font-weight: 500;">James Wright</td>
          <td style="padding: 0.5rem 1rem; color: #4a4a4a;">Editor</td>
          <td style="padding: 0.5rem 1rem;"><span style="background: #ecfdf5; color: #0f7b3f; font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 3px;">Active</span></td>
          <td style="padding: 0.5rem 1rem; text-align: right; color: #6b7280;">14 min ago</td>
        </tr>
        <tr style="border-bottom: 1px solid #e5e7eb;">
          <td style="padding: 0.5rem 1rem; color: #1e3a5f; font-weight: 500;">Priya Patel</td>
          <td style="padding: 0.5rem 1rem; color: #4a4a4a;">Viewer</td>
          <td style="padding: 0.5rem 1rem;"><span style="background: #fef3c7; color: #b36b00; font-size: 0.6875rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 3px;">Pending</span></td>
          <td style="padding: 0.5rem 1rem; text-align: right; color: #6b7280;">—</td>
        </tr>
      </tbody>
    </table>
    <div style="padding: 0.5rem 1rem; border-top: 1px solid #d1d5db; display: flex; justify-content: space-between; align-items: center; background: #f9fafb;">
      <span style="font-size: 0.75rem; color: #6b7280;">Showing 1–3 of 1,247 users</span>
      <div style="display: flex; gap: 0.25rem;">
        <button style="background: white; border: 1px solid #d1d5db; border-radius: 3px; padding: 0.25rem 0.5rem; font-size: 0.75rem; color: #6b7280; cursor: pointer;">← Prev</button>
        <button style="background: #1e3a5f; color: white; border: 1px solid #1e3a5f; border-radius: 3px; padding: 0.25rem 0.5rem; font-size: 0.75rem; cursor: pointer;">1</button>
        <button style="background: white; border: 1px solid #d1d5db; border-radius: 3px; padding: 0.25rem 0.5rem; font-size: 0.75rem; color: #4a4a4a; cursor: pointer;">2</button>
        <button style="background: white; border: 1px solid #d1d5db; border-radius: 3px; padding: 0.25rem 0.5rem; font-size: 0.75rem; color: #4a4a4a; cursor: pointer;">3</button>
        <button style="background: white; border: 1px solid #d1d5db; border-radius: 3px; padding: 0.25rem 0.5rem; font-size: 0.75rem; color: #4a4a4a; cursor: pointer;">Next →</button>
      </div>
    </div>
  </div>
</div>

Breadcrumb and page header

Dashboard / Users / User Details

User Management

Manage user accounts, roles, and permissions across your organization.

View code

<div style="padding: 1.5rem; background: #f8f9fa; font-family: 'Segoe UI', 'Roboto', -apple-system, sans-serif;">
  <div style="max-width: 36rem;">
    <div style="font-size: 0.75rem; color: #6b7280; margin-bottom: 1rem;">
      <a href="#" style="color: #1e3a5f; text-decoration: none;">Dashboard</a>
      <span style="margin: 0 0.375rem;">/</span>
      <a href="#" style="color: #1e3a5f; text-decoration: none;">Users</a>
      <span style="margin: 0 0.375rem;">/</span>
      <span>User Details</span>
    </div>
    <div style="display: flex; justify-content: space-between; align-items: center;">
      <div>
        <h1 style="font-size: 1.25rem; font-weight: 600; color: #1a1a1a; margin: 0 0 0.25rem 0;">User Management</h1>
        <p style="font-size: 0.8125rem; color: #6b7280; margin: 0;">Manage user accounts, roles, and permissions across your organization.</p>
      </div>
      <div style="display: flex; gap: 0.5rem;">
        <button style="background: white; border: 1px solid #d1d5db; border-radius: 4px; padding: 0.5rem 1rem; font-size: 0.8125rem; color: #4a4a4a; cursor: pointer; font-family: inherit;">Export</button>
        <button style="background: #1e3a5f; color: white; border: none; border-radius: 4px; padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 600; cursor: pointer; font-family: inherit;">+ New User</button>
      </div>
    </div>
  </div>
</div>

Form with validation

Edit Profile

Full Name *

Email *

Email address is required.

Department

Select the user's primary department.

View code

<div style="padding: 1.5rem; background: #f8f9fa; font-family: 'Segoe UI', 'Roboto', -apple-system, sans-serif;">
  <div style="background: white; border: 1px solid #d1d5db; border-radius: 4px; padding: 1.25rem; max-width: 24rem;">
    <h3 style="font-size: 0.9375rem; font-weight: 600; color: #1a1a1a; margin: 0 0 1rem 0;">Edit Profile</h3>
    <div style="margin-bottom: 0.875rem;">
      <label style="font-size: 0.8125rem; font-weight: 500; color: #4a4a4a; display: block; margin-bottom: 0.25rem;">Full Name <span style="color: #c41e1e;">*</span></label>
      <input type="text" value="Sarah Chen" style="width: 100%; border: 1px solid #d1d5db; border-radius: 3px; padding: 0.5rem 0.625rem; font-size: 0.8125rem; font-family: inherit; color: #1a1a1a; box-sizing: border-box; outline: none;" />
    </div>
    <div style="margin-bottom: 0.875rem;">
      <label style="font-size: 0.8125rem; font-weight: 500; color: #4a4a4a; display: block; margin-bottom: 0.25rem;">Email <span style="color: #c41e1e;">*</span></label>
      <input type="email" value="" style="width: 100%; border: 1px solid #c41e1e; border-radius: 3px; padding: 0.5rem 0.625rem; font-size: 0.8125rem; font-family: inherit; color: #1a1a1a; box-sizing: border-box; outline: none; background: #fef2f2;" />
      <p style="font-size: 0.6875rem; color: #c41e1e; margin: 0.25rem 0 0;">Email address is required.</p>
    </div>
    <div style="margin-bottom: 1rem;">
      <label style="font-size: 0.8125rem; font-weight: 500; color: #4a4a4a; display: block; margin-bottom: 0.25rem;">Department</label>
      <select style="width: 100%; border: 1px solid #d1d5db; border-radius: 3px; padding: 0.5rem 0.625rem; font-size: 0.8125rem; font-family: inherit; color: #1a1a1a; box-sizing: border-box; outline: none; background: white;">
        <option>Engineering</option>
        <option>Design</option>
        <option>Marketing</option>
      </select>
      <p style="font-size: 0.6875rem; color: #6b7280; margin: 0.25rem 0 0;">Select the user's primary department.</p>
    </div>
    <div style="display: flex; gap: 0.5rem; justify-content: flex-end; padding-top: 0.75rem; border-top: 1px solid #e5e7eb;">
      <button style="background: white; border: 1px solid #d1d5db; border-radius: 3px; padding: 0.5rem 1rem; font-size: 0.8125rem; color: #4a4a4a; cursor: pointer; font-family: inherit;">Cancel</button>
      <button style="background: #1e3a5f; color: white; border: none; border-radius: 3px; padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 600; cursor: pointer; font-family: inherit;">Save Changes</button>
    </div>
  </div>
</div>

System prompt

Copy this into your AI system prompt

You generate UI in a corporate enterprise style — the visual language of Salesforce, SAP, ServiceNow, and Bloomberg Law. Professional, reliable, information-dense but organized. Navy blue anchors the brand. Data tables are first-class citizens. Every component says "this software has been audited." Not exciting — trustworthy.

VISUAL RULES:
- Background: White (#ffffff) for main content. #f8f9fa (very light gray) for page background. Cards/panels on white.
- Primary: Corporate navy (#1e3a5f). Used for headers, primary buttons, active navigation, key links. The authoritative anchor color.
- Secondary: Steel blue (#4a7abb) for secondary actions and accents. Light blue (#e8f0fe) for selected states and highlights.
- Status: Green (#0f7b3f) success. Red (#c41e1e) error. Amber (#b36b00) warning. Blue (#1e3a5f) info.
- Text: Near-black (#1a1a1a) for body. Dark gray (#4a4a4a) for secondary. Medium gray (#6b7280) for labels and help text. Never pure black headings — always slightly softened.
- Typography: `font-family: 'Segoe UI', 'Roboto', -apple-system, sans-serif`. The system-adjacent font that every enterprise uses. Headers: font-weight 600. Body: 400. Small/compact sizing.
- Borders: #d1d5db (gray-300). Clean, visible, structural. Tables, cards, and panels all have borders. This is not borderless design.
- Border radius: 4px. Small, professional. Not 0 (too harsh) and definitely not 12px+ (too playful).
- Spacing: Compact but breathable. p-3 to p-4 in table cells. p-4 to p-5 in cards. gap-4 in layouts. Dense without being cramped.
- Shadows: Subtle. `box-shadow: 0 1px 3px rgba(0,0,0,0.08)`. Only on elevated elements like dropdowns and modals.

SPECIFIC PATTERNS:
- Data tables: White bg, gray-300 borders on all cells. Header row: bg-#f3f4f6 with font-weight 600, uppercase text-xs for column names. Alternating rows optional: white/#fafafa. Sortable columns indicated by ▲▼ arrows.
- Navigation: Navy sidebar or top bar. White text. Active item: light blue bg or white left border. Breadcrumbs: text-sm, gray, separated by " / ".
- Buttons primary: bg-navy text-white rounded-sm px-4 py-2. Hover: slightly lighter navy. Disabled: opacity-50.
- Buttons secondary: border-gray-300 text-gray-700 bg-white. Standard outline button.
- Forms: Label above input, text-sm font-medium text-gray-700. Input: border-gray-300, rounded-sm. Required fields: red asterisk. Help text: text-xs text-gray-500 below input.
- Status badges: Small, rounded-sm, font-weight 600. Green bg for active/success, red for error, amber for pending. Muted fills (bg-green-50 text-green-700).
- Pagination: Bottom of tables. "1-20 of 1,247" with numbered page links.

ANTI-PATTERNS:
- No decorative elements. No gradients. No playful colors.
- No large text sizes. Maximum: text-xl for page titles.
- No rounded-full or rounded-xl on containers. Keep it professional.
- No serif fonts. No handwriting fonts. No display fonts.
- No animations beyond subtle hover transitions.
- No dark mode by default. Enterprise is light-mode-first.

Related prompts

QUERY RESULT — 4 ROWS — 0.003s

      
          ID
          Endpoint
          Latency
          Req/s
          Status
        

      
          001
          /api/users
          12ms
          4,231
          [OK]
        

          002
          /api/orders
          34ms
          1,847
          [OK]
        

          003
          /api/payments
          892ms
          203
          [ERR]
        

          004
          /api/analytics
          67ms
          982
          [PENDING]
        

    last updated: 2026-02-16T14:32:07Z | source: prod-monitor-03 | ttl: 30s

ID	Endpoint	Latency	Req/s	Status
001	/api/users	12ms	4,231	[OK]
002	/api/orders	34ms	1,847	[OK]
003	/api/payments	892ms	203	[ERR]
004	/api/analytics	67ms	982	[PENDING]

  
  | rows: 4 of 4 | page: 1/1

Dashboard

Data Brutalism

🔥79system

Generates UI that treats raw data as the aesthetic — monospaced tables, visible grid structures, exposed metadata, no decoration. The beauty of information presented without apology. Bloomberg Terminal meets Craigslist.

Symbol
        Last
        Chg
        %Chg
      
AAPL
        189.84
        +2.31
        +1.23%
      
MSFT
        415.20
        -3.67
        -0.88%
      
NVDA
        924.50
        +18.42
        +2.03%
      
TSLA
        248.10
        -5.90
        -2.32%
      

NAV
$2,847,231
▲ +1.42% today
P&L (MTD)
+$124,890
▁▂▃▂▃▄▅▆▅▇
Sharpe
1.847
252d rolling
Exposure
87.2%
target: 90%

Dashboard

Financial Terminal

🔥89system

Generates UI in the style of a Bloomberg or Reuters terminal — extreme data density, green/red for up/down, monospace numbers, compact tables, and the unapologetic utility of Wall Street trading floors.

Requests

1.24M

↑ 12.3%

Error rate

0.04%

↓ 0.01%

p95 Latency

142ms

↑ 23ms

Endpoint	Requests	Latency	Status
/api/users	45.2k	89ms	Healthy
/api/payments	12.8k	234ms	Degraded
/api/search	8.1k	67ms	Healthy

Dashboard

Dense Dashboard

🔥85system

Generates data-heavy, dark-mode-first UI — compact tables, stat cards, sparklines, status badges. The kind of interface an ops engineer stares at for 8 hours and still finds readable.