Every component and token a labs app can use. Import from @deepgram/labs-ui — never rebuild these.
Every value below is read live from the token it names. Change tokens.css and this page changes with it.
--backgroundThe ground. Near-black with a faint cool cast.
--cardPanels, barely lifted off the ground.
--mutedRaised surfaces, inset wells.
--borderHairlines. Never a bevel.
--foregroundBody text. Cool paper, never pure white.
--muted-foregroundSecondary text, captions.
--primaryBrand green. A signal — focus, live, active. Never a large fill.
--secondaryDesaturated teal. Micro-labels and section markers.
--signalOne warm accent, spent once per screen.
--destructiveErrors and destructive actions.
Five hues that actually separate. A monotone ramp cannot distinguish five series on one chart.
--chart-1--chart-2--chart-3--chart-4--chart-5Every variant and size. Use these — a labs app should never define its own button.
Headings are styled globally. Set the text and leave them alone.
H1 componentH2 componentH3 componentH4 componentThis is a paragraph of body text. It uses the P component for consistent spacing and styling throughout the application.
P componentSmall componentMuted text for secondary information
Muted componentconst code = "inline code example";Code componentInputs, feedback, and layout primitives, all from the shared package.
This is a card component with header and content sections.
This is a simple card with just content.
Content for Tab 1
Chat and agent primitives, once they settle.
When we integrate LLM features, we'll use Vercel AI Elements to power our conversational interfaces.
AI Elements is built on top of shadcn/ui and provides production-ready components for chat interfaces, streaming responses, and LLM interactions.