← Back to UI screens
AI workspace screen — web, editorial style
Theme

AI workspace screen — web, editorial style

AI generation workspace screen for a web app, designed for Lumen Desk, a fictional ai product. Shows a prompt and sources input panel with generation options, a generated market brief with inline citations, KPI cards and a table, a citations inspector and next-step actions (refine, export, share). Editorial style: warm paper tones, Instrument Serif headlines with Inter body text and tabular figures, square corners. Comes with the full HTML and a DESIGN.md with light and dark colour tokens.

Open live HTML ↗ Download DESIGN.md
Pattern
AI workspace
Device
Web
Style
Editorial
Product (fictional)
Lumen Desk
Category
AI

Spec

Colours (light)
background #fff9ed · surface #f9eedb · text #29200d · muted #6d624b · primary #ad3e35 · accent #009399
Colours (dark)
background #160f03 · surface #231a09 · text #f7f1e7 · muted #bbb09b · primary #f3897c · accent #44bfc6
Fonts
Instrument Serif (headings), Inter (body), JetBrains Mono (code) · Google Fonts, under their own licences
Light and dark
Both included; follows the system setting
ai-workspacewebaisidebar-navaiprompt-inputsourcestogglesegmented-controlcitationsinspectorkpitablenext-stepscomposer
AI

Build this with your AI

Fonts: Instrument Serif + Inter (Google Fonts)

Writing about this screen?

More ai workspace screens

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