# Style Studio Style your AVCodex agent to match your integrator's brand, your client's brand, or the look of the room it's running in. Describe what you want in plain English, and The Alchemist generates the CSS. --- Style Studio is a full-screen design environment in the AVCodex Builder where you customize the look of your agent's chat interface. Two paths: tell The Alchemist what you want and let it generate a complete theme, or write CSS by hand. The studio drives over 50 CSS custom properties controlling colors, typography, bubble shapes, animations, and more. This matters when an agent is sitting on an integrator's portal alongside their other tools, when it's embedded inside a client's branded room-support page, or when you want a programmer-facing internal tool to look obviously different from a customer-facing one. ## How It Works Style Studio pairs a live chat preview with The Alchemist. You describe the visual style you want, and The Alchemist generates CSS that targets every visual aspect of the chat interface. ``` You: "Match our integrator brand: deep navy, brushed-steel grays, technical sans-serif" | The Alchemist generates CSS targeting: --chat-font-family, --chat-bubble-radius, --chat-user-bubble-bg, --chat-assistant-bubble-bg, --chat-input-bg, --chat-send-btn-bg, ... | Live preview updates instantly ``` The Alchemist sees a **sprite sheet** of every chat UI element (welcome screen, user messages, assistant messages with markdown, tool cards, web sources, image generation, voice, error states, typing indicators, input area, and standalone tools) so it understands exactly what it is styling. With that visual context, it makes informed calls on color contrast, spacing, and typography across each element type. ## Getting Started **1. Open Style Studio** Open your agent in the Builder and click the **Style** tab. **2. Describe Your Style** Open The Alchemist panel and describe the look you want. Be specific about colors, typography, mood, or reference a brand. Examples: - "Minimal and clean. Lots of whitespace, soft grays, Inter font. Should feel like a technical reference document, not a marketing site." - "Match our integrator brand: navy blue (#1a237e), gold accents, serif headings." - "Match a Q-SYS Designer aesthetic. Dark UI, technical typography, sharp corners." - "Internal programmer tool. Dark mode, monospace, terminal feel." **3. Iterate** The Alchemist supports multi-turn conversation. Ask for changes: - "Make the user bubbles more rounded." - "Switch to a darker background." - "Add a subtle glow to the send button." Each iteration builds on the previous CSS, so changes are cumulative. **4. Save** Changes auto-save after 1.5 seconds of inactivity. CSS, animation config, and welcome background preset all persist automatically. ## What You Can Customize Style Studio drives the chat interface through CSS custom properties. Major categories: | Category | Properties | Examples | |----------|------------|----------| | **Typography** | `--chat-font-family`, `--chat-font-size` | Google Fonts, system fonts, size scaling | | **User bubbles** | `--chat-user-bubble-bg`, `--chat-user-bubble-color`, radius, padding, border, shadow | Gradients, solid colors, rounded or sharp corners | | **Assistant bubbles** | `--chat-assistant-bubble-bg`, `--chat-assistant-bubble-color`, radius, padding, border, shadow | Independent styling from user bubbles | | **Input area** | `--chat-input-bg`, `--chat-input-color`, `--chat-input-radius`, `--chat-input-area-bg` | Footer background, input field styling | | **Send button** | `--chat-send-btn-bg`, `--chat-send-btn-color`, `--chat-send-btn-radius`, size, shadow | Circle, rounded square, custom colors | | **Code blocks** | `--chat-code-bg`, `--chat-code-color`, syntax highlighting variables | Dark or light code themes, custom syntax colors | | **Welcome screen** | Background preset selection | Retro grid, aurora, particles, gradient flow, mesh gradient | ## Animation Config The Alchemist can also recommend streaming-text animation settings alongside the CSS. These control how new text appears as the agent responds: | Setting | Options | Description | |---------|---------|-------------| | **Type** | fade, blur, slideUp, slideDown | How tokens appear | | **Duration** | 50-500ms | Speed of the animation | | **Tokenize** | word, char | Animate by word or by character | Animation settings appear as a metadata badge in Style Studio when The Alchemist recommends them. They save to your agent's capabilities automatically. ## Welcome Background Presets The Alchemist can suggest a background animation for the welcome screen: - **Retro Grid**: Perspective grid lines that recede into the distance. - **Aurora**: Soft, shifting aurora borealis gradients. - **Particles**: Floating particle field. - **Gradient Flow**: Smooth flowing color gradients. - **Mesh Gradient**: Organic mesh gradient blobs. ## CSS Security and Scoping Custom CSS goes through two safety layers before it reaches the browser. ### Sanitization All CSS is sanitized to strip dangerous patterns: - `@import` directives (no loading external stylesheets). - `javascript:` URLs, `expression()`, and `behavior:` (legacy XSS vectors). - Event handler attributes and script tags. - Non-image data URIs (`data:image/*` is allowed for backgrounds). - External URLs not on the Google Fonts allowlist. ### Scoping Every CSS rule is automatically prefixed with `[data-app-id=""]` so your custom styles only affect your agent. That means: - Your CSS cannot leak into the host page when embedded as a widget on an integrator's site. - Multiple agents on the same page cannot interfere with each other. - `@keyframes` and `@font-face` declarations stay global (they have to). - `@media` and `@supports` queries have their inner selectors scoped. > **Note:** You never write the scoping selector yourself. Write CSS as if your rules are already inside the chat container. The scoper handles the rest. ## Layout Archetypes The Alchemist works from five layout archetypes when generating styles: 1. **Conversational**: Traditional chat bubbles, rounded corners, alternating alignment. 2. **Document-style**: Full-width assistant messages, minimal borders, reading-focused (good for design-engineer agents pulling spec answers from manufacturer PDFs). 3. **Outlined / Card**: Visible borders, card-like bubbles, structured feel (good for technical reference agents). 4. **Hybrid**: Conversational user bubbles paired with document-style assistant responses. 5. **Symmetric**: Both sides centered, uniform styling, minimal visual hierarchy. The Alchemist picks an archetype based on keywords in your description and can switch on request. ## Google Fonts The Alchemist has access to a curated list of Google Fonts and will include `@font-face` declarations in the generated CSS. Fonts load from `fonts.googleapis.com` and `fonts.gstatic.com`, which are the only external domains allowed in custom CSS. > **Warning:** The Alchemist avoids display or decorative fonts (Playfair Display, DM Serif Display, etc.) as the primary chat font. They're built for headings, not long-form reading, and they hurt readability in chat. ## Tips for Better Results 1. **Be specific about mood**: "Technical and trustworthy" gives better results than "make it look good". 2. **Reference brands or AV products**: "Match a Q-SYS Designer aesthetic" or "Looks like Crestron Construct" gives The Alchemist strong direction. 3. **Provide hex codes**: If you have brand colors (your integrator's, or a client's), include them. 4. **Iterate incrementally**: Start broad, then refine details. 5. **Ask about dark mode**: The Alchemist can generate styles that work in both light and dark modes (good for techs working in dim AV racks or broadcast control rooms). ## How It Integrates Custom CSS from Style Studio saves to your agent's `customCss` field. When a user loads the agent: 1. The CSS is sanitized and scoped server-side. 2. A `