@nice2dev/omniwerk-branding

Official OmniWerk brand assets, logos, and theme for React applications.

Installation

npm install @nice2dev/omniwerk-branding
# or
pnpm add @nice2dev/omniwerk-branding

Features

• Logo Components — Icon, text, and combined logo variants
• Brand Colors — Complete color palette with light/dark schemes
• Typography — Anton SC font for headlines (SIL OFL 1.1 licensed)
• Theme Presets — Ready-to-use themes for Tailwind, MUI, and CSS variables
• Animations — Animated logo and loading spinner

Quick Start

import { 
  OmniWerkLogo, 
  OmniWerkFontLoader, 
  OMNIWERK_COLORS 
} from '@nice2dev/omniwerk-branding';

function App() {
  return (
    <>
      {/* Load Anton SC font from Google Fonts */}
      <OmniWerkFontLoader />
      
      {/* Logo with gradient */}
      <OmniWerkLogo 
        variant="horizontal" 
        size="lg" 
        gradient="brand" 
      />
    </>
  );
}

Components

OmniWerkLogo

Complete logo with icon and text.

// Icon only
<OmniWerkLogo variant="icon" />

// Text only
<OmniWerkLogo variant="text" />

// Horizontal (default)
<OmniWerkLogo variant="horizontal" size="lg" />

// Vertical (stacked)
<OmniWerkLogo variant="vertical" showTagline />

// With gradient
<OmniWerkLogo gradient="brand" />

// Custom color
<OmniWerkLogo color="#FF0000" />

OmniWerkAnimatedLogo

Logo with entrance and hover animations.

<OmniWerkAnimatedLogo 
  size="xl"
  variant="vertical"
  animate
  pulseOnHover
/>

OmniWerkIcon

Standalone icon component.

<OmniWerkIcon size={48} gradient="primary" />

OmniWerkText

Text-only component with Anton SC font.

<OmniWerkText fontSize={32} showTagline />

OmniWerkLoadingSpinner

Rotating logo as loading indicator.

<OmniWerkLoadingSpinner size={48} gradient="brand" />

OmniWerkSplash

Full-screen splash screen.

<OmniWerkSplash 
  background="brand"
  showTagline
  onComplete={() => navigate('/home')}
  duration={2000}
/>

OmniWerkFontLoader

Loads Anton SC font from Google Fonts.

// Add once at app root
<OmniWerkFontLoader />

Sizes

| Size | Icon | Font | Spacing | |------|------|------|---------| | xs | 16px | 10px | 4px | | sm | 24px | 14px | 6px | | md | 32px | 20px | 8px | | lg | 48px | 32px | 12px | | xl | 64px | 48px | 16px | | xxl | 96px | 72px | 24px |

Colors

import { OMNIWERK_COLORS } from '@nice2dev/omniwerk-branding';

// Primary palette
OMNIWERK_COLORS.primary      // #1A237E (Deep Blue)
OMNIWERK_COLORS.primaryLight // #534BAE
OMNIWERK_COLORS.primaryDark  // #000051

// Secondary palette
OMNIWERK_COLORS.secondary      // #00BCD4 (Cyan)
OMNIWERK_COLORS.secondaryLight // #62EFFF
OMNIWERK_COLORS.secondaryDark  // #008BA3

// Semantic
OMNIWERK_COLORS.success // #4CAF50
OMNIWERK_COLORS.warning // #FF9800
OMNIWERK_COLORS.error   // #F44336
OMNIWERK_COLORS.info    // #2196F3

Gradients

import { OMNIWERK_GRADIENTS } from '@nice2dev/omniwerk-branding';

// Available presets
'primary'      // Deep blue gradient
'secondary'    // Cyan gradient
'brand'        // Primary to secondary
'brandReverse' // Secondary to primary

Theme Integration

CSS Variables

import { OMNIWERK_CSS_VARS } from '@nice2dev/omniwerk-branding';

// Add to your global styles
<style>{OMNIWERK_CSS_VARS}</style>

// Then use in CSS
.my-element {
  color: var(--omniwerk-primary);
  background: var(--omniwerk-surface);
  font-family: var(--omniwerk-font-logo);
}

Tailwind CSS

// tailwind.config.js
import { omniWerkTailwindPreset } from '@nice2dev/omniwerk-branding';

export default {
  presets: [omniWerkTailwindPreset],
  // ...
}

Then use the classes:

<div class="bg-omniwerk-primary text-white">
  <h1 class="font-omniwerk-logo">OMNIWERK</h1>
</div>

Material UI

import { createTheme } from '@mui/material/styles';
import { omniWerkMuiTheme, omniWerkMuiDarkTheme } from '@nice2dev/omniwerk-branding';

const lightTheme = createTheme(omniWerkMuiTheme);
const darkTheme = createTheme(omniWerkMuiDarkTheme);

Font License

The Anton SC font is licensed under the SIL Open Font License, Version 1.1. See assets/fonts/OFL.txt for the complete license.

License

MIT © NiceToDev