AI DesignCatalog Interface references for AI builds

SaaS · Product Dashboards

Deskline · Support Queue

Deskline · Support Queue, a product dashboards interface reference with an AI-ready brief and standalone HTML.

SaaS Product Dashboards Deskline Support Queue Grok 4.6
AI-guide URL — send this to your coding agent
…
The agent fetches ai-guide.md from this folder and studies the preview.png to reproduce the design.

00 Design notes

This is a landscape, desktop-first layout from the SaaS · Product Dashboards group. Visually, the palette is anchored by #fff, #12946a, #e7e5e4; a type scale up to 106px; corner radii from 2 to 99px.

01 Design tokens · auto-extracted

ColorHexOccurrences
—#fff74
—#12946a13
—#e7e5e412
—#38bdf812
—#15995711
—#78716c11
—#2a2a3011
—#e8b86d10
—#fffaf210
—#ddd4c410
ShapeValueUse
radii2, 3, 4, 5, 6, 7, 8, 9, 10, 12, … (+6 more) pxborder radii in source

02 AI-ready brief

Use “Deskline · Support Queue” as the visual direction for this interface. It belongs to SaaS / Product Dashboards. Study the reference for its hierarchy, typography, color system, spacing, density, border treatment, and interaction vocabulary. Adapt those principles to my product and content—do not copy the sample brand or wording. If I provide an HTML export of the reference, inspect its inline computed CSS, embedded fonts, and asset data for exact visual values; treat it as an implementation reference, not production-ready source. Keep the result responsive, accessible, and production-ready.
ai-guide.md

03 Where the design lives

Full-size preview:
preview.png (720px, lossless)

Detail page:
index.html

The agent brief is in ai-guide.md — paste it (or this URL) into your coding
agent and it can reproduce the direction in any stack.
ai-guide.md