Odama Design System

A modern, bold React component library featuring vibrant orange accents, clean typography, and intuitive user interactions. Built with TypeScript, Tailwind CSS, and designed for maximum reusability.

Features

• 🎨 Beautiful Components - Carefully crafted UI components following the Odama design principles
• 🔧 TypeScript - Full TypeScript support with comprehensive type definitions
• 🎯 Accessible - ARIA labels, keyboard navigation, and focus management built-in
• 💅 Tailwind CSS - Styled with Tailwind for easy customization
• 📦 Tree-shakeable - Import only what you need
• 🚀 Production Ready - Thoroughly tested and production-ready components

Installation

npm install odama-design-system

Quick Start

import { Button, Card, Input } from 'odama-design-system'
import 'odama-design-system/dist/style.css'

function App() {
  return (
    <Card>
      <Input label="Email" placeholder="Enter your email" />
      <Button variant="primary" size="large">Submit</Button>
    </Card>
  )
}

Components

Form Controls

• Button - Primary, secondary, and ghost variants in three sizes
• Input - Text inputs with labels, helper text, and error states
• Checkbox - Checkboxes with labels and all states
• Radio - Radio buttons with proper grouping
• Toggle - Smooth animated toggle switches

Display Components

• Card - Container with shadow and optional hover effect
• Badge - Status badges in multiple semantic variants
• Avatar - User avatars in four sizes with group support
• Table - Data tables with hover states and selection
• Modal - Dialog modals with overlay and backdrop blur
• Tooltip - Informational tooltips in four positions

Typography

• Heading - Hero, H1-H4 heading components
• Text - Body, small, and caption text variants

Design Tokens

Colors

• Primary: Safety Orange (#F26522), Tawny (#C45E23), Lumber (#F4DCC6)
• Secondary: Middle Grey (#828282), White Coffee (#E9DFDB), Coffee Break (#CDCAC9)
• Semantic: Success (#4CAF50), Info (#5B8DEF), Warning (#FFC107), Error (#F44336)

Typography Scale

• Hero: 72px (bold)
• H1: 48px (bold)
• H2: 36px (bold)
• H3: 24px (bold)
• H4: 20px (semibold)
• Body: 16px (regular)
• Body Small: 14px (regular)
• Caption: 12px (regular)

Development

Demo Site

npm run dev

Runs the demo showcase site at http://localhost:5173

Build Library

npm run build:lib

Builds the component library for distribution.

Build Everything

npm run build

Builds both the library and demo site.

Design Principles

1. Bold and Confident - Vibrant orange for primary actions
2. Clear Hierarchy - Strong typographic contrast
3. Generous Spacing - Ample whitespace for readability
4. Intuitive Interactions - Clear visual feedback
5. Accessible - High contrast and keyboard navigation
6. Consistent Patterns - Reusable component patterns

License

MIT

Author

Built with ❤️ using React, TypeScript, Vite, and Tailwind CSS