Logo System
Primary Mark
Inverted Mark
Logo + Wordmark
Color Palette
Click any swatch to copy the HEX value.
Core Neutrals
Background
#0B080C
hsl(285 20% 4%)
Foreground
#FAFAFA
hsl(0 0% 98%)
Muted Surface
#1C171C
hsl(285 10% 10%)
Muted Text
#BFBFBF
hsl(0 0% 75%)
Ring
#0BDDF1
hsl(186 91% 49%)
Destructive
#7F1D1D
hsl(0 62.8% 30.6%)
Surface Palette
Deep Background
#050406
hsl(285 20% 2%)
Card Top
#120D13
hsl(285 20% 6%)
Card Bottom
#0B080C
hsl(285 20% 4%)
Subtle Border
#1C171D
hsl(285 15% 10%)
Strong Border
#2E252F
hsl(285 12% 16%)
Hover Border
#3A303B
hsl(285 10% 20%)
Accent Colors
Neon Blue
#0BDDF1
Primary accent, links, active states
Muted Blue
#089BB0
Hover states, secondary elements
Success
#22C55E
Positive states, confirmations
Success Light
#4ADE80
Stats, indicators
Data Visualization
Chart 1
#2662D9
hsl(220 70% 50%)
Chart 2
#2EB88A
hsl(160 60% 45%)
Chart 3
#E88C30
hsl(30 80% 55%)
Chart 4
#AF57DB
hsl(280 65% 60%)
Chart 5
#E23670
hsl(340 75% 55%)
Typography
Primary Font
Montserrat
Used for all UI elements across the personal brand and my digital presence.
Monospace
Geist Mono
Used for code snippets, metrics, and programmatic elements.
Type Scale
H1 — 48px / Semi Bold / -0.02em
Building the future
H2 — 36px / Light / -0.02em
Thoughtfully designed
H3 — 24px / Medium / -0.01em
Personal ethos
H4 — 18px / Medium / -0.01em
Digital identity
Body — 16px / Light / -0.01em
My work is a reflection of my commitment to minimal, thoughtful, and impactful design. Every project aims to strike the perfect balance between form and function.
Iconography
Icon Library
Lucide + Tabler outline icons. Prefer outline style only for consistent stroke feel.
Icon Colors
Default: neutral in light mode, near-white (#FAFAFA) in dark mode. Use accent blue (#3B82F6) for interactive states.
Developer Reference
Tailwind Classes
bg-background text-foreground
bg-card text-card-foreground
border-border
text-muted-foreground
bg-primary text-primary-foreground