Riley Schatzle

Loading profile...

0%
Design System

design.style

The visual language, components, and interactions that power this portfolio

Color Palette

Primary 400
#60a5fa
Primary 500
#3b82f6
Primary 600
#2563eb
Accent 400
#c084fc
Accent 500
#a855f7
Stone 300
#d6d3d1
Stone 400
#a8a29e
Stone 700
#44403c
Stone 800
#292524
Stone 900
#1c1917

Typography

Herotext-5xl md:text-7xl font-bold
Riley Schatzle
Heading 1text-4xl font-bold
Full-Stack Creative Ops
Heading 2text-2xl font-bold
About Me
Heading 3text-xl font-bold
Core Skills & Expertise
Body Largetext-lg
I work at the intersection of aesthetics, automation, and existential curiosity.
Bodytext-base
Building digital experiences that function and inspire.
Body Smalltext-sm
Professional portrait photo
Captiontext-xs
Frontend Development

Components

Preloader

<Preloader />

File extraction animation with segmented progress bars and loading states

Loading components...

design.tsx • 3.2kb

Button - Primary

<Button variant="primary" />

Main call-to-action button

Button - Ghost

<Button variant="ghost" />

Secondary actions with subtle effect

GlassmorphismIcon

<GlassmorphismIcon size="md">

Social media and action icons with glass background

VerificationBadge

<VerificationBadge size="md" />

14-sided star badge with blue background and white checkmark

Small
Medium
Large

Hero CTA Button

<motion.button> with refraction effects

Homepage hero section animated button with refraction effects

Footer Code Links

<a className="font-mono"> with syntax highlighting

Terminal-style navigation links with syntax highlighting

./about();
./design.style();

Project Card

<div className="bg-stone-800/30 backdrop-blur-lg">

Standard project showcase card with hover effects

Sample Project

A demonstration of our card component styling and hover effects.

Philosophy Card (Enhanced)

Custom enhanced philosophy card with preloader effects

About page philosophy cards with preloader-inspired animations and segmented progress bars

humans first.

tech should extend intuition—not replace it.

loading empathy.core...

Background Effects

MatrixBackground

Animated falling characters effect with Japanese katakana

Matrix Rain Effect

HeroBackground

Animated geometric patterns with floating elements

Hero Patterns

Grid Background

Subtle grid pattern used throughout the portfolio

Grid Pattern

Glassmorphism

Backdrop blur with transparency and borders

Glass Effect

Special Elements

Live Clock

Real-time clock in footer

--:--:--

Status Indicators

Availability and project status

Available for projects

DataCode Accents

Functional patterns that encode meaning

Animations & Effects

Fade Up

Scale

Glow

Glass Blur

Design Philosophy

Form Follows Function, Function Follows Intention

Every interface should feel intuitive, every interaction should have purpose, and every visual element should enhance understanding.

This design system prioritizes clarity, consistency, and delight—creating experiences that feel both professional and human.