← Back to UI screens
Security dashboard screen — web, monochrome style
Theme

Security dashboard screen — web, monochrome style

Security vulnerabilities dashboard screen for a web app, designed for Wardline, a fictional developer product. Shows open findings by severity (critical/high/medium/low donut), opened-vs-resolved trend, compliance scores, an open-findings table with assets and advisory ids, and live alerts. Monochrome style: pure greyscale, Geist, black primary actions and flat surfaces. Comes with the full HTML and a DESIGN.md with light and dark colour tokens.

Open live HTML ↗ Download DESIGN.md
Pattern
Security dashboard
Device
Web
Style
Monochrome
Product (fictional)
Wardline
Category
Developer

Spec

Colours (light)
background #ffffff · surface #fafafa · text #111111 · muted #666666 · primary #111111 · accent #444444
Colours (dark)
background #0a0a0a · surface #161616 · text #f2f2f2 · muted #a0a0a0 · primary #f2f2f2 · accent #c8c8c8
Fonts
Geist (headings and body), JetBrains Mono (code) · Google Fonts, under their own licences
Light and dark
Both included; follows the system setting
security-dashboardwebdevelopersidebar-navkpidonut-chartline-charttableseverity-badgeprogress-ringalertssegmented-controldashboard
AI

Build this with your AI

Fonts: Geist (Google Fonts)

Writing about this screen?

More security dashboard screens

Security vulnerabilities dashboard — web, minimal (Wardline)
web · minimal
Security vulnerabilities dashboard — web, editorial (Wardline)
web · editorial
Security vulnerabilities dashboard — web, brutalist (Wardline)
web · brutalist
Security vulnerabilities dashboard — web, luxury (Wardline)
web · luxury
Security vulnerabilities dashboard — web, playful (Wardline)
web · playful
Security vulnerabilities dashboard — web, corporate (Wardline)
web · corporate
Security vulnerabilities dashboard — web, retro (Wardline)
web · retro
Security vulnerabilities dashboard — mobile, monochrome (Wardline)
mobile · monochrome
Building with an AI coding agent? Every screen here is also in the free Made Good Designs MCP server: ask Claude, Cursor or ChatGPT to search_ui_screens (e.g. “billing settings, editorial style”), get_ui_flow for a whole journey, and get_ui_screen_code to pull the HTML and DESIGN.md straight into your project.

Save to board