← Back to UI screens
AI settings screen — web, monochrome style
Theme

AI settings screen — web, monochrome style

AI model and assistant settings screen for a web app, designed for Lumen Desk, a fictional ai product. Shows default model and provider choice, a fallback model, masked provider API keys, a monthly usage meter with spend caps and alerts, and voice assistant options (voice, speed, wake word). 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
AI settings
Device
Web
Style
Monochrome
Product (fictional)
Lumen Desk
Category
AI

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
ai-settingswebaisidebar-navsettingstabsradioapi-keystableusage-meterprogressslidertogglevoiceai
AI

Build this with your AI

Fonts: Geist (Google Fonts)

Writing about this screen?

More ai settings screens

AI model and assistant settings — web, minimal (Lumen Desk)
web · minimal
AI model and assistant settings — web, editorial (Lumen Desk)
web · editorial
AI model and assistant settings — web, brutalist (Lumen Desk)
web · brutalist
AI model and assistant settings — web, luxury (Lumen Desk)
web · luxury
AI model and assistant settings — web, playful (Lumen Desk)
web · playful
AI model and assistant settings — web, corporate (Lumen Desk)
web · corporate
AI model and assistant settings — web, retro (Lumen Desk)
web · retro
AI model and assistant settings — mobile, monochrome (Lumen Desk)
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