npm package: @o8is/brand
Description: o8 brand identity system - consistent styling and components across all o8 projects
Author: o8
Latest version: 1.2.0

# @o8is/brand

> o8 brand identity system - consistent styling and components across all o8 projects

Beautiful, minimal design system featuring silver gradient text, animated backgrounds, and glassmorphic UI components.

## Features

- 🎨 **Consistent branding** - Unified visual identity across all o8 properties
- ✨ **Animated gradients** - Smooth silver shine effect on text
- 🌊 **WebGL backgrounds** - Subtle, performance-optimized particle effects
- 🔍 **Responsive typography** - Fluid type scaling with CSS clamp()
- 🪟 **Glassmorphic components** - Modern blur effects and transparency
- 📦 **Tiny footprint** - ~7KB total (CSS + JS)

## Installation

```bash
npm install @o8is/brand@o8is
```

## Usage

### Basic HTML (Static Sites)

The simplest way to use the brand assets in a static HTML site:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/node_modules/@o8is/brand/o8-brand.css">
</head>
<body>
    <canvas id="bgCanvas"></canvas>
    <div class="container">
        <h1 class="brand">o8</h1>
        <h2 class="service-name">Your Service</h2>
        <p class="description">Your description here</p>
    </div>

    <script src="/node_modules/@o8is/brand/o8-background.js"></script>
</body>
</html>
```

### Via CDN (unpkg)

No build step required:

```html
<link rel="stylesheet" href="https://unpkg.com/@o8is/brand@latest/o8-brand.css">
<script src="https://unpkg.com/@o8is/brand@latest/o8-background.js"></script>
```

### With a Build Tool

If you're using a bundler (Vite, Webpack, etc.):

```javascript
// In your main JS file
import '@o8is/brand/o8-brand.css';
import '@o8is/brand/o8-background.js';
```

## Available CSS Classes

### Typography

- `.brand` - Large brand text with gradient (e.g., "o8")
- `.service-name` - Service/subtitle text with gradient
- `.description` - Body text in muted gray

### Layout

- `.container` - Centered content container (max-width: 800px)
- `.info-box` - Glassmorphic card with backdrop blur
- `.separator` - Horizontal gradient divider line

### Components

- `.hash-input-container` - Flex container for input + button
- `.hash-input` - Styled text input (monospace)
- `.view-button` - Base action button (neutral)
- `.view-button--primary` - Primary action button (blue)
- `.view-button--tertiary` - Secondary/highlight button (amber/gold)
- `.view-button--outline-primary` - Outline variant (blue border)
- `.view-button--outline-tertiary` - Outline variant (amber border)
- `.selection-chip` - Token/option selector chip
- `.selection-chip--selected` - Active selection state (blue)
- `.selection-chip--tertiary` - Tertiary color variant for chips
- `.button-group` - Horizontal button container with equal sizing

### Links

- `.links` - Horizontal link list
- `.links a` - Styled footer links

## Button Usage Guide

### Standard Buttons

```html
<!-- Neutral button (default) -->
<button class="view-button">Cancel</button>

<!-- Primary action (blue) - Use for main CTAs in modals -->
<button class="view-button view-button--primary">Confirm</button>

<!-- Tertiary action (amber) - Use for value-related actions -->
<button class="view-button view-button--tertiary">Create Reserve</button>

<!-- Outline variants -->
<button class="view-button view-button--outline-primary">Learn More</button>
<button class="view-button view-button--outline-tertiary">View Yield</button>
```

### Selection Chips

For mutually exclusive selections (like token pickers):

```html
<div style="display: flex; gap: 0.5rem;">
  <button class="selection-chip">Option A</button>
  <button class="selection-chip selection-chip--selected">Option B</button>
  <button class="selection-chip">Option C</button>
</div>
```

The three-layer approach for selected state:
1. **Border (2px solid)** - Creates clear boundary and draws the eye
2. **Background tint (10% opacity)** - Fills interior, reinforcing selection
3. **Text color match** - Ties everything together as a cohesive unit

### Button Groups

```html
<div class="button-group">
  <button class="view-button">Cancel</button>
  <button class="view-button view-button--primary">Confirm</button>
</div>
```

Convention: Cancel/secondary action on left, primary action on right.

## Background Animation

The `o8-background.js` script automatically initializes when loaded. Requirements:

1. A `<canvas id="bgCanvas"></canvas>` element in your HTML
2. WebGL support in the browser (gracefully degrades if unavailable)

## Colors

The brand includes a comprehensive color system via CSS custom properties:

### Core Palette

| Variable | Hex | Usage |
|----------|-----|-------|
| `--o8-black` | `#000000` | Page background |
| `--o8-white` | `#ffffff` | Primary text |
| `--o8-gray-100` | `#e0e0e0` | Bright text |
| `--o8-gray-200` | `#b0b0b0` | Body text, descriptions |
| `--o8-gray-300` | `#7a7a7a` | Muted text, placeholders |
| `--o8-gray-400` | `#3a3a3a` | Borders, dividers |
| `--o8-gray-500` | `#1a1a1a` | Dark surfaces |

### Brand Colors

| Variable | Hex | Usage |
|----------|-----|-------|
| `--o8-primary` | `#4a9eff` | Primary actions, interactive selections |
| `--o8-primary-light` | `#7ab8ff` | Hover states |
| `--o8-primary-dark` | `#2a7edf` | Active/pressed states |
| `--o8-primary-bg` | `rgba(74, 158, 255, 0.1)` | Selection backgrounds |
| `--o8-tertiary` | `#ffb74a` | Secondary CTAs, highlights, yield indicators |
| `--o8-tertiary-light` | `#ffc977` | Hover states |
| `--o8-tertiary-dark` | `#df9730` | Active/pressed states |
| `--o8-tertiary-bg` | `rgba(255, 183, 74, 0.1)` | Highlight backgrounds |

### Semantic Colors

| Variable | Hex | Usage |
|----------|-----|-------|
| `--o8-success` | `#4ade80` | Success states, confirmations |
| `--o8-warning` | `#fbbf24` | Warning messages |
| `--o8-error` | `#f87171` | Error states |
| `--o8-info` | `var(--o8-primary)` | Informational messages |

### Design Rationale

**Primary Blue (#4a9eff)**:
- Action-oriented, universally signals "interactive"
- Non-destructive and neutral-positive
- ~4.5:1 contrast ratio against dark backgrounds (WCAG AA compliant)
- Perfect for reversible choices and primary CTAs

**Tertiary Amber (#ffb74a)**:
- Warm/cool contrast to primary blue
- Semantic meaning: value, rewards, premium features
- High contrast (~8:1 ratio) on dark backgrounds
- Ideal for secondary CTAs, yield highlights, and attention states

## Browser Support

- Chrome/Edge 90+
- Firefox 88+
- Safari 14+
- Fallback styles for older browsers

## Development

This package is maintained as part of the [o8 monorepo](https://github.com/octalmage/o8).

### Local Development

```bash
# Clone the repo
git clone https://github.com/octalmage/o8.git
cd o8/packages/brand

# Make changes to o8-brand.css or o8-background.js
# Test in the parent project or link locally
npm link
```

### Publishing

```bash
cd packages/brand
npm version patch  # or minor, major
npm publish
```

## Examples

See these live implementations:

- [o8.is](https://o8.is) - Main homepage
- [swarm.o8.is](https://swarm.o8.is) - Swarm gateway
- [ipfs.o8.is](https://ipfs.o8.is) - IPFS gateway
- [dist.o8.is](https://dist.o8.is) - Dist project

## License

MIT © o8

## Credits

Designed and built by the o8 team.