Design System Wiki

// Primary Colors
$primary-color: #000000;        // Main brand color - pure black
$primary-light: #333333;        // Hover states, secondary elements
$secondary-color: #666666;      // Supporting text, borders

// Text Colors
$text-color: #000000;           // Primary text - pure black
$text-light: #666666;           // Secondary text, meta information

// Background Colors
$background-color: #ffffff;     // Main background - pure white
$background-light: #f8f8f8;     // Section backgrounds, cards
$background-dark: #000000;      // Dark sections (if needed)

// Border Colors
$border-color: #e0e0e0;         // Subtle borders, dividers

// Font Sizes
$base-font-size: 16px;          // Base body text
$small-font-size: 14px;         // Small text, meta information
$base-line-height: 1.6;         // Optimal reading line height

// Font Weights
- 300: Light (rarely used)
- 400: Regular (body text)
- 500: Medium (buttons, emphasis)
- 600: Semi-bold (headings, important text)
- 700: Bold (main headings, hero text)

$spacing-unit: 30px;            // Base spacing unit

// Common Spacing Values
- 0.5rem (8px): Tight spacing
- 1rem (16px): Standard spacing
- 1.5rem (24px): Section spacing
- 2rem (32px): Large spacing
- 3rem (48px): Section padding
- 4rem (64px): Hero padding
- 5rem (80px): Major section padding

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 0;             // Sharp edges - NO rounded corners
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  cursor: pointer;
  
  &.btn-primary {
    background: $primary-color;
    color: white;
    
    &:hover {
      background: $primary-light;
    }
  }
  
  &.btn-secondary {
    background: transparent;
    color: $primary-color;
    border-color: $primary-color;
    
    &:hover {
      background: $primary-color;
      color: white;
    }
  }
  
  &.btn-outline {
    background: transparent;
    color: $text-color;
    border-color: $border-color;
    
    &:hover {
      background: $background-light;
      border-color: $primary-color;
      color: $primary-color;
    }
  }
}

.container {
  max-width: 1200px;            // Maximum content width
  margin: 0 auto;               // Center alignment
  padding: 0 20px;              // Horizontal padding
  
  @include media-query($on-palm) {
    padding: 0 16px;            // Reduced padding on mobile
  }
}

// Skills Grid (4 columns → 2 → 1)
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

// Portfolio Grid (3 columns → 2 → 1)
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

// Blog Posts Grid (3 columns → 2 → 1)
.blog-posts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  
  @include media-query($on-laptop) {
    grid-template-columns: repeat(2, 1fr);
  }
  
  @include media-query($on-palm) {
    grid-template-columns: 1fr;
  }
}

$on-palm: 768px;                // Mobile devices
$on-laptop: 1024px;             // Tablets and small laptops
$on-desktop: 1280px;            // Desktop screens

// Maintenance Schedule
- Monthly: Review and update category mappings
- Quarterly: Audit image optimization and performance
- Annually: Review and update design system standards

// Version Control
- Document changes: Update this wiki when making system changes
- Test thoroughly: Verify changes across all breakpoints
- Maintain consistency: All team members must follow these standards