TapTap Design System

A reusable design system package built from the TapTap Figma design specifications. This package provides design tokens, Tailwind configuration, and React components for consistent UI development.

📦 Installation

npm install @taptap/design-system

Peer Dependencies

npm install react tailwindcss

🚀 Quick Start

1. Configure Tailwind

Import the TapTap preset in your tailwind.config.js:

module.exports = {
  presets: [require('@taptap/design-system/dist/config/tailwind-preset')],
  content: [
    './src/**/*.{js,jsx,ts,tsx}',
    './node_modules/@taptap/design-system/dist/**/*.js',
  ],
};

2. Use Components

import { Button, IconButton } from '@taptap/design-system';

function App() {
  return (
    <div>
      <Button variant="primary" size="large">
        Click Me
      </Button>
      
      <Button 
        variant="outline" 
        intent="danger"
        leftIcon={<TrashIcon />}
      >
        Delete
      </Button>

      <IconButton 
        variant="ghost" 
        shape="round"
        icon={<SearchIcon />}
      />
    </div>
  );
}

3. Use Design Tokens

import { colors, typography, spacing } from '@taptap/design-system';

// Direct token usage
const primaryColor = colors.primary[600]; // #15C5CE
const headingSize = typography.fontSize.h1; // ['30px', '38px']
const mediumSpace = spacing[2]; // 8px

🎨 Design Tokens

Colors

colors.black          // #000000
colors.white          // #FFFFFF
colors.neutral[50-700] // Neutral scale
colors.primary[50-700] // Brand primary
colors.auxiliary[50-700] // Brand auxiliary
colors.danger[50-700]  // Semantic: errors, warnings
colors.warning[50-700] // Semantic: caution
colors.success[50-700] // Semantic: success states
colors.info[50-700]    // Semantic: informational

Typography

// Font families
typography.fontFamily.sans // System font stack
typography.fontFamily.mono // Monospace for code

// Type scale (size, line-height)
typography.fontSize.h1       // [30px, 38px]
typography.fontSize.h2       // [24px, 32px]
typography.fontSize.h3       // [20px, 28px]
typography.fontSize.title    // [18px, 26px]
typography.fontSize.subtitle // [16px, 24px]
typography.fontSize.body     // [14px, 22px]
typography.fontSize.caption  // [12px, 18px]

// Font weights
typography.fontWeight.regular // 400
typography.fontWeight.medium  // 500

Spacing

spacing[0]  // 0px
spacing[1]  // 4px  - Small button padding (from spec)
spacing[2]  // 8px  - Medium/Large button padding (from spec)
spacing[10] // 40px - Large button height (from spec)

Note: Only spacing values explicitly documented in the design system are included. Additional spacing values should be added only after confirmation from the design team.

🧩 Components

Button

<Button
  variant="primary" | "outline" | "ghost" | "link"
  size="small" | "medium" | "large"
  intent="default" | "danger"
  leftIcon={<Icon />}
  rightIcon={<Icon />}
>
  Button Text
</Button>

Variants:

• primary - Filled background, primary action
• outline - Border only, secondary actions
• ghost - Transparent, tertiary actions
• link - Text only, for external links

Sizes:

• small - 24px height
• medium - 36px height (default)
• large - 40px height

Intent:

• default - Standard button styling
• danger - Destructive actions (red theme)

IconButton

<IconButton
  variant="primary" | "outline" | "ghost"
  size="small" | "medium" | "large"
  shape="fillet" | "round" | "square"
  intent="default" | "danger"
  icon={<Icon />}
/>

Shapes:

• fillet - Rounded corners (default)
• round - Fully circular
• square - Sharp corners

🎯 Tailwind Usage

All design tokens are available as Tailwind utilities:

<div className="bg-primary-600 text-white rounded-md p-2">
  <h1 className="text-h1 font-medium">Heading</h1>
  <p className="text-body text-neutral-600">Body text</p>
</div>

🤖 AI Vibe-Coding Tools

This package is optimized for AI tools like Lovable, Cursor, and v0. The design system provides:

• Complete type definitions for IntelliSense
• Semantic token names for natural language prompting
• Minimal abstractions for predictable code generation
• Tailwind integration for rapid prototyping

Example prompts that work well:

• "Create a danger outline button with a trash icon"
• "Use the primary-600 color for the header background"
• "Add a large ghost button with right arrow icon"

📁 Package Structure

@taptap/design-system/
├── dist/
│   ├── index.js           # Main entry point
│   ├── index.d.ts         # TypeScript definitions
│   ├── config/
│   │   ├── tokens.js      # Raw design tokens
│   │   ├── theme.js       # Semantic mappings
│   │   └── tailwind-preset.js
│   └── components/
│       ├── Button.js
│       └── IconButton.js

🔧 Development

# Install dependencies
npm install

# Build the package
npm run build

# Prepare for publishing
npm run prepublishOnly

📄 License

MIT

🤝 Contributing

This design system is based on the official TapTap Figma specifications. All design decisions must align with the source design files.

Version: 1.0.0
Author: TapTap
Repository: https://github.com/ahmedtaaw/taptap_demo