Back to Home

Color System Reference

Complete color palette and component usage guide for the portfolio project. All colors are defined in styles/globals.css using Tailwind v4's @theme inline directive.

Brand Red

Primary brand color used for CTAs, highlights, and accents

Used In:

  • Header - Back button hover
  • ProfileDesc - "Let's talk" button, social icon hovers
  • Footer - Social icon hovers, link hovers
  • Methodologies - Compare button, dropdown trigger hover
  • PortfolioCard - Featured badge, decorative dots

brand-50

Lightest - Backgrounds, subtle highlights

brand-100

Light - Hover backgrounds

brand-200

Medium-light - Borders

brand-300

Medium - Secondary accents

brand-400

Medium-dark - Active states

brand-500

Base - Primary buttons, main accents

brand-600

Dark - Hover states, primary text

brand-700

Darker - Active buttons

brand-800

Very dark - Dark mode accents

brand-900

Darkest - Dark mode backgrounds

AI Purple

Used for AI/Learning category and related components

Used In:

  • PortfolioSection - AI Learning/Exploration category icon
  • PortfolioCard - Code button gradient (from-ai-400 to-design-400)
  • Methodologies - Paradigm category badges
  • TechStack - Learning source icon background

ai-50

Lightest - Backgrounds

ai-100

Light - Category badges background

ai-200

Medium-light - Borders

ai-300

Medium - Secondary accents

ai-400

Medium-dark - Gradients, icons

ai-500

Base - Category colors

ai-600

Dark - Icon colors

ai-700

Darker - Text on light backgrounds

ai-800

Very dark - Category badge text

ai-900

Darkest - Dark mode backgrounds

Design Pink

Used for Frontend/UI/UX category and design elements

Used In:

  • PortfolioSection - Frontend/UI/UX category icon
  • PortfolioCard - Code button gradient (to-design-400)
  • Methodologies - Design category badges

design-50

Lightest - Backgrounds

design-100

Light - Category badges background

design-200

Medium-light - Borders

design-300

Medium - Secondary accents

design-400

Medium-dark - Gradients

design-500

Base - Category colors

design-600

Dark - Icon colors

design-700

Darker - Text on light backgrounds

design-800

Very dark - Category badge text

design-900

Darkest - Dark mode backgrounds

Stack Blue

Used for Full Stack category and technical elements

Used In:

  • PortfolioSection - Full Stack category icon
  • PortfolioCard - Live button gradient (to-stack-400), team size icon, decorative dots
  • Methodologies - Principle category badges
  • TechStack - Experience icon background
  • Footer - React tech indicator

stack-50

Lightest - Backgrounds

stack-100

Light - Category badges background

stack-200

Medium-light - Borders, team icon text

stack-300

Medium - Icon highlights

stack-400

Medium-dark - Gradients, animated indicators

stack-500

Base - Category colors

stack-600

Dark - Icon colors

stack-700

Darker - Text on light backgrounds

stack-800

Very dark - Category badge text

stack-900

Darkest - Dark mode backgrounds

Fun Green

Used for Fun/Sandbox category and positive indicators

Used In:

  • PortfolioSection - Fun/Sandbox category icon
  • PortfolioCard - Live button gradient (from-fun-400), duration icon
  • Methodologies - Process category badges, Low complexity indicators
  • TechStack - Confidence level icon background
  • Footer - Tailwind tech indicator

fun-50

Lightest - Backgrounds, Low indicators

fun-100

Light - Category badges background

fun-200

Medium-light - Borders, duration icon text

fun-300

Medium - Icon highlights

fun-400

Medium-dark - Gradients, animated indicators

fun-500

Base - Category colors

fun-600

Dark - Icon colors

fun-700

Darker - Text on light backgrounds, Low indicators

fun-800

Very dark - Category badge text

fun-900

Darkest - Dark mode backgrounds

Gray Scale

Neutral colors used throughout the application

Used In:

  • All Components - Text, backgrounds, borders
  • ProfileDesc - Hero title (text-gray-500)
  • TechStack - Card backgrounds (bg-gray-50 dark:bg-gray-800)
  • Footer - Backgrounds, borders, text hierarchy
  • PortfolioSection - Section titles (text-gray-700 dark:text-gray-400)

gray-50

Lightest - Main backgrounds, card backgrounds

gray-100

Light - Hover backgrounds

gray-200

Medium-light - Borders, separators

gray-300

Medium - Secondary borders, disabled text

gray-400

Medium-dark - Tertiary text, placeholders

gray-500

Base - Section titles, body text

gray-600

Dark - Secondary text

gray-700

Darker - Primary text, headings

gray-800

Very dark - Dark mode text, card backgrounds

gray-900

Darkest - Dark mode backgrounds

Common Gradients

from-fun-400 to-stack-400

Used in: PortfolioCard "Live" button hover

from-ai-400 to-design-400

Used in: PortfolioCard "Code" button hover

from-brand-500 to-stack-500

Used in: General brand gradients

Interactive Examples

Color System Summary

5

Color Themes

60

Total Color Shades

15+

Components Using System