# AI-Native UI > The prompt bar is the hero: a calm white canvas, a glowing composer, streaming answers, sparkle accents and agent cards. - Nickname: Prompt-first - Also called: Conversational UI, Chat-first UI, GenAI interface - Category: Futuristic & Tech - Moods: Calm, Friendly, Techy - Industries: AI Products, SaaS, Startup & Tech, Education, Corporate & B2B - Style page: https://uilingo.dev/styles/ai-native-ui/ AI-Native UI is built around a conversation instead of pages of menus. The main object is a large, rounded composer with a soft blue-violet-pink glow behind it; answers stream in with a blinking caret and rich inline blocks (numbers, charts, sources); work is delegated to “agent” cards that show status and progress. Everything else is quiet and roomy — warm white surfaces, generous radius, light weights — with a single sparkle gradient (✦) reserved for AI moments so users always know where the model is speaking. ## Best for - AI assistants, copilots and agent platforms - Search and knowledge tools - Support and customer-service products - Any product adding a “just ask” entry point ## Avoid for - Data-entry-heavy back offices where forms are faster - Brands that must feel loud, retro or decorative - Products with no real language model behind them (it over-promises) ## Do - Make the composer the largest interactive element (64–68px tall, 28px radius) - Reserve the blue→violet→pink gradient for AI-generated moments only - Stream answers with a 2px blinking caret and show tool/agent steps as small chips - Offer 3–4 suggestion chips so the empty state is never blank ## Don't - Don’t bury the prompt bar in a sidebar or modal - Don’t paint whole pages with the gradient — it is an accent, not a background - Don’t use robot mascots or circuit-board clichés - Don’t fake certainty: show sources and a “can make mistakes” note ## Audit Passed after 2 rounds · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "AI-Native UI" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line The prompt bar is the hero: a calm white canvas, a glowing composer, streaming answers, sparkle accents and agent cards. Design keywords: prompt bar hero, glowing composer, streaming text caret, sparkle gradient ✦, agent cards with status, chat thread layout, suggestion chips, roomy warm white. ## Visual language A calm, roomy, warm-white product (#FBFAF8) organised around a conversation. The single most important object is a large rounded prompt composer with a soft blue→violet→pink→amber glow behind it. Answers stream in with a blinking caret and contain rich inline blocks (KPI cards, a chart, flagged items, source/step chips); delegated work appears as agent cards with status and progress. Type is neutral and light (Geist 400–500), corners are generous (14–28px), shadows are soft lavender, and the sparkle gradient (✦) is reserved strictly for AI moments. ## Signature details (must be visible) - The composer: 64–68px tall, 28px radius, white, 1px #E7E4EC border, large lavender shadow, plus a halo behind it: conic-gradient(#4F7BFF, #8B5CF6, #D9468F, #F29A3A) on a pseudo-element at inset −2px, filter blur(22px), opacity .4 - Landing hero recipe: 3–4 suggestion chips sit ABOVE the prompt bar; the bar holds ✦ + a realistic example prompt + a 2px blinking caret on the left and a labelled primary pill (CTA text + ↑) on the right; BELOW it a small ' can make mistakes. Check important info.' note, followed by the secondary CTA as a text link - Named AI colours (decorative extras, exempt from the token-only rule): --ai-1 #4F7BFF, --ai-2 #8B5CF6, --ai-3 #D9468F (= accent), --ai-4 #F29A3A; AI gradient = linear-gradient(100deg, --ai-1, --ai-2 40%, --ai-3 75%, --ai-4); primary-button gradient end #7B4DF7; lavender wash --ai-soft = linear-gradient(135deg, #EEF2FF, #F3EEFF 50%, #FFEFF6) - The AI gradient is used only for ✦ sparkles, the assistant avatar orb, the mobile greeting text, ONE key phrase of the hero headline, 'Pro' badges and active-agent borders - Streaming: a 2px violet caret blinking at 1.05s steps(); tool steps as small grey chips with check icons and one spinning loader - Hero product visual = a chat thread, not a widget grid: right-aligned user bubble, then a gradient orb with the streamed answer — tool-step chips, inline KPI cards, a small line chart, a follow-up question with caret, and numbered source chips - Agent cards: a card shows EITHER the green 'ready' dot (idle feature card) OR a status badge (Running / Needs review / Idle) plus a gradient progress bar (active agent) — never both; the live agent gets a 1.5px gradient border over the lavender wash - Chat layout: right-aligned grey user bubble (22px radius, 6px tail corner), assistant messages unboxed beside a 34px gradient orb, max width ~760px ## Design tokens — use these exact values Colours (light mode): - background #FBFAF8 - surface #FFFFFF - surface-2 #F4F2EE - text #1C1B22 - text-muted #5F5B6B - primary #5B3DF5 (text on it #FFFFFF) - secondary #EEEAFF (text on it #3B26B8) - accent #D9468F - border #E7E4EC - success #15885F · warning #A3620A · danger #D33F5C - chart series #5B3DF5, #3E8BFF, #D9468F, #F29A3A, #16A37B Radius: sm 10px, md 14px, lg 20px, xl 28px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(28,27,34,0.05)`, md `0 10px 30px -14px rgba(60,40,140,0.20)`, lg `0 28px 70px -24px rgba(91,61,245,0.32)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.1 density Motion: 260ms cubic-bezier(.2,.8,.2,1) ## Typography (Latin + Thai) - Headings: Geist 400/500/600 with Thai fallback Anuphan 400/500/600 - Body: Geist 400/500 with Thai fallback Anuphan 300/400/500 - Mono: Geist Mono - Google Fonts URL: https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&family=Anuphan:wght@300;400;500;600&display=swap - CSS stacks: heading `"Geist", "Anuphan", system-ui, sans-serif`; body `"Geist", "Anuphan", system-ui, sans-serif`; mono `"Geist Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace` (the mono font has no Thai glyphs, so Thai inside mono labels falls back to Anuphan — drop uppercase and tracking there) — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 5.6vw, 4.5rem), heading weight 500, heading tracking -0.035em (Latin only), sentence-case labels. - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Anuphan is a modern loopless Thai with open, friendly geometry that sits naturally beside Geist’s neutral, slightly rounded grotesque in mixed Thai-English chat. ## Components - Primary button: violet gradient pill (#5B3DF5 → #7B4DF7), white text; hover adds a 4px lavender ring; send button is a 40px violet circle with an up arrow - Secondary button: white pill with hairline and tiny shadow; ghost icon buttons for copy / like / retry under answers - Eyebrow: white pill with hairline and a gradient ✦ - Feature cards (idle agents): white, 20px radius, lavender icon tile, a green 'ready' dot in the top-right and no badge or progress; hover lifts 2px. 6 cards form a 3 × 2 grid at ≥960px - Inputs: white, 14px radius; focus = violet-tinted border + 4px rgba(139,92,246,.12) ring - Chips: white with hairline; active chip = #EEEAFF fill with #3B26B8 text - Highlight / featured plan: --ai-soft lavender wash inside a 1.5px AI-gradient border - CTA: white card with a soft blurred conic glow under it; the email field and button sit in a composer-style 26px-radius container - Dashboard override: 3-pane workspace — threads sidebar with 'New chat', centre streamed answer with inline KPIs + chart + flagged list, docked composer, right rail of agent cards and activity - Mobile home override: gradient greeting, 'What can I help with?' subline, 2×2 suggestion cards, a working-agent card with shimmer lines, recent chats, and a docked chip row + pill composer on a solid-bg fade (linear-gradient(to top, bg 86%, transparent), 28px top padding) instead of a tab bar ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: centred headline with the product visual below it. Navigation: bar style. Sections in order: hero → logos → features → steps → showcase → testimonials → pricing → faq → cta. Feature section as grid. Landing: a centred hero — eyebrow, headline with one gradient key phrase, lead, suggestion chips, the glowing prompt bar, the 'can make mistakes' note + secondary text link — and a chat-thread product shot below. Then logos, agent-card features (3 × 2), steps, a showcase, testimonials, pricing with one gradient-bordered plan, FAQ and a CTA whose email field sits in a composer-style container with a soft glow. The dashboard is not a widget grid but a conversation: the answer *is* the report, with KPIs and charts rendered inline and agents working in a side rail. ## Content Use realistic product copy (fictional brand) suited to: AI assistants, copilots and agent platforms. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Make the composer the largest interactive element (64–68px tall, 28px radius) - Reserve the blue→violet→pink gradient for AI-generated moments only - Stream answers with a 2px blinking caret and show tool/agent steps as small chips - Offer 3–4 suggestion chips so the empty state is never blank ## Don't - Don’t bury the prompt bar in a sidebar or modal - Don’t paint whole pages with the gradient — it is an accent, not a background - Don’t use robot mascots or circuit-board clichés - Don’t fake certainty: show sources and a “can make mistakes” note - Hiding the prompt in a corner, modal or small search field - Painting backgrounds or big surfaces with the AI gradient — it is an accent for AI moments only - Robot mascots, circuit boards or neon sci-fi clichés - Dense widget-grid dashboards with no conversational entry - Presenting answers without steps, sources or a 'can make mistakes' note ## Stack notes One self-contained HTML file with a