Skip to content

Design System.md

Latest commit

 

History

History
255 lines (201 loc) · 5.33 KB

Design System.md

File metadata and controls

255 lines (201 loc) · 5.33 KB

Design System

This document describes the design system used in the React Bootcamp Boilerplate.

Overview

The boilerplate uses a Modern Minimal design style with:

  • Clean, spacious layouts
  • Subtle shadows and rounded corners
  • Smooth animations and transitions
  • Professional color palette

Color Palette

Primary Colors (Slate)

Used for main text, backgrounds, and primary elements.

Token Hex Usage
primary-50 #f8fafc Lightest background
primary-100 #f1f5f9 Card backgrounds
primary-200 #e2e8f0 Borders
primary-300 #cbd5e1 Disabled states
primary-400 #94a3b8 Placeholder text
primary-500 #64748b Secondary text
primary-600 #475569 Body text
primary-700 #334155 Headings
primary-800 #1e293b Dark text
primary-900 #0f172a Darkest text
primary-950 #020617 Deep backgrounds

Accent Colors (Teal)

Used for highlights, calls-to-action, and visual accents.

Token Hex Usage
accent-50 #f0fdfa Light accent background
accent-100 #ccfbf1 Accent cards
accent-200 #99f6e4 Hover states
accent-300 #5eead4 Active states
accent-400 #2dd4bf Primary accent
accent-500 #14b8a6 Links
accent-600 #0d9488 Buttons
accent-700 #0f766e Active buttons
accent-800 #115e59 Dark accent
accent-900 #134e4a Text accents

Typography

Font Family

  • Primary Font: Inter (Google Fonts)
  • Fallback: system-ui, sans-serif

Font Weights

Weight Value Usage
Light 300 Decorative
Regular 400 Body text
Medium 500 Navigation
Semibold 600 Subheadings
Bold 700 Headings

Font Sizes

Token Size Usage
text-sm 0.875rem Small text, captions
text-base 1rem Body text
text-lg 1.125rem Large body
text-xl 1.25rem Small headings
text-2xl 1.5rem Headings
text-3xl 1.875rem Large headings
text-4xl 2.25rem Hero text
text-5xl 3rem Display text
text-6xl 3.75rem Hero display

Spacing

Standard spacing scale (in rem):

Token Value
1 0.25rem (4px)
2 0.5rem (8px)
3 0.75rem (12px)
4 1rem (16px)
5 1.25rem (20px)
6 1.5rem (24px)
8 2rem (32px)
10 2.5rem (40px)
12 3rem (48px)
16 4rem (64px)
20 5rem (80px)

Border Radius

Token Value
rounded 0.25rem (4px)
rounded-lg 0.5rem (8px)
rounded-xl 0.75rem (12px)
rounded-2xl 1rem (16px)
rounded-3xl 1.5rem (24px)
rounded-full 9999px

Shadows

Token Value
shadow-sm 0 1px 2px rgba(0,0,0,0.05)
shadow 0 1px 3px rgba(0,0,0,0.1)
shadow-soft 0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)
shadow-hover 0 10px 40px -10px rgba(0,0,0,0.12)
shadow-lg 0 10px 15px -3px rgba(0,0,0,0.1)

Animations

Keyframe Animations

Animation Description
fade-in Fade in from 0 to 100% opacity
slide-up Fade in + slide up 20px
scale-in Fade in + scale from 0.95 to 1

Animation Durations

Token Value
duration-75 75ms
duration-100 100ms
duration-150 150ms
duration-200 200ms
duration-300 300ms
duration-500 500ms

Animation Delays

Custom delay classes available:

  • animate-delay-100 - 100ms delay
  • animate-delay-200 - 200ms delay
  • animate-delay-300 - 300ms delay
  • animate-delay-400 - 400ms delay

Components

Button

Variants:

  • primary - Solid primary color background
  • secondary - White with border
  • ghost - No background
  • danger - Red for destructive actions

Sizes:

  • sm - Small (32px height)
  • md - Medium (40px height)
  • lg - Large (48px height)

Input

  • Full-width text input
  • Rounded corners (xl)
  • Focus ring on focus
  • Error state with red border
  • Label above input

Card

  • White background
  • Soft shadow
  • Rounded corners (2xl)
  • Optional hover effect

Badge

  • Pill-shaped (full rounded)
  • Small text
  • Primary or accent color variants

Layout

Container

  • Max width: 72rem (1152px)
  • Horizontal padding: 1rem (mobile), 1.5rem (sm), 2rem (lg)

Responsive Breakpoints

Breakpoint Min Width
sm 640px
md 768px
lg 1024px
xl 1280px
2xl 1536px

Usage Examples

Button

<Button variant="primary" size="md">Click Me</Button>

Input

<Input label="Email" type="email" placeholder="Enter email" />

Card

<div className="card">
  Card content
</div>

Gradient Background

<div className="bg-gradient-to-br from-primary-50 via-white to-accent-50">
  Content
</div>

Tailwind Configuration

The design system is configured in tailwind.config.js:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: { /* colors */ },
        accent: { /* colors */ },
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
      boxShadow: {
        'soft': '...',
        'hover': '...',
      },
      animation: {
        'fade-in': '...',
        'slide-up': '...',
        'scale-in': '...',
      },
    },
  },
}