Design System

Colors

Our color system uses a 100-point scale (50, 100, 150, 200, 300...900) where 500 is typically the base color.

Gray Scale

Primary (Sky Blue)

Accent Colors

Vibrant colors used for variety and visual interest throughout the portfolio.

Sky Blue

Coral

Emerald

Amber

Indigo

Pink

Cyan

Purple

Red

Semantic Colors

Typography

Font Sizes

Font Weights

Spacing

Consistent spacing scale for layouts and components.

Shadows

Shadow definitions for elevation and depth.

Icons

FontAwesome icons used throughout the portfolio for consistent iconography. All icons adapt to the current theme.

Solid Icons

Commonly used solid icons for actions, UI elements, and general purposes.

Brand Icons

Technology and social media brand icons used in the portfolio.

Regular Icons

Outlined regular icons for a lighter visual weight.

Icon Colors

Icons can be styled with any color from the design system palette.

Usage Examples

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faHeart, faCode, faCheck } from "@fortawesome/free-solid-svg-icons";
import { faGithub } from "@fortawesome/free-brands-svg-icons";
import { colors } from '../styles/designSystem';

// Basic usage
<FontAwesomeIcon icon={faHeart} />

// With inline color styling
<FontAwesomeIcon
  icon={faHeart}
  style={{ fontSize: '2rem', color: colors.coral[500] }}
/>

// With styled-components
const StyledIcon = styled(FontAwesomeIcon)`
  font-size: 2rem;
  color: ${colors.emerald[500]};
  margin-right: ${spacing.md};

  &:hover {
    color: ${colors.emerald[600]};
  }
`;

<StyledIcon icon={faCode} />

// Using theme colors
const ThemedIcon = styled(FontAwesomeIcon)`
  font-size: 1.5rem;
  color: ${({ theme }) => theme.primary};
`;

// Semantic color usage
<FontAwesomeIcon
  icon={faCheck}
  style={{ color: colors.success.base }}
/>

// In a button with color
<DemoButton>
  <FontAwesomeIcon icon={faGithub} style={{ color: '#fff' }} />
  View on GitHub
</DemoButton>

Buttons

Interactive button components with consistent states and behaviors.

Usage Examples

import { primaryButtonBase } from '../styles/buttonStyles';

const Button = styled.button`
  ${primaryButtonBase}
  background-color: ${colors.primary[500]};
`;

// With loading state
const LoadingButton = styled.button`
  ${primaryButtonBase}
  ${({ loading }) => loading && `
    position: relative;
    color: transparent;

    &::after {
      content: '';
      position: absolute;
      width: 16px;
      height: 16px;
      border: 2px solid #ffffff;
      border-radius: 50%;
      border-top-color: transparent;
      animation: spin 0.6s linear infinite;
    }
  `}
`;

Navigation

Navigation components with distinctive hover and active states for clear user feedback.

Design Principles

The navigation system follows these key principles:

• Clear States: Hover uses a subtle gray background, distinct from the active state
• Dynamic Colors: Active items use random accent colors that change on navigation
• Visual Hierarchy: Active items have bold text and colored backgrounds
• Smooth Transitions: All state changes animate smoothly with CSS transitions

Usage Examples

import styled from 'styled-components';
import { getRandomAccentColor } from '../styles/designSystem';

const NavLink = styled.a`
  display: block;
  padding: ${spacing.xs} ${spacing.sm};
  font-size: ${typography.fontSize.sm};
  color: ${({ $isActive, $accentColor, theme }) =>
    $isActive ? $accentColor : theme.subtleText};
  text-decoration: none;
  border-radius: ${borderRadius[150]};
  transition: all 0.2s ease;
  cursor: pointer;
  font-weight: ${({ $isActive }) =>
    $isActive ? typography.fontWeight.semibold : typography.fontWeight.normal};
  background: ${({ $isActive, $accentColor }) =>
    $isActive ? `${$accentColor}15` : 'transparent'};

  &:hover {
    color: ${({ theme }) => theme.text};
    background: ${({ theme }) =>
      theme.mode === 'dark'
        ? 'rgba(255, 255, 255, 0.05)'
        : 'rgba(0, 0, 0, 0.04)'};
  }
`;

// Component usage with random colors
const Navigation = () => {
  const [activeSection, setActiveSection] = useState('home');
  const [accentColor, setAccentColor] = useState(() => getRandomAccentColor()[500]);

  const handleNavClick = (sectionId) => {
    setActiveSection(sectionId);
    setAccentColor(getRandomAccentColor()[500]); // New color on each navigation
  };

  return (
    <nav>
      <NavLink
        $isActive={activeSection === 'home'}
        $accentColor={accentColor}
        onClick={() => handleNavClick('home')}
      >
        Home
      </NavLink>
      <NavLink
        $isActive={activeSection === 'about'}
        $accentColor={accentColor}
        onClick={() => handleNavClick('about')}
      >
        About
      </NavLink>
    </nav>
  );
};

Bullet Lists

Styled bullet lists with automatic formatting, accent color bullets, and support for title/description splits. Used primarily in case study pages for Key Features sections.

Live Examples

The SectionBlock component automatically detects bullet points (starting with •, -, or *) and renders them with styled bullets.

Features

The bullet list component includes several smart features:

• Automatic Detection: Detects bullet characters (•, -, *) and converts to styled bullets
• Title Parsing: Automatically splits "Title: Description" format with bold titles
• Accent Colors: Bullet dots inherit the section's accent color
• Perfect Alignment: Bullets stay aligned at the top while text wraps naturally
• Consistent Spacing: Uses design system spacing tokens for uniformity

Usage Example

import SectionBlock from '../components/sub-components/SectionBlock';
import { colors } from '../styles/designSystem';

// Basic usage with bullet points
<SectionBlock
  title="Key Features"
  accentColor={colors.emerald[500]}
  paragraphs={[
    "• First feature description",
    "• Second feature description",
    "• Third feature description"
  ]}
/>

// With title: description format
<SectionBlock
  title="Deliverables"
  accentColor={colors.coral[500]}
  paragraphs={[
    "• Design System: Built comprehensive component library for consistency",
    "• User Research: Conducted 20+ usability tests with target users",
    "• Prototyping: Created high-fidelity prototypes for stakeholder review"
  ]}
/>

// Alternative bullet characters work too
<SectionBlock
  title="Technical Skills"
  accentColor={colors.indigo[500]}
  paragraphs={[
    "- React and TypeScript for component development",
    "- Figma for design and prototyping",
    "* Accessibility testing with screen readers"
  ]}
/>

Implementation Details

// The SectionBlock component automatically handles bullet detection
const hasBulletPoints = paragraphs?.some(para =>
  typeof para === 'string' &&
  (para.trim().startsWith('•') ||
   para.trim().startsWith('-') ||
   para.trim().startsWith('*'))
);

// Styled bullet with accent color
const BulletItem = styled.li`
  display: flex;
  align-items: flex-start;
  gap: ${spacing[400]};

  &::before {
    content: "";
    min-width: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: ${({ accentColor, theme }) =>
      accentColor || theme.primary};
    margin-top: 10px;
    flex-shrink: 0;
  }
`;

Metrics Cards

Interactive metric cards with hover effects, colored borders, and responsive grid layout. Used to showcase key performance indicators and project impact in case studies.

Live Examples

Metrics cards automatically arrange in a responsive grid and lift on hover to provide visual feedback.

Features

The metrics card component provides several key features:

• Responsive Grid: Auto-fit layout with minimum 200px cards that adapts to screen size
• Hover Effects: Cards lift up and enhance shadow on hover for interactivity
• Accent Colors: Left border and value text use customizable accent colors
• Optional Descriptions: Support for additional context below the label
• Smooth Transitions: Animated hover states using design system transitions

Usage Example

import MetricsCard from '../components/sub-components/MetricsCard';
import { colors } from '../styles/designSystem';

// Basic usage
<MetricsCard
  metrics={[
    {
      value: "50%",
      label: "Conversion Rate",
      color: colors.emerald[500]
    },
    {
      value: "2.5s",
      label: "Load Time",
      color: colors.cyan[500]
    }
  ]}
/>

// With descriptions
<MetricsCard
  metrics={[
    {
      value: "Millions",
      label: "User Reach",
      description: "Features used by nationwide customer base",
      color: colors.coral[500]
    },
    {
      value: "Enterprise",
      label: "Scale",
      description: "Built for large-scale deployment",
      color: colors.indigo[500]
    },
    {
      value: "15+",
      label: "Integrations",
      description: "Connected with major platforms",
      color: colors.purple[500]
    }
  ]}
/>

Implementation Details

import styled from "styled-components";
import { spacing, typography, shadows, borderRadius, transitions } from "../../styles/designSystem";

const MetricsGrid = styled.div`
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: ${spacing[600]};
    margin: ${spacing[800]} 0;
`;

const MetricCard = styled.div`
    background: ${({ theme }) => theme.cardBackground};
    border-radius: ${borderRadius[400]};
    padding: ${spacing[600]};
    box-shadow: ${shadows[300]};
    border-left: 4px solid ${({ accentColor, theme }) => accentColor || theme.primary};
    transition: ${transitions.base};

    &:hover {
        transform: translateY(-4px);
        box-shadow: ${shadows[500]};
    }
`;

const MetricValue = styled.div`
    font-size: ${typography.fontSize[800]};
    font-weight: ${typography.fontWeight.bold};
    color: ${({ accentColor, theme }) => accentColor || theme.primary};
    margin-bottom: ${spacing[200]};
    line-height: ${typography.lineHeight.tight};
`;

const MetricLabel = styled.div`
    font-size: ${typography.fontSize[300]};
    color: ${({ theme }) => theme.textSecondary};
    line-height: ${typography.lineHeight.snug};
    font-weight: ${typography.fontWeight.medium};
`;

const MetricDescription = styled.p`
    font-size: ${typography.fontSize[200]};
    color: ${({ theme }) => theme.text};
    margin: ${spacing[300]} 0 0 0;
    line-height: ${typography.lineHeight.relaxed};
`;

Data Structure

// Metric object interface
interface Metric {
  value: string;          // The main metric value (e.g., "50%", "2x", "Millions")
  label: string;          // The metric label (e.g., "User Reach", "Conversion Rate")
  description?: string;   // Optional descriptive text for context
  color: string;          // Accent color for border and value (from design system)
}

// Usage in case study template
const metrics = [
  {
    value: "Millions",
    label: "User Reach",
    description: "Features used by nationwide customer base",
    color: colors.emerald[500]
  }
];

Status Messages

Status and notification messages for user feedback (used in forms and alerts).

Usage Example

import styled from "styled-components";

export const StatusMessage = styled.div`
  padding: 1rem;
  border-radius: 0.5rem;
  font-size: 0.95rem;
  line-height: 1.5;

  background: ${({ type, theme }) =>
    type === "success"
      ? theme.mode === "dark"
        ? "rgba(16, 185, 129, 0.2)"
        : "rgba(16, 185, 129, 0.1)"
      : theme.mode === "dark"
      ? "rgba(239, 68, 68, 0.2)"
      : "rgba(239, 68, 68, 0.1)"};

  border: 1px solid ${({ type }) =>
    type === "success" ? "#10B981" : "#EF4444"};

  color: ${({ type, theme }) =>
    type === "success"
      ? theme.mode === "dark"
        ? "#34D399"
        : "#059669"
      : theme.mode === "dark"
      ? "#F87171"
      : "#DC2626"};
`;

// Usage in components
{submitStatus.message && (
  <StatusMessage type={submitStatus.type}>
    {submitStatus.message}
  </StatusMessage>
)}

Usage

Import and use the design system in your components:

Importing

import { colors, spacing, typography, shadows } from '../styles/designSystem';

Using in Styled Components

const Button = styled.button`
  background: ${colors.primary};
  padding: ${spacing.md} ${spacing.xl};
  font-size: ${typography.fontSize.base};
  border-radius: ${borderRadius.full};
  box-shadow: ${shadows.base};

  &:hover {
    box-shadow: ${shadows.md};
  }
`;

Using Theme Properties

const Card = styled.div`
  background: ${({ theme }) => theme.cardBackground};
  color: ${({ theme }) => theme.text};
  border: 1px solid ${({ theme }) => theme.borderLight};
`;

Helper Functions

import { getRandomAccentColor, hexToRgba } from '../styles/designSystem';

// Get a random accent color
const randomColor = getRandomAccentColor();

// Convert hex to rgba with opacity
const semiTransparent = hexToRgba(colors.primary, 0.1);