build69
Sign inGet API key
build69  /  Components  /  Foundations  /  Colors

Colors

Color foundation: the complete build69 token palette and the per-theme accent variants. Browse the semantic tokens (primary/accent/status/chart/sidebar/surfaces), see how each accent theme (orange / blue / green / violet

View source← Back to catalog

Preview

Live · 2 stories
Accent ThemesOpen ↗
▸Why this is recommendedcolorsthemetokenspalette+5

Colors — accent themes.

Recommended for+14
  • ✓Looking up the right semantic token before writing a class
  • ✓Designing/auditing a new accent theme variant
  • ✓Sanity-checking a UI under all 5 themes side-by-side
Tags+6
colorsthemetokenspalettefoundationsdesign-systemswatchesaccentthemes
Features+4
  • Per-theme accent gallery: all 5 themes rendered simultaneously via per-block data-theme scoping
  • Live UI samples (primary button, accent chip, link, outline) per theme
  • Core palette showcase — surfaces, text/lines, status (+ soft), chart, sidebar
  • Each swatch labelled with its CSS variable name (e.g. --primary, --b69-accent-2)
Not recommended for−2
  • ✕End-user-facing pages (this is internal documentation)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Colors" })

Usage

// Switch theme globally
<html data-theme="rose"> ... </html>

// Use semantic tokens in components
<button className="bg-primary text-primary-foreground">…</button>
<div className="border border-success bg-success/10 text-success">…</div>

// Get the full theme stylesheet for a new project (via MCP):
//   get_theme({ format: 'css' })

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

No documented props — Colors is composed rather than configured. See the source for its full signature.

Related

Platform docsAll componentsSource files