Styling Overview

CUSTOMIZE NOBI TO MATCH YOUR BRAND

Styling Overview

This page explains how to style any Nobi component in a predictable way, what to expect from the rendering model, and a few copy‑paste recipes. Keep it simple: start with tokens (CSS variables), then add classes, and only use per‑instance overrides when needed.

How styling works

  • Nobi renders via a custom element, e.g. <nobi-assistant variant="…"> so your site’s CSS can target elements directly.
  • Because it’s a normal DOM node, regular cascade and specificity rules apply. Prefer low‑specificity overrides and CSS variables for maintainability.
Recommended order of operations
  1. CSS variables (tokens) for brand look & feel.
  1. Global classes for shared polish/behavior.
  1. Per‑instance id for one‑off placements (hero, header, etc.).

Tokens (CSS variables)

Here’s an example of how to define elements once at :root for a site‑wide theme (note, not all available variables are listed here, for all variables see the documentation for the component you wish to style).
:root {
	/* Colors */
	--nobi-button-background: #0a5cff;
	--nobi-button-text-color: #fff;
	--nobi-button-hover-background: #0849c7;
	--nobi-button-hover-text-color: #fff;
	...
}
Why tokens? They let you theme all current and future components consistently without chasing selectors.

Global classes (add shared polish)

If you’d like to add multiple custom styles to a single element, you can target class names rather than defining individual variables:
.nobi-button { transition: all .2s ease; font-weight: 600; }
.nobi-text-button { border-bottom: 1px dotted currentColor; }
See component-specific documentation to identify available class names for targeting.

Per‑instance overrides (one‑offs)

Give an element an id when a single placement needs different styling:
<nobi-assistant id="pdp-ai-cta" variant="button" button-label="Shop With AI"></nobi-assistant>
#pdp-ai-cta { font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.12); }