@penaprieto/design-system

Multi-brand React design system with design tokens from Figma

🎨 Features

• 🏢 Multi-Brand Support - Switch between Brand A and Brand B
• 🎯 40+ Production-Ready Components
• 🎨 Design Tokens from Figma
• ♿ Accessibility First - WCAG 2.1 AA compliant
• 🔧 TypeScript Native
• 🚀 Tree-Shakeable

📦 Installation

npm install @penaprieto/design-system
# or
yarn add @penaprieto/design-system
# or
pnpm add @penaprieto/design-system

🚀 Quick Start

Basic Usage

import { Button, Card, Badge } from '@penaprieto/design-system';
import '@penaprieto/design-system/BrandA.css'; // Import Brand A styles

function App() {
  return (
    <Card>
      <Badge variant="success">New</Badge>
      <h2>Welcome</h2>
      <Button variant="primary">Get Started</Button>
    </Card>
  );
}

Multi-Brand Usage

// Brand A (Blue + Pink + Satoshi)
import '@penaprieto/design-system/BrandA.css';

// Or Brand B (Green + Orange + Outfit)
import '@penaprieto/design-system/BrandB.css';

Using Design Tokens

// Import tokens as JavaScript
import tokensA from '@penaprieto/design-system/tokens/BrandA.js';
import tokensB from '@penaprieto/design-system/tokens/BrandB.js';

// Or as JSON
import tokensJSON from '@penaprieto/design-system/tokens/BrandA.json';

📚 Available Components

Core

• Button, Icon, Avatar, Badge, Tag, Pill

Forms

• TextField, Textarea, Checkbox, Radio, RadioGroup, RadioCard, Switch, Select, Dropdown, Combobox, DatePicker, TimePicker, FileUpload, OTPInput

Layout

• Card, Modal, Drawer, Accordion, Tabs, Divider

Navigation

• Header, Footer, Breadcrumb, Pagination, Menu, Stepper

Feedback

• Alert, Toast, Tooltip, Popover, Spinner, Skeleton, EmptyState

Data Display

• List, ListItem, Image, Rating, Carousel

🎨 Brands

Brand A

• Primary Color: Blue (#0059cd)
• Accent Color: Pink (#d32e58)
• Typography: Satoshi

Brand B

• Primary Color: Green (#38d373)
• Accent Color: Orange (#ffba24)
• Typography: Outfit

📖 Documentation

• Storybook: View Components
• GitHub: Repository

🔧 TypeScript Support

All components are written in TypeScript and include type definitions.

import { ButtonProps } from '@penaprieto/design-system';

const props: ButtonProps = {
  variant: 'primary',
  size: 'medium',
  onClick: () => console.log('Clicked!'),
};

📄 License

MIT © Penaprieto

🤝 Contributing

Contributions are welcome! Please read our contributing guidelines.

📞 Support

• Issues: GitHub Issues
• Discussions: GitHub Discussions