← Back to UI screens
AI settings screen — mobile, corporate style
Theme

AI settings screen — mobile, corporate style

AI model and assistant settings screen for a mobile 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). Corporate style: IBM Plex Sans, a dark brand-coloured sidebar, 4px corners and subtle shadows. 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
Mobile
Style
Corporate
Product (fictional)
Lumen Desk
Category
AI

Spec

Colours (light)
background #f9fdff · surface #e8f1f6 · text #121d22 · muted #58666d · primary #0080a9 · accent #5769ca
Colours (dark)
background #10171a · surface #1d262b · text #eceff0 · muted #a8b3b9 · primary #2bc5ff · accent #a2b5ff
Fonts
IBM Plex Sans (headings and body), JetBrains Mono (code) · Google Fonts, under their own licences
Light and dark
Both included; follows the system setting
ai-settingsmobileaisidebar-navsettingstabsradioapi-keystableusage-meterprogressslidertogglevoiceai
AI

Build this with your AI

Fonts: IBM Plex Sans (Google Fonts)

Writing about this screen?

More ai settings screens

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