Skip to main content

​
Overview

This portfolio uses a comprehensive Spotify-inspired theme with custom utility classes, global styles, and a dark-first design approach. All customization is done through Tailwind CSS and global CSS files.

​
Global Styles

The main stylesheet is located at src/app/globals.css:1: 
@tailwind base;
@tailwind components;
@tailwind utilities;

html {
  scroll-behavior: smooth;
}

​
Spotify Color System

The theme includes extended color utilities beyond the base Tailwind config. These are defined in src/app/globals.css:9:

​
Background Colors

Utility ClassHex ColorUsage
bg-spotify-green#1DB954Primary actions, CTAs
bg-spotify-dark-green#189a45Hover states for green elements
bg-spotify-black#121212Main background
bg-spotify-light-dark#212121Cards, elevated surfaces
bg-spotify-gray#535353Disabled states
bg-spotify-gray-hover#323131Hover states for gray elements
bg-spotify-light-gray#B3B3B3Subtle backgrounds
bg-spotify-white#FFFFFFInverted sections

​
Text Colors

Matching text utilities are defined at src/app/globals.css:43: 
/* Define text colors */
.text-spotify-green {
  @apply text-[#1DB954];
}

.text-spotify-black {
  @apply text-[#121212];
}

.text-spotify-light-dark {
  @apply text-[#212121];
}

.text-spotify-gray {
  @apply text-[#535353];
}

.text-spotify-light-gray {
  @apply text-[#B3B3B3];
}

.text-spotify-white {
  @apply text-[#FFFFFF];
}
These utilities use Tailwind’s @apply directive to maintain consistency with Tailwind’s utility-first approach while allowing custom color values.

​
Default Body Styles

The body element has default dark theme styling at src/app/globals.css:69: 
body {
  @apply bg-spotify-black text-spotify-white;
}
This ensures the entire site has a dark background with white text by default, matching Spotify’s design language.

​
Custom Scrollbar Styling

The portfolio includes custom scrollbar styles for a polished look at src/app/globals.css:73: 
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
  background-color: #444;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}

​
Scrollbar Colors

  • Width: 8px (thin scrollbar)
  • Track: #1a1a1a (dark background)
  • Thumb: #444 (medium gray)
  • Thumb Hover: #555 (lighter gray)
The custom scrollbar styling provides a cohesive dark theme experience across all modern browsers, matching the Spotify aesthetic.

​
Customizing the Theme

To adapt this theme for your own brand:

​
1. Update Core Colors

Edit tailwind.config.ts:29 to change the base color palette: 
colors: {
  brand: {  // Rename from 'spotify'
    primary: "#YOUR_PRIMARY_COLOR",
    dark: "#YOUR_DARK_COLOR",
    light: "#YOUR_LIGHT_COLOR",
    accent: "#YOUR_ACCENT_COLOR",
  },
}

​
2. Update Utility Classes

Update src/app/globals.css:9 to match your new color names: 
@layer utilities {
  .bg-brand-primary {
    @apply bg-[#YOUR_PRIMARY_COLOR];
  }
  
  .text-brand-primary {
    @apply text-[#YOUR_PRIMARY_COLOR];
  }
  
  /* Add more utilities as needed */
}

​
3. Update Body Defaults

Change the default background and text colors at src/app/globals.css:69: 
body {
  @apply bg-brand-dark text-brand-light;
}

​
4. Find and Replace

Use your editor to find and replace all instances of:
  • spotify-green → brand-primary
  • spotify-black → brand-dark
  • spotify-white → brand-light
Make sure to update both the Tailwind config and the global CSS file to keep your theme consistent across the entire application.

​
Dark Mode Approach

This portfolio uses a dark-first approach rather than Tailwind’s built-in dark mode:
  • Default styles are designed for dark mode
  • No dark: prefix needed for most utilities
  • Entire design system is built around dark backgrounds
  • Light mode is not currently implemented

​
Why Dark-First?

  1. Brand Alignment: Matches Spotify’s dark interface
  2. Simplicity: No need to maintain two color schemes
  3. Performance: Smaller CSS bundle without dark mode variants
  4. Consistency: Ensures all components look cohesive
If you want to add light mode support, enable Tailwind’s dark mode in tailwind.config.ts and add dark: prefixed classes to your components.

​
Color Accessibility

The Spotify color palette maintains good contrast ratios:
  • Green on Black: #1DB954 on #121212 (AAA rated for large text)
  • White on Black: #FFFFFF on #121212 (AAA rated)
  • Grey on Black: #B3B3B3 on #121212 (AA rated)
Always test your color combinations with a contrast checker tool to ensure accessibility compliance with WCAG 2.1 guidelines.

​
Smooth Scrolling

The theme enables smooth scrolling behavior at src/app/globals.css:5: 
html {
  scroll-behavior: smooth;
}
This creates smooth transitions when navigating to anchor links, enhancing the user experience.

​
Next Steps

Tailwind Configuration

Explore the complete Tailwind config setup

Animations

Learn about custom animations and transitions

Build docs developers (and LLMs) love

Get started for freeTalk to us