AI-Native UI

Also called: Conversational UI, Chat-first UI, GenAI interface

The prompt bar is the hero: a calm white canvas, a glowing composer, streaming answers, sparkle accents and agent cards.

“Prompt-first”Futuristic & TechEra: 2023 → todayCalmFriendlyTechy

Open full screen ↗

ai-native-ui / landingEN

ai-native-ui / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm10pxRadius md14pxRadius lg20pxRadius xl28pxDensity×1.1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

prompt bar heroglowing composerstreaming text caretsparkle gradient ✦agent cards with statuschat thread layoutsuggestion chipsroomy warm white

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

Not to be confused with

Minimal & Direct →Minimal Direct is a sparse marketing landing pattern; AI-Native is a conversational product UI with a glowing composer, streaming answers and agent cards.Aurora UI →Aurora fills a dark background with blurred light; AI-Native stays white and uses the gradient only as a small glow around the prompt and on ✦ sparkles.Voice-First Multimodal →Voice-first centres a listening orb and waveform; AI-Native centres a typed prompt bar and a text chat thread.

On mobile

Home is the conversation: big greeting, suggestion cards and a composer docked above the keyboard instead of a tab bar. Keep the glow to one static blurred layer behind the composer, and stream text without animating layout.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinGeist · 400/500/600

The quick brown fox

Heading · ThaiAnuphan · 400/500/600

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinGeist · 400/500

Clear words make shared decisions.

Body · ThaiAnuphan · 300/400/500

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 10px · md 14px · lg 20px · xl 28px · pill 999px`
Border	`1px`
Shadow	`0 10px 30px -14px rgba(60,40,140,0.20)`
Display	`clamp(2.6rem, 5.6vw, 4.5rem)`
Motion	`260ms cubic-bezier(.2,.8,.2,1)`
Density	`×1.1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · AI-Native UI (ai-native-ui) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: 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
 */
:root {
  --radius: 20px;
  --background: #FBFAF8;
  --foreground: #1C1B22;
  --card: #FFFFFF;
  --card-foreground: #1C1B22;
  --popover: #FFFFFF;
  --popover-foreground: #1C1B22;
  --primary: #5B3DF5;
  --primary-foreground: #FFFFFF;
  --secondary: #EEEAFF;
  --secondary-foreground: #3B26B8;
  --muted: #F4F2EE;
  --muted-foreground: #5F5B6B;
  --accent: #F4F2EE;
  --accent-foreground: #1C1B22;
  --destructive: #D33F5C;
  --border: #E7E4EC;
  --input: #E7E4EC;
  --ring: #5B3DF5;
  --chart-1: #5B3DF5;
  --chart-2: #3E8BFF;
  --chart-3: #D9468F;
  --chart-4: #F29A3A;
  --chart-5: #16A37B;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #1C1B22;
  --sidebar-primary: #5B3DF5;
  --sidebar-primary-foreground: #FFFFFF;
  --sidebar-accent: #F4F2EE;
  --sidebar-accent-foreground: #1C1B22;
  --sidebar-border: #E7E4EC;
  --sidebar-ring: #5B3DF5;
}

.dark {
  --background: #131218;
  --foreground: #F1EFF7;
  --card: #1C1B23;
  --card-foreground: #F1EFF7;
  --popover: #1C1B23;
  --popover-foreground: #F1EFF7;
  --primary: #A08CFF;
  --primary-foreground: #14102A;
  --secondary: #2B2645;
  --secondary-foreground: #DCD3FF;
  --muted: #25232E;
  --muted-foreground: #A9A4B8;
  --accent: #25232E;
  --accent-foreground: #F1EFF7;
  --destructive: #FF7088;
  --border: #2F2C3B;
  --input: #2F2C3B;
  --ring: #A08CFF;
  --chart-1: #A08CFF;
  --chart-2: #6FAEFF;
  --chart-3: #FF7DBE;
  --chart-4: #F7B266;
  --chart-5: #4CD49C;
  --sidebar: #1C1B23;
  --sidebar-foreground: #F1EFF7;
  --sidebar-primary: #A08CFF;
  --sidebar-primary-foreground: #14102A;
  --sidebar-accent: #25232E;
  --sidebar-accent-foreground: #F1EFF7;
  --sidebar-border: #2F2C3B;
  --sidebar-ring: #A08CFF;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · AI-Native UI (ai-native-ui) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: 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
 */
@theme {
  --color-bg: #FBFAF8;
  --color-surface: #FFFFFF;
  --color-surface-2: #F4F2EE;
  --color-text: #1C1B22;
  --color-text-muted: #5F5B6B;
  --color-primary: #5B3DF5;
  --color-on-primary: #FFFFFF;
  --color-secondary: #EEEAFF;
  --color-on-secondary: #3B26B8;
  --color-accent: #D9468F;
  --color-border: #E7E4EC;
  --color-success: #15885F;
  --color-warning: #A3620A;
  --color-danger: #D33F5C;
  --color-chart-1: #5B3DF5;
  --color-chart-2: #3E8BFF;
  --color-chart-3: #D9468F;
  --color-chart-4: #F29A3A;
  --color-chart-5: #16A37B;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(28,27,34,0.05);
  --shadow-md: 0 10px 30px -14px rgba(60,40,140,0.20);
  --shadow-lg: 0 28px 70px -24px rgba(91,61,245,0.32);
  --font-heading: "Geist", "Anuphan", system-ui, sans-serif;
  --font-body: "Geist", "Anuphan", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, "Anuphan", monospace;
}

.dark {
  --color-bg: #131218;
  --color-surface: #1C1B23;
  --color-surface-2: #25232E;
  --color-text: #F1EFF7;
  --color-text-muted: #A9A4B8;
  --color-primary: #A08CFF;
  --color-on-primary: #14102A;
  --color-secondary: #2B2645;
  --color-on-secondary: #DCD3FF;
  --color-accent: #FF7DBE;
  --color-border: #2F2C3B;
  --color-success: #4CD49C;
  --color-warning: #F2B45E;
  --color-danger: #FF7088;
  --color-chart-1: #A08CFF;
  --color-chart-2: #6FAEFF;
  --color-chart-3: #FF7DBE;
  --color-chart-4: #F7B266;
  --color-chart-5: #4CD49C;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · AI-Native UI (ai-native-ui). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9804,
            0.9725
          ],
          "hex": "#fbfaf8"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.949,
            0.9333
          ],
          "hex": "#f4f2ee"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.1059,
            0.1333
          ],
          "hex": "#1c1b22"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3725,
            0.3569,
            0.4196
          ],
          "hex": "#5f5b6b"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.2392,
            0.9608
          ],
          "hex": "#5b3df5"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9333,
            0.9176,
            1
          ],
          "hex": "#eeeaff"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.149,
            0.7216
          ],
          "hex": "#3b26b8"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.2745,
            0.5608
          ],
          "hex": "#d9468f"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9059,
            0.8941,
            0.9255
          ],
          "hex": "#e7e4ec"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0824,
            0.5333,
            0.3725
          ],
          "hex": "#15885f"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.3843,
            0.0392
          ],
          "hex": "#a3620a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.2471,
            0.3608
          ],
          "hex": "#d33f5c"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.2392,
            0.9608
          ],
          "hex": "#5b3df5"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2431,
            0.5451,
            1
          ],
          "hex": "#3e8bff"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.2745,
            0.5608
          ],
          "hex": "#d9468f"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.6039,
            0.2275
          ],
          "hex": "#f29a3a"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.6392,
            0.4824
          ],
          "hex": "#16a37b"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0745,
            0.0706,
            0.0941
          ],
          "hex": "#131218"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.1059,
            0.1373
          ],
          "hex": "#1c1b23"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1451,
            0.1373,
            0.1804
          ],
          "hex": "#25232e"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9451,
            0.9373,
            0.9686
          ],
          "hex": "#f1eff7"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6627,
            0.6431,
            0.7216
          ],
          "hex": "#a9a4b8"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6275,
            0.549,
            1
          ],
          "hex": "#a08cff"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0627,
            0.1647
          ],
          "hex": "#14102a"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1686,
            0.149,
            0.2706
          ],
          "hex": "#2b2645"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8627,
            0.8275,
            1
          ],
          "hex": "#dcd3ff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4902,
            0.7451
          ],
          "hex": "#ff7dbe"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.1725,
            0.2314
          ],
          "hex": "#2f2c3b"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.8314,
            0.6118
          ],
          "hex": "#4cd49c"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.7059,
            0.3686
          ],
          "hex": "#f2b45e"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4392,
            0.5333
          ],
          "hex": "#ff7088"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6275,
            0.549,
            1
          ],
          "hex": "#a08cff"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4353,
            0.6824,
            1
          ],
          "hex": "#6faeff"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4902,
            0.7451
          ],
          "hex": "#ff7dbe"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.698,
            0.4
          ],
          "hex": "#f7b266"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.298,
            0.8314,
            0.6118
          ],
          "hex": "#4cd49c"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 14,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 20,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 28,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1098,
              0.1059,
              0.1333
            ],
            "hex": "#1c1b22",
            "alpha": 0.05
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2353,
              0.1569,
              0.549
            ],
            "hex": "#3c288c",
            "alpha": 0.2
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 10,
            "unit": "px"
          },
          "blur": {
            "value": 30,
            "unit": "px"
          },
          "spread": {
            "value": -14,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.3569,
              0.2392,
              0.9608
            ],
            "hex": "#5b3df5",
            "alpha": 0.32
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 28,
            "unit": "px"
          },
          "blur": {
            "value": 70,
            "unit": "px"
          },
          "spread": {
            "value": -24,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Geist",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Geist",
        "Anuphan",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "Geist Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Anuphan",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 500
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 260,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.2,
      0.8,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 2
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!