Design System
A comprehensive guide to the design language used across this portfolio
Colors
Primary Colors
Primary
#5E17EB
Main accent color
Primary Variant
#9234f9
Secondary accent
Secondary
#FF3366
Accent color
Gradient
Primary → Primary Variant
Buttons, highlights
System Colors
Dark
#0a0a0c
Background
Light
#f7f7f7
Text, icons
Glass Effect
rgba(255, 255, 255, 0.03)
Cards, overlays
Glass Border
rgba(255, 255, 255, 0.1)
Border accents
Typography
Welcome to Portfolio
Project Showcase
About Section
Skills & Expertise
Gradient Text Style
This is the standard body text used throughout the website. It's clean, readable, and properly spaced for optimal reading experience. The Inter font provides excellent legibility at various sizes.
This smaller text is used for captions, notes, and less prominent content.
Inter (Primary Font)
Inter is a variable font designed for computer screens, featuring a tall x-height to aid in readability of mixed-case and lower-case text.
Components
Buttons
Cards
Basic Card
A simple card with basic content and hover effect.
Image Card
A card with an image and content below.
Feature Card
A card highlighting a feature or service.
Pills and Badges
Form Elements
Effects & Animations
Glass Effect
Frosted Glass
With blur and transparency
Glass morphism adds depth and elegance to the UI with subtle transparency and blur effects.
Hover Effects
Lift Effect
Color Shift
Interactive hover states provide feedback and improve user experience.
Spacing
Scale
Usage Examples
Page Sections
Sections use py-section (6rem) for vertical padding
Component Spacing
Components use medium and small spacing for margins