When Caffeine builds your app, a dedicated Design agent runs before any frontend code is written. It creates a design brief — a structured document called DESIGN.md — that defines how your app should look. Every frontend agent in the build follows this brief, which is why your app's visual style stays consistent across pages and components.
What the design brief contains
The design brief captures a complete visual system for your app:
- Visual theme and atmosphere — the overall mood, density, and design philosophy. For example: a dark interface with content emerging from a near-black background, or a light, airy layout with generous whitespace.
- Color palette with roles — not just color values, but what each color is for: backgrounds, primary text, accents, status indicators, and how they relate to each other.
- Typography rules — font families, a full size hierarchy (display, heading, body, caption, label), weights, and line heights.
- Component styling — how buttons, cards, inputs, badges, and navigation should look, including hover states and border treatments.
- Layout principles — spacing system, grid rules, and whitespace philosophy.
- Do's and don'ts — explicit design guardrails and patterns to avoid.
How to influence the design
You can shape the design brief in several ways:
Describe the visual direction in your prompt. Be specific about the feeling you want:
- "Dark and minimal with a single accent color"
- "Warm and friendly with rounded corners and generous spacing"
- "High contrast, editorial, with bold typography"
- "Clean and professional with a data-dense layout"
The more specific you are about the visual direction, the closer the result will be to what you had in mind. You can describe colors, fonts, mood, density, and design philosophy — the Design agent picks up on all of these.
Specify exact colors or branding. If you have brand colors, include them:
- "Use #DDF730 as the primary accent color"
- "Dark background with white text and teal accents"
Custom colors you specify are applied to the full design system — every component picks them up automatically.
Modify the design brief after it's generated. The DESIGN.md file appears in your project's code after the first build. You can edit it directly — change colors, swap fonts, adjust spacing — and the next build will follow your changes.
Provide your own design brief. If you have a specific design system in mind, you can write your own DESIGN.md and upload it as a chat attachment before building. The Design agent will use it as the starting point instead of generating one from scratch.
Finding inspiration
If you're not sure how to describe the visual direction you want, awesome-design-md is a community-maintained collection of design briefs that capture different visual styles. Browsing through examples can help you find the vocabulary — color roles, typography hierarchies, spacing approaches, and component styling patterns.
You can also look at apps in the Caffeine App Market for visual inspiration and remix one that has a style you like as a starting point for your own project.
Frequently asked questions
Does every build create a new design brief?
The Design agent runs when a new app is created or when you request significant visual changes. For smaller updates — like changing a button label or adding a feature — the existing design brief is reused.
Can I use a specific font?
Yes. Ask for it by name in your prompt — "use Space Grotesk for headings." Caffeine has a set of bundled fonts that load instantly, and can also fall back to Google Fonts for typefaces not in the bundled set. See What Caffeine Can and Cannot Build for the full list of bundled fonts.
What if I don't describe any visual preferences?
The Design agent makes its own choices based on the type of app you're building. You'll get a coherent design system either way — describing your preferences just gives you more control over the direction.
Can I change the design after the app is built?
Yes. You can describe visual changes in the chat at any time — "make the background darker" or "switch to a warmer color palette" — and the AI will update the design brief and regenerate the affected components.