Design System v2.0

The design
foundation.

A creative blend of elegant glassmorphism, interactive 3D elements, and your signature purple aesthetic.

Explore System View Source

Typography

AaBb

Colors

7hues

Components

12+

01 - Typography

Type scale & hierarchy

Making words feel alive

Display XL

Growth Engine

96px / 1.0 / -3%

Display Accent

Creative & Bold

Caveat / 80px

Heading 1

Section Title

48px / 1.1 / -2%

Heading 2

Component Heading

40px / 1.2

Body Large

I build growth engines that find the best audience for your product and convert them into loyal customers.

24px / 1.7

Caption

Skills & Tools

12px / uppercase

Accent Label

hey there!

Caveat / 24px

02 - Colors

Color palette & surfaces

Purple vibes only

Brand Colors

Purple

#7A90FF

Purple Dark

#5A6FFF

Purple Light

#A5B4FF

Accent Colors

Pale Yellow

#F8FCDA

Emerald

#10b981

Dark Purple

#2E294E

Glass Surfaces

.glass-panel

Heavy blur (50px) with gradient background. Perfect for hero sections and modals.

.glass-card

Light blur (20px) with hover lift effect. Ideal for cards and interactive elements.

03 - Components

UI Components

Building blocks of magic

Buttons

Primary: Purple fill with glow shadow, lifts on hover

Secondary: Transparent with border, purple accent on hover

Ghost: Minimal style, subtle background on hover

Status Indicators

Available for work

Currently building

Cards

Stat Card

Display key metrics with visual impact.

Feature Card

Highlight product features or services.

Link Card

Interactive card that links to external content.

Badges & Tags

Marketing Development Design Strategy

04 - Motion

Motion & interaction

Smooth & delightful

Animation Timing

Fast (UI feedback) 150ms ease

Normal (hover states) 300ms ease

Smooth (transforms) 400ms cubic-bezier(0.2, 0.8, 0.2, 1)

Entrance (fade up) 800ms ease-out

3D Background Animation

The Three.js torus knot animation runs in the background with: