dusky-design-system

A comprehensive React-based design system with reusable components, built with TypeScript, Tailwind CSS, and Remix Icons.

🚀 Features

• Typography System: Complete typography scale with proper font weights, sizes, and letter spacing
• Color Library: Comprehensive color palette with semantic naming
• Component Library: Reusable UI components (Button, TextBox, Card, Badge, Tabs, Icon)
• Design Tokens: Centralized design properties for consistency
• TypeScript Support: Full type safety for all components
• Responsive Design: Mobile-first approach with Tailwind CSS
• Accessibility: Built-in accessibility features and ARIA support

📦 Installation

npm install dusky-design-system

🎨 Design System Features

Based on the Figma design from Dusky_I2I, this design system includes:

Typography System

• Title.lg: 18px, Medium, 26px line-height, -8.33% letter-spacing
• Title.md: 16px, Medium, 24px line-height, -6.88% letter-spacing
• Body.md: 14px, Medium, 20px line-height, -4.29% letter-spacing
• Body.base: 14px, Regular, 20px line-height, -4.29% letter-spacing
• Caption: 12px, Medium, 16px line-height, 0% letter-spacing
• Button.text: 14px, Semibold, 20px line-height, -7.86% letter-spacing

Color Library

Complete color palette with 12 color families, each with 10 shades (50-900):

• Gray: Neutral grays for text and backgrounds
• Red: Error states and destructive actions
• Orange: Warning states and attention
• Yellow (Amber): Caution and highlights
• Green (Emerald): Success states and positive actions
• Teal: Secondary actions and accents
• Cyan: Information and data visualization
• Light Blue (Sky): Links and interactive elements
• Blue: Primary actions and branding
• Indigo: Secondary branding and accents
• Purple: Premium features and special elements
• Pink: Creative and playful elements
• Rose: Alternative accent colors

Text Box Variants

• Plain Text Box - Basic text input with various states
• With Icon - Text inputs with left/right icons (Email, Info)
• Search Field - Specialized search input with search icon
• Share Link - Link input with copy functionality

Button System

• Primary - Main call-to-action buttons with purple background
• Secondary - Secondary actions with purple border and white background
• Tertiary - Subtle actions with gray styling
• Ghost - Minimal styling with transparent background
• Danger - Destructive actions with red styling

Button States

• Default - Initial button state
• Hover - Mouse hover state with color changes
• Focused - Active focus state with outline ring
• Disabled - Disabled state with reduced opacity

Input States

• Default - Initial state
• Hover - Mouse hover state
• Focused - Active focus state
• Filled - Input with content
• Error - Error state with validation
• Disabled - Disabled state

🚀 Quick Start

1. Setup Tailwind CSS

Add Tailwind CSS to your project:

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Configure Tailwind

Update your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/dusky-design-system/**/*.{js,jsx,ts,tsx}"
  ],
  theme: {
    extend: {
      colors: {
        'gray': {
          50: '#f9fafb',
          500: '#6b7280',
          900: '#111827',
        },
        'purple': {
          50: '#f0ecfe',
          500: '#6e3ff3',
          900: '#4c1d95',
        }
      },
      fontSize: {
        'title-lg': ['32px', { lineHeight: '40px', letterSpacing: '-8.33%' }],
        'title-md': ['24px', { lineHeight: '32px', letterSpacing: '-6.88%' }],
        'body-md': ['16px', { lineHeight: '24px', letterSpacing: '-4.29%' }],
        'body-base': ['14px', { lineHeight: '20px', letterSpacing: '-4.29%' }],
        'caption': ['12px', { lineHeight: '16px', letterSpacing: '0%' }],
        'button-text': ['14px', { lineHeight: '20px', letterSpacing: '-4.29%' }],
      }
    }
  },
  plugins: [],
}

3. Import Components

import { Button } from 'dusky-design-system';
import { TextBox } from 'dusky-design-system';
import { Typography } from 'dusky-design-system';

🛠️ Tech Stack

• React 18 - UI library
• TypeScript - Type safety
• Tailwind CSS - Utility-first CSS framework
• Rollup - Build tool for NPM package
• General Sans & Inter - Typography fonts

📦 Available Components

Core Components

• Button: 5 variants (primary, secondary, tertiary, ghost, danger) with 4 states
• TextBox: Multiple input types with various states and validation
• Typography: Complete typography system with semantic variants
• Card: Container component with elevation options
• Badge: Status indicators with semantic colors
• Tabs: Tabbed interface component
• Icon: Remix Icons wrapper component

Specialized Components

• EmailTextBox: Email input with validation
• SearchTextBox: Search input with icon
• ShareLinkTextBox: Link input with copy functionality

🎯 Component Usage

Typography Component

import { Typography } from 'dusky-design-system';

<Typography variant="title-lg" as="h1">
  Main Heading
</Typography>

<Typography variant="body-md">
  Body text with medium weight
</Typography>

<Typography variant="caption">
  Small caption text
</Typography>

Basic TextBox

import { TextBox } from 'dusky-design-system';

<TextBox
  label="Full Name"
  placeholder="Enter your full name"
  required
  hint="This is a hint text to help user."
  value={value}
  onChange={handleChange}
/>

Search TextBox

import { SearchTextBox } from 'dusky-design-system';

<SearchTextBox
  label="Search"
  onSearch={handleSearch}
  value={searchValue}
  onChange={handleSearchChange}
/>

Email TextBox

import { EmailTextBox } from 'dusky-design-system';

<EmailTextBox
  label="Email Address"
  value={email}
  onChange={handleEmailChange}
  showInfoIcon={true}
/>

Share Link TextBox

import { ShareLinkTextBox } from 'dusky-design-system';

<ShareLinkTextBox
  label="Share Link"
  value={link}
  onCopy={handleCopy}
  onChange={handleLinkChange}
/>

Button Component

import { Button, PrimaryHeadIcon, PrimaryTrailIcon } from 'dusky-design-system';

<Button
  variant="primary"
  size="md"
  headIcon={<PrimaryHeadIcon />}
  trailIcon={<PrimaryTrailIcon />}
  onClick={handleClick}
>
  Click me
</Button>

Button Variants

// Primary button (main CTA)
<Button variant="primary">Primary Action</Button>

// Secondary button
<Button variant="secondary">Secondary Action</Button>

// Tertiary button
<Button variant="tertiary">Tertiary Action</Button>

// Ghost button
<Button variant="ghost">Ghost Action</Button>

// Danger button
<Button variant="danger">Delete</Button>

Button States

// Different states
<Button variant="primary" state="default">Default</Button>
<Button variant="primary" state="hover">Hover</Button>
<Button variant="primary" state="focused">Focused</Button>
<Button variant="primary" disabled>Disabled</Button>

🎨 Design Tokens

The design system uses consistent design tokens from the Figma design:

Colors

• Primary: #0a0d14 (text-main)
• Secondary: #868c98 (text-soft, icon-soft)
• Error: #ef4444 (red-500)
• Background: #ffffff (bg-white)
• Border: #e2e4e9 (stroke-soft)

Typography

• Font Family: General Sans
• Title.lg: 18px, Medium, 26px line-height, -8.33% letter-spacing
• Title.md: 16px, Medium, 24px line-height, -6.88% letter-spacing
• Body.md: 14px, Medium, 20px line-height, -4.29% letter-spacing
• Body.base: 14px, Regular, 20px line-height, -4.29% letter-spacing
• Caption: 12px, Medium, 16px line-height, 0% letter-spacing
• Button.text: 14px, Semibold, 20px line-height, -7.86% letter-spacing

Spacing & Layout

• Input Height: 40px (h-10)
• Border Radius: 8px
• Padding: 12px horizontal, 7px vertical
• Gap: 4px between elements

🔧 Available Scripts

• npm run dev - Start development server
• npm run build - Build NPM package
• npm run build:types - Build TypeScript declarations
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint issues

📱 Responsive Design

The components are built with responsive design in mind:

• Mobile-first approach
• Flexible grid layouts
• Adaptive spacing and typography
• Touch-friendly interactions

🎯 Features

• ✅ TypeScript Support - Full type safety
• ✅ Accessibility - ARIA labels and keyboard navigation
• ✅ Responsive - Mobile-first design
• ✅ Customizable - Flexible props and styling
• ✅ Interactive - Hover, focus, and error states
• ✅ Modern UI - Clean, professional design
• ✅ Copy Functionality - Built-in clipboard support
• ✅ Form Integration - Easy form state management

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📦 Publishing

To publish a new version:

npm version patch  # or minor/major
npm publish

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Design inspiration from the Figma design system
• Icons from Remix Icons library
• Community contributions and feedback