@o8is/brand

v1.2.0

Published

3 months ago

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

0High
0Medium
0Low

octalmage

o8 brand design-system css webgl background

@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

npm install @o8is/brand@o8is

Usage

Basic HTML (Static Sites)

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

<!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:

<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.):

// 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

Button Usage Guide

Standard Buttons

<!-- 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):

<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:

Border (2px solid) - Creates clear boundary and draws the eye
Background tint (10% opacity) - Fills interior, reinforcing selection
Text color match - Ties everything together as a cohesive unit

Button Groups

<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:

A <canvas id="bgCanvas"></canvas> element in your HTML
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.

Local Development

# 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

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

Examples

See these live implementations:

o8.is - Main homepage
swarm.o8.is - Swarm gateway
ipfs.o8.is - IPFS gateway
dist.o8.is - Dist project

License

MIT © o8

Credits

Designed and built by the o8 team.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

@o8is/brand

Features

Installation

Usage

Basic HTML (Static Sites)

Via CDN (unpkg)

With a Build Tool

Available CSS Classes

Typography

Layout

Components

Links

Button Usage Guide

Standard Buttons

Selection Chips

Button Groups

Background Animation

Colors

Core Palette

Brand Colors

Semantic Colors

Design Rationale

Browser Support

Development

Local Development

Publishing

Examples

License

Credits