FB Demo Design System

A comprehensive React design system based on the Simple Design System from Figma, built for use with v0 and modern React applications.

🚀 Installation

npm install fb-demo-design-system
# or
yarn add fb-demo-design-system
# or
pnpm add fb-demo-design-system

📖 Usage

Basic Example

import { Button, Text, Card, CardContent } from 'fb-demo-design-system';

function App() {
  return (
    <Card>
      <CardContent>
        <Text as="h2" strong>Welcome to FB Demo</Text>
        <Text as="p">This is a sample application using our design system.</Text>
        <Button variant="primary" onClick={() => alert('Hello!')}>
          Get Started
        </Button>
      </CardContent>
    </Card>
  );
}

Using Design Tokens

import { tokens } from 'fb-demo-design-system';

const customStyles = {
  backgroundColor: tokens.colors.brand[500],
  padding: tokens.spacing[4],
  borderRadius: tokens.borderRadius.lg,
  color: tokens.colors.text.inverse,
};

🎨 Components

Buttons

• Button - Primary action buttons with variants: primary, neutral, subtle
• ButtonDanger - Destructive action buttons

Typography

• TitleHero - Largest heading for hero sections
• TitlePage - Page titles and main headings
• Subtitle - Section subtitles
• Heading - Content headings
• Subheading - Smaller section headings
• Text - Body text with variants (strong, emphasis, small, singleLine)
• Link - Styled anchor links
• Code - Inline code styling

Form Components

• InputField - Text input with label, error states
• TextareaField - Multi-line text input
• CheckboxField - Checkbox with label
• RadioField - Radio button with label

Layout Components

• Card - Content containers with variants
• CardContent - Card content wrapper
• CardImage - Responsive card images

Data Display

• Avatar - User avatars with image/initials support

🎨 Design Tokens

The design system includes a comprehensive set of design tokens:

Colors

import { colors } from 'fb-demo-design-system';

// Semantic colors
colors.brand[500]    // Primary brand color
colors.success[500]  // Success state color
colors.warning[500]  // Warning state color
colors.danger[500]   // Error/danger color
colors.neutral[500]  // Neutral gray color

// Text colors
colors.text.primary    // Primary text
colors.text.secondary  // Secondary text
colors.text.brand     // Brand colored text

Typography

import { typography } from 'fb-demo-design-system';

typography.titleHero    // 60px, bold
typography.titlePage    // 48px, bold
typography.body         // 16px, normal
typography.bodySmall    // 14px, normal

Spacing

import { spacing } from 'fb-demo-design-system';

spacing[4]   // 16px
spacing[8]   // 32px
spacing[12]  // 48px

📚 Storybook

View all components and their variations in Storybook:

npm run storybook

🛠️ Development

Building the Library

npm run build

Running Tests

npm test

Linting

npm run lint

🎯 Design System Features

• ✅ Figma-based: Directly extracted from Simple Design System
• ✅ TypeScript: Full type safety
• ✅ Tree-shakeable: Import only what you need
• ✅ CSS-in-JS: No external CSS dependencies
• ✅ Responsive: Built-in responsive design tokens
• ✅ Accessible: Following WCAG guidelines
• ✅ Dark mode ready: Color tokens support theme switching
• ✅ v0 compatible: Optimized for v0.dev usage

🤝 Contributing

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

📄 License

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

🔗 Links

• Figma Design System
• Storybook Documentation
• NPM Package