Skip to content
Components
/
AI screens
Dark

AI screens

Eleven screens covering a whole assistant: an empty prompt, a streaming answer, cited sources, an image result, and the states a model forces you to handle. Every control is an instance of a component you already have, so one token change moves all eleven.

Preview

Eleven screens covering a whole assistant: an empty prompt, a streaming answer, cited sources, an image result, and the states a model forces you to handle. Each screen exists twice in the file, once with Color Tokens on Light and once on Dark, so the theme button swaps an export rather than restyling anything.

AI screens, 11 screens
393 x 852 each, Light and Dark
AI app, new chat screen, lightAI app, new chat screen, dark
New chat
AI app, tools screen, lightAI app, tools screen, dark
Tools
AI app, thread screen, lightAI app, thread screen, dark
Thread
AI app, generating screen, lightAI app, generating screen, dark
Generating
AI app, image screen, lightAI app, image screen, dark
Image
AI app, attachment screen, lightAI app, attachment screen, dark
Attachment
AI app, error screen, lightAI app, error screen, dark
Error
AI app, history screen, lightAI app, history screen, dark
History
AI app, manage chat screen, lightAI app, manage chat screen, dark
Manage chat
AI app, projects screen, lightAI app, projects screen, dark
Projects
AI app, instructions screen, lightAI app, instructions screen, dark
Instructions

The Light row and the Dark row are the same eleven frames with one variable mode changed, not two separate builds.

What it is built from

This is the whole point of the set. The eleven screens place 128 instances, 83 of them Appetite components across 9 distinct components and 45 of them Lucide icons. Two components, Message and Prompt Composer, carry the assistant itself.

Component
Placed
Where it appears
21
Every screen except Projects and Instructions
20
Thread, Generating, Image, Attachment, Error, History, Manage chat
15
Every screen, twice on the four with an overlay
10
Every screen except Instructions
10
New chat, Tools, Projects, Instructions
2
Projects, Instructions
2
Tools, Manage chat
2
History, Manage chat
1
Instructions
45
12 distinct icons, one stroke weight

Everything else is layout and text. This set draws more locally than the other two: the model switcher under the header, the icon tile on New chat and Projects, the project and file rows, the source cards and the figure table inside a reply. The switcher and the rows duplicate Dropdown and List, and are the two worth folding back in.

Overlays and scrims

Four of the eleven screens are another screen with something laid over it. Each overlay is an instance sitting on a local scrim, and each brings its own status bar, which is why those screens count two.

Overlay
Screens
What it opens onto
Tools, Manage chat
New chat, and the thread with the drawer already open
History, Manage chat
The thread, pushed behind a scrim
Instructions
The project screen

Manage chat is the deepest screen in the set: a thread, a drawer over it and a menu over that, 16 instances placed and 43 nested. It is the one to look at when you want to know whether the layering holds.

Tokens

No screen carries a raw colour, a raw radius or a raw type size. Every frame sits in a variable mode and reads down through the same six collections as every component.

Collection
Modes
What the screens take from it
Foundations
Default
The primitive ramps every other collection points at
Color Tokens
Light, Dark
Every surface, text and border colour on the screens
Platform
ios-md, ios-lg, android
Frame width, radius and inset. The screens sit on ios-md
Typography
Default
The type ramp behind every label on every screen
Platform Bridge
Brand, System
Apple and Material roles, unused here but reachable
Motion
Default
Durations, curves and springs for the transitions between screens

Every AI frame is pinned to Color Tokens Light or Dark and Platform ios-md. The dark row is the light row with one mode changed, which is why the two exports agree line for line. Rebrand at Colors and all eleven screens follow.