Design system
Atom + layout gallery. Left column = data-theme="light", right
column = data-theme="dark". This page is M1-only and will be
removed before ship.
Button
Badge
Pill (eyebrow)
Card
Static card
No hover lift. Frosted surface with token-driven border.
Hoverable card
Lifts translateY(-6px) with strengthened border + md shadow.
Static card
No hover lift. Frosted surface with token-driven border.
Hoverable card
Lifts translateY(-6px) with strengthened border + md shadow.
Avatar
AK AK Logo
Zybo AI 
Zybo AI Zybo AI Zybo AI Zybo AI Zybo AI CodeBlock
// Drop the widget on any page
<script src="https://widget.zybo.ai/ai-agent-widget.js"
data-org="zybo"
data-theme="auto"
defer></script>// Drop the widget on any page
<script src="https://widget.zybo.ai/ai-agent-widget.js"
data-org="zybo"
data-theme="auto"
defer></script>FAQItem
How does the AI know my product?
Index your help center, docs, and any URL. The bot then cites passages on every reply.
Can I keep my agents in their existing tools?
Yes — webhooks + Slack mirroring are first-class. We also have a native inbox if you want one.
How does the AI know my product?
Index your help center, docs, and any URL. The bot then cites passages on every reply.
Can I keep my agents in their existing tools?
Yes — webhooks + Slack mirroring are first-class. We also have a native inbox if you want one.
ThemeToggle (standalone)
Header and Footer are rendered globally by BaseLayout, so
they appear at the top + bottom of this page. Scroll up/down to verify
blur, sticky behavior, mobile menu, footer columns, and socials.