Design System

Style Guide

Design tokens, typography, surfaces, and utilities powering this portfolio.

Color Palette

Brand Gradient

#BD0000#FF7A00#FFC900

Accent

accent-start

#EAB308

accent-main

#EF4444

accent-end

#B91C1C

myblue

#1FABE1

mydarkblue

#0E7DA7

Neutral Scale

100

200

300

400

500

600

700

800

900

Semantic

Success

Info

Warning

Error

Typography

Typeface — Inter

DisplayWhat I'm Building

H1 — text-4xl boldPage Title

H2 — text-3xl boldSection Heading

H3 — text-2xl semiboldSub-section

H4 — text-xl semiboldCard Title

Body — text-baseRegular paragraph text for long-form content.

Small — text-smSecondary labels and captions.

XS — text-xsMetadata, timestamps, tags.

Text Utilities

Gradient Title

.gradient-title

Animated Underline

.animated-underline

Custom Underline

.custom-underline

Surfaces & Elevation

Glass Effect

.glass-effect

bg-white/20 backdrop-blur-xl border-white/20

Card (default)

Used throughout the site

bg-white/40 backdrop-blur-xl border-black/10

Elevated Card

shadow-xl shadow-black/5

bg-white shadow-xl

Gradient Border

.gradient-border

before: blue→purple gradient

Main Border

.main-border

border-gray-300 dark:border-gray-600

Card Gradient

Brand tinted surface

from-red-50 to-yellow-50

Interactive Elements

Buttons

Badges

BrandDefaultSuccessInfoWarningError

Input

Border Radius

2xl

3xl

full

Spacing Scale

4px

8px

12px

16px

24px

32px

40px

48px

64px

Custom Utilities

.glass-effect

Frosted glass surface — bg-white/20 backdrop-blur-xl border-white/20

.gradient-title

Red→Gold gradient clipped to text — used for hero and section headings

.animated-underline

Width-expanding underline on hover using brand gradient

.custom-underline

Decoration-transparent baseline with hover reveal

.clickable

hover:scale-[1.03] hover:shadow-md active:scale-[0.97] — generic lift

.main-border

border-gray-300 dark:border-gray-600 — consistent border across themes

.gradient-border

Pseudo-element blue→purple gradient border via before: overlay

.smooth-tab

focus-visible:ring-accent-main for accessible keyboard nav