What are the ChatGPT App UI guidelines?

The ChatGPT App UI guidelines are the rules that define how apps should look and behave inside a ChatGPT conversation. They cover layout, display modes, colors, typography, accessibility and more, so that every app feels like part of the same product.

When you build an app with Yavio you do not have to worry about applying these guidelines manually. Yavio templates and components already follow the official standards, so your app automatically behaves and looks the way the platform expects.

It is still helpful to understand why your app looks the way it does. Once you know the basic guidelines, the default Yavio layouts make more sense and are easier to fine tune. In the rest of this post we walk step by step through the main parts of the ChatGPT App guidelines.

How do ChatGPT App guidelines and Yavio work together?

The ChatGPT App guidelines define how apps should look and behave inside the ChatGPT interface. They cover the main display modes, the design system, and visual and accessibility rules.

Yavio builds directly on top of these rules. When you choose a template, define fields, or configure actions, Yavio turns those decisions into UI that already follows the guidelines. You focus on what your app does and what it shows, not on pixel level styling.

If you stay within Yavio components, you automatically stay within the ChatGPT App standards. That is why you rarely need to read the guidelines in detail, but it is useful to understand the building blocks.

What is the ChatGPT Apps design system?

ChatGPT provides a design system for apps, called the Apps SDK UI. It includes reusable components, spacing rules and design tokens that match the native ChatGPT look.

Developers can use these components directly with tools like Tailwind style utilities. Designers can use a matching Figma library to sketch out flows that look very close to the final in chat experience.

Yavio sits on top of this system. When you add a list, a button or a card in Yavio, you are effectively using these components without touching raw code or tokens. That is how Yavio apps feel native inside ChatGPT without extra design work.

Which display modes can my ChatGPT App use?

ChatGPT Apps appear in a few standard display modes. Each mode fits a different kind of task. Picking the right mode keeps the experience simple for users. Yavio chooses and combines these modes for you based on how your app responds.

How does inline mode work?

Inline mode is the default way an app appears. The content sits directly in the chat thread, above the model response. Users can see the app output, then read the follow up message from ChatGPT.

Inline content is meant to be lightweight. It should provide a clear result, a small set of actions, or a quick confirmation, while staying scannable among regular messages.

Every Yavio app surfaces its first result inline so users never lose the sense of chatting. From there, they can expand into richer modes when needed.

When is an inline card the right choice?

An inline card is a compact widget in the conversation that focuses on a single purpose.

Use an inline card when:

• There is one main decision or confirmation
• You need to show a small amount of structured data such as a summary, map snippet or status
• A self contained tool like an audio player or score display is enough

A typical card can include a title, a small body of content, and one or two primary actions at the bottom. It should not contain deep navigation, nested scrolling or multiple internal views. If you want tabs, multi step flows or long lists, it is better to use fullscreen.

In Yavio, many single result responses end up as inline cards. For example a booking confirmation or a generated plan with one button to refine or apply the result.

When is an inline carousel useful?

An inline carousel is a horizontal list of cards that lets users swipe through multiple options.

It works well when you:

• Show a small set of similar items such as restaurants, events or playlists
• Need images and a bit more metadata than a simple text list allows

Each item in the carousel usually has an image, a short title, one or two lines of key details, and often a single action button such as Book or Open. For clarity, carousels typically contain from three to eight items.

Yavio can present collections of results as a carousel when there are several comparable options. You decide which fields are most important; the ChatGPT UI handles the layout.

When should I use fullscreen mode?

Fullscreen mode is for richer tasks that do not fit into a single card. It opens a larger surface while the chat composer stays visible so users can keep talking to the app.

Use fullscreen when you:

• Need interactive content such as a map with pins or a complex editor
• Want users to browse detailed listings like property results or long menus
• Have multi step workflows that benefit from more space

The key principle is that the experience should still work with the system composer. Users should be able to type natural language prompts that drive tool calls, refine results or move to the next step.

When you configure a more complex flow in Yavio, the platform can use fullscreen internally so the experience stays clear and consistent.

When is picture in picture a good idea?

Picture in picture is a small floating window that stays visible while the user scrolls and chats. It is useful when an activity runs in parallel with the conversation.

Good fits for picture in picture include live games, quizzes, collaboration tools or learning sessions that update in response to chat. The widget can react to messages, continue rounds or refresh data while the user keeps typing.

Picture in picture should remain simple. It should not be overloaded with menus or static content that would be easier to handle in inline or fullscreen views.

How should a ChatGPT App look and feel?

The visual guidelines make sure that all apps feel like part of ChatGPT rather than separate products. They cover color, typography, spacing, icon style and imagery.

When you design within Yavio, these visual decisions are already aligned with ChatGPT. You still make choices about content and branding accents, but the base appearance stays consistent.

How should I use color in my app?

ChatGPT uses a system color palette so that text, backgrounds and structural elements feel coherent. Partner apps are expected to respect this palette.

You should:

• Use system colors for text, icons and dividers

• Use brand accent colors in places like primary buttons, badges and small highlights

• Avoid strong background colors, busy patterns and gradients behind text

Yavio lets you add branding in a controlled way, for example through a primary action color or icons, without overriding core system colors. That keeps your app recognisable without breaking the overall look.

How should typography and spacing work?

ChatGPT uses system fonts from each platform, such as SF Pro on iOS and Roboto on Android. Apps inherit this stack so everything stays readable and consistent.

Most content uses body and small body sizes with a modest hierarchy of headings. Custom fonts are not encouraged, even in fullscreen views, because they break visual continuity.

Spacing follows a standard grid. Cards and panels share similar padding, margins and corner radii, which makes scanning multiple responses much easier. Content is never cramped against edges or spread too far apart.

Yavio applies these font and spacing rules automatically so you do not need to manage line heights, sizes or padding in code.

How should icons and images be used?

Icons in ChatGPT are generally simple, monochrome and outlined. Partner apps can use system icons or create their own as long as they fit this style.

You do not need to embed your logo into each response. ChatGPT automatically adds your app name and logo label above the widget. Repeating logos inside the content can feel heavy and distracting.

Images should always respect the required aspect ratios so they do not stretch or distort. This matters especially in carousels and cards, where consistent shapes make the layout feel tidy.

Alt text for images is important both for accessibility and for users who rely on assistive technology. Yavio can help you attach descriptions to images you provide.

What does accessibility require from my ChatGPT App?

Accessibility is mandatory for ChatGPT Apps. The experience must work for as many people as possible, including users with visual or motor impairments.

This means:

• Text and background must meet at least WCAG AA contrast levels
• Layouts must support text size changes without breaking
• Interactive elements must be clearly labeled and reachable
• All meaningful images should have alt text

By building through Yavio you inherit many of these protections, since the components and color choices are aligned with accessibility rules from the start.

What is the takeaway for you when you build with Yavio?

You do not need to learn the full ChatGPT App guideline document before you can ship something useful. Yavio applies the standards for display modes, design system and visual behavior so your app is accepted and feels native.

Understanding the basic concepts still helps you make better decisions. You can decide when a simple inline card is enough, when a carousel gives more value, and when a richer fullscreen flow really improves the experience.

From there you can focus on what matters most: the logic, data and copy that make your app helpful inside ChatGPT. Yavio takes care of the scaffolding so you can move faster.

If you want to build your own app inside ChatGPT without worrying about UI rules, try Yavio to create and ship an app in minutes.