Regardio Brand

Design system and branding for the Regardio ecosystem

Regardio Brand provides the visual identity, design tokens, and brand guidelines for all Regardio applications. The package includes both raw SVG files and ready-to-use React components.

Installation

pnpm add @regardio/brand

Asset Catalog

Run Storybook to browse the complete asset catalog:

pnpm storybook

This opens an interactive catalog at http://localhost:6006 with all icons, logos, colors, and compass sprites.

Sample Assets

Asset Categories

SVG Files

Raw SVG assets are available in src/svg/:

• icons/ — Regardio logos, icons, and system symbols
• compass-base/ — Compass sprite components (facets, sparks, bridges, pursuits)

React Components

Generated React components are exported from the package:

• Icons & Logos — @regardio/brand/icons/*
• Sprites — @regardio/brand/sprites/*

Usage

React Components

import { RegardioLogoColor } from "@regardio/brand/icons/regardio-logo-color";
import { RegardioIconColor } from "@regardio/brand/icons/regardio-icon-color";
import { CompassSprite } from "@regardio/brand/sprites/compass-sprite";
import { CompassSpriteProvider } from "@regardio/brand/sprites/compass-sprite-provider";

function App() {
  return (
    <CompassSpriteProvider>
      <RegardioLogoColor style={{ width: 200 }} />
      <RegardioIconColor style={{ fontSize: 48 }} />
      <CompassSprite id="spark.leisure.calm" width={80} height={80} />
    </CompassSpriteProvider>
  );
}

CompassSpriteProvider

The CompassSpriteProvider embeds SVG symbol definitions for all compass sprites directly into the DOM. Include it once at the root of your application:

import { CompassSpriteProvider } from "@regardio/brand/sprites/compass-sprite-provider";

function App() {
  return (
    <CompassSpriteProvider>
      {/* Your app content */}
    </CompassSpriteProvider>
  );
}

Then use CompassSprite anywhere in your app to reference sprites by ID:

import { CompassSprite } from "@regardio/brand/sprites/compass-sprite";

<CompassSprite id="spark.leisure.calm" width={80} height={80} />
<CompassSprite id="facet.element.people" width={60} height={80} />
<CompassSprite id="bridge.perspective.enables" width={100} height={70} />

Regardio Color Scheme with Tailwind CSS

Import colors.css to use the Regardio color palette with Tailwind CSS v4:

import "@regardio/brand/colors.css";

This provides CSS custom properties using the @theme directive, making colors available as Tailwind utilities. The palette includes:

• coral, orange, yellow, olive, lime, green, teal, cyan, blue, purple, pink, red — full spectrum
• gray — neutral tones with warm undertones
• white, black — base colors

Each color has shades from 50 (lightest) to 950 (darkest):

<div class="bg-coral-500 text-white">Coral background</div>
<div class="text-teal-700">Teal text</div>
<div class="border-purple-300">Purple border</div>

The compass sprites use these colors via Tailwind classes (e.g., fill-green-300), so the color scheme must be loaded for sprites to render correctly.

Scripts

Script	Description
pnpm build	Build TypeScript to dist/
pnpm dev	Watch mode for development
pnpm generate	Regenerate all React components from SVGs
pnpm storybook	Launch Storybook asset catalog
pnpm storybook:build	Build static Storybook site
pnpm lint	Run linting checks
pnpm fix	Auto-fix linting issues
pnpm typecheck	TypeScript type checking

Exports

Export	Description
@regardio/brand/colors.css	Tailwind v4 theme with Regardio color palette
@regardio/brand/icons/*	Icon and logo React components
@regardio/brand/sprites/*	Compass sprite components

License

CC BY-SA 4.0 — Regardio Brand assets are freely available for use and adaptation.

---

Part of the Regardio Ensemble toolkit for collective well-being.