Mini Design System

A lightweight, mini design system built with React and TypeScript. Perfect for rapid prototyping and consistent UI development.

Features

• Typography Scale: 3 font sizes with Lato font family
• Color Palette: Teal primary color with semantic colors
• Spacing System: Consistent 4px-based spacing scale
• Basic Components: Button, Input, Container, and Stack components
• TypeScript Support: Full type safety out of the box
• Zero Dependencies: Only requires React as a peer dependency

Installation

npm install mini-design-system-fb

Usage

Import Components

import { Button, Input, Container, Stack, tokens } from 'mini-design-system-fb';

Button Component

// Primary button
<Button variant="primary" size="md">
  Click me
</Button>

// Secondary button
<Button variant="secondary" size="sm">
  Cancel
</Button>

// Loading state
<Button loading>
  Processing...
</Button>

// Full width
<Button fullWidth>
  Submit
</Button>

Input Component

// Basic input
<Input 
  label="Email" 
  placeholder="Enter your email" 
/>

// With error
<Input 
  label="Password" 
  type="password"
  error="Password is required" 
/>

// With helper text
<Input 
  label="Username" 
  helperText="Must be at least 3 characters" 
/>

// Different sizes
<Input size="sm" placeholder="Small input" />
<Input size="lg" placeholder="Large input" />

Layout Components

// Container for max-width layouts
<Container maxWidth="lg" padding={6}>
  <h1>Page Content</h1>
</Container>

// Stack for flexible layouts
<Stack direction="column" gap={4} align="center">
  <Button>First Button</Button>
  <Button>Second Button</Button>
</Stack>

<Stack direction="row" gap={2} justify="between">
  <Button variant="secondary">Cancel</Button>
  <Button variant="primary">Submit</Button>
</Stack>

Using Design Tokens

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

const customStyles = {
  color: tokens.colors.primary[500],
  fontSize: tokens.typography.fontSize.heading,
  padding: tokens.spacing[4],
  borderRadius: tokens.borderRadius.md,
  boxShadow: tokens.shadows.lg
};

Design Tokens

Colors

• Primary: Teal color palette (50-900)
• Gray: Neutral scale (50-900)
• Semantic: Success, Warning, Error colors
• Background: Primary and secondary backgrounds
• Text: Primary, secondary, and inverse text colors

Typography

• Font Family: Lato with system fallbacks
• Font Sizes: Small (14px), Body (16px), Heading (24px)
• Font Weights: Regular (400), Bold (700)
• Line Heights: Tight (1.25), Normal (1.5), Relaxed (1.75)

Spacing

Based on 4px units with a consistent scale:

• 1 = 4px
• 2 = 8px
• 4 = 16px
• 8 = 32px
• etc.

Component Props

Button Props

• variant: 'primary' | 'secondary'
• size: 'sm' | 'md' | 'lg'
• fullWidth: boolean
• loading: boolean
• Standard HTML button attributes

Input Props

• label: string
• error: string
• helperText: string
• size: 'sm' | 'md' | 'lg'
• fullWidth: boolean
• Standard HTML input attributes

Container Props

• maxWidth: 'sm' | 'md' | 'lg' | 'xl' | 'full'
• padding: number (spacing token key)
• center: boolean
• as: HTML element to render

Stack Props

• direction: 'row' | 'column'
• gap: number (spacing token key)
• align: 'start' | 'center' | 'end' | 'stretch'
• justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'
• wrap: boolean

Development

# Install dependencies
npm install

# Build the package
npm run build

# Watch for changes during development
npm run dev

License

MIT