@chittystandard/brand

Official brand system for ChittyOS platform and all ChittyApps.

Installation

npm install @chittystandard/brand

Usage

React Components

import { ChittyLogo, ChittyButton, ServiceCard } from '@chittystandard/brand';

function App() {
  return (
    <div>
      <ChittyLogo variant="primary" theme="dark" size="lg" />
      <ChittyButton variant="chitty">Get Started</ChittyButton>
      <ServiceCard 
        service="chittyid"
        name="ChittyID"
        status="healthy"
        metrics={{
          uptime: "99.9%",
          latency: "12ms",
          requests: "834/min"
        }}
      />
    </div>
  );
}

CSS Styles

@import '@chittystandard/brand/styles';

.my-component {
  background: var(--chitty-orange);
  font-family: var(--chitty-font-primary);
}

Design Tokens

import { brandTokens, getServiceColor } from '@chittystandard/brand';

const primaryColor = brandTokens.colors.primary;
const chatColor = getServiceColor('chittychat');

Tailwind Configuration

// tailwind.config.js
import { tailwindConfig } from '@chittystandard/brand';

export default {
  ...tailwindConfig,
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
  ],
}

Components

• ChittyLogo - Brand logo with multiple variants
• ChittyButton - Branded button components
• ChittyCard - Service cards with brand styling
• ServiceCard - Specialized cards for ChittyOS services
• ChittyHeader - Consistent navigation headers
• ChittyFooter - Standard footers

Services

The brand system includes color coding for all ChittyOS services:

• ChittyChat (#FF6B35) - Document Intelligence
• ChittyID (#10B981) - Identity Management
• ChittyChain (#3B82F6) - Blockchain
• ChittyFinance (#F59E0B) - Financial Services
• AgentRuntime (#EC4899) - Agent Coordination
• ChittyDiscovery (#06B6D4) - Service Discovery

Development

# Install dependencies
npm install

# Start Storybook
npm run storybook

# Build package
npm run build

# Run tests
npm test

License

MIT © ChittyOS Team