Package Exports

@orrikai/design-system
@orrikai/design-system/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@orrikai/design-system) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Orrikai Design System

Centralized design system and Tailwind configuration for all Orrikai applications.

🎯 Purpose

This design system ensures consistent branding, typography, colors, and components across all Orrikai platforms:

Main Platform (orrikai-platform-warp)
Player Evaluation Platform (orrikai-student-evaluation-platform)
Identity Service (orrikai-identity-service)
Future Platforms

🎨 What's Included

✅ Brand Colors - Complete Orrikai color palette
✅ Typography - Quicksand + Inter font system
✅ Components - Tailwind component configurations
✅ Assets - Shared logos, icons, and graphics
✅ Animations - Orbital and brand-specific animations

📦 Usage

Method 1: Direct Import (Recommended)

// tailwind.config.js in any Orrikai project
import { createOrrikaiTailwindConfig } from '../shared/design-system';

export default createOrrikaiTailwindConfig({
  // Add app-specific extensions here
  theme: {
    extend: {
      // App-specific customizations
    }
  }
});

Method 2: Manual Extension

// tailwind.config.js
import { orrikaiTailwindConfig } from '../shared/design-system';

export default {
  content: ["./src/**/*.{js,ts,jsx,tsx}"],
  ...orrikaiTailwindConfig,
  theme: {
    ...orrikaiTailwindConfig.theme,
    extend: {
      ...orrikaiTailwindConfig.theme.extend,
      // Your app-specific extensions
    }
  }
};

🔄 Making Updates

Update the design system in /shared/design-system/
All projects automatically inherit changes on next build
No manual updates needed across projects

📁 Structure

shared/design-system/
├── colors.js              # Orrikai brand colors
├── typography.js          # Font system
├── tailwind.base.js       # Base Tailwind config
├── index.js               # Main entry point
├── assets/
│   ├── logos/             # Orrikai logos (SVG, PNG)
│   └── fonts/             # Custom fonts
└── package.json

🎨 Brand Colors

// Available color classes:
bg-brand-deep-space        // #0B1D51
bg-brand-aurora-green      // #1ABC9C
bg-accent-bright-gold      // #FFD700
bg-neutral-charcoal        // #2B2B2B

// Gradients:
bg-brand-gradient          // Deep Space → Aurora Green
bg-gold-gradient           // Gold gradient

🔤 Typography

// Font families:
font-primary              // Quicksand (headers/logo)
font-secondary            // Inter (body text)

// Semantic sizes:
text-display-xl           // Large displays
text-body-lg              // Body text

🚀 Getting Started

Link the design system to your project:

# In your project directory
npm install file:../shared/design-system

Update your tailwind.config.js:

import { createOrrikaiTailwindConfig } from '@orrikai/design-system';
export default createOrrikaiTailwindConfig();

Use Orrikai classes in your components:

<div className="bg-brand-gradient text-white font-primary">
  Orrikai styled content
</div>

🎯 Benefits

✅ One source of truth for all design decisions
✅ Automatic updates across all projects
✅ Consistent branding without manual coordination
✅ Faster development with pre-built components
✅ Easy maintenance - update once, deploy everywhere