BrainzLab UI

Unified design system for BrainzLab products with Phlex components and Tailwind CSS.

Quick Start

# Gemfile
gem "brainzlab-ui"

# In your view
<%= render Brainzlab::Components::Button.new(variant: :primary) { "Save" } %>

Installation

Add to your Gemfile:

# Local development (Docker)
if File.exist?("/brainzlab-ui")
  gem "brainzlab-ui", path: "/brainzlab-ui"
else
  gem "brainzlab-ui", "~> 0.1.0"
end

CSS Setup

Import the design system in your Tailwind CSS file:

/* app/assets/tailwind/application.css */
@import "brainzlab_ui/base";

/* Your project-specific overrides below */

Configuration

The design system follows Anthropic/Claude-inspired aesthetics with warm earth tones.

Design Tokens

Colors

Token	Value	Usage
--color-primary-500	#C77B58	Brand terracotta
--color-cream-50	#FAF9F7	Background
--color-ink-900	#3D3833	Text

Service & layer tokens

Each of the 16 platform services has a brand accent (--color-<service>, e.g. --color-signal, --color-vault), grouped by platform layer. Service landing pages and dashboards tint with the layer accent so the family stays coherent while staying layer-coded:

Layer	Token	Services
L5 — AI	--color-layer-ai	Synapse, Nexus
L4 — Hub	--color-layer-hub	Platform
L3 — Observability	--color-layer-obs	Signal, Beacon, Vision, Sentinel, Cortex, Dendrite, Nerve, Axon
L2 — Data	--color-layer-data	Recall, Reflex, Pulse, Flux
L1 — Foundation	--color-layer-foundation	Vault

Charts and dashboards use the categorical data-viz palette --color-viz-1 … --color-viz-8.

Typography

Font	Stack	Usage
Sans	Inter, system-ui	Body text
Serif	Source Serif 4, Georgia	Headlines
Mono	JetBrains Mono, ui-monospace	Code

Usage

Phlex Components

<%= render Brainzlab::Components::Button.new(variant: :primary) { "Save" } %>
<%= render Brainzlab::Components::Button.new(variant: :secondary) { "Cancel" } %>
<%= render Brainzlab::Components::Card.new { "Content" } %>
<%= render Brainzlab::Components::Badge.new(variant: :success) { "Active" } %>
<%= render Brainzlab::Components::Alert.new(type: :info) { "Note..." } %>

CSS Classes

<button class="btn-primary">Primary Button</button>
<button class="btn-secondary">Secondary Button</button>
<div class="card">Card content</div>
<span class="badge badge-success">Active</span>

Available Components

Component	Variants
Button	primary, secondary, ghost, danger
Card	default, bordered, elevated
Badge	default, success, warning, error, info
MaturityBadge	disponible, beta, proximamente
Alert	info, success, warning, error
Input	text, email, password, number
Select	default, multi
Modal	default, large, fullscreen
Table	default, striped, compact
Tabs	default, pills

API Reference

Button

Brainzlab::Components::Button.new(
  variant: :primary,  # :primary, :secondary, :ghost, :danger
  size: :md,          # :sm, :md, :lg
  disabled: false,
  type: :button       # :button, :submit, :reset
)

Card

Brainzlab::Components::Card.new(
  variant: :default,  # :default, :bordered, :elevated
  padding: :md        # :none, :sm, :md, :lg
)

Badge

Brainzlab::Components::Badge.new(
  variant: :default,  # :default, :success, :warning, :error, :info
  size: :md           # :sm, :md, :lg
)

Full documentation: docs.brainzlab.ai/ui

Self-Hosting

When self-hosting BrainzLab products, the UI gem is automatically included as a dependency.

Contributing

See CONTRIBUTING.md for development setup and contribution guidelines.

License

MIT License - see LICENSE file.