Extracting files...

colors.palette

2.1kb

typography.scale

1.8kb

components.tsx

4.7kb

animations.css

1.3kb

tokens.json

967b

Processing colors.palette...

0%0/5 files

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

Creative Systems Thinker

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

MatrixText

<MatrixText text="wake up curious" />

Animated text with occasional matrix character substitutions

wake up curious

Characters randomly transform into Japanese katakana

GlassmorphismButton - Primary

<GlassmorphismButton variant="primary" />

Main call-to-action with glassmorphism effect

GlassmorphismButton - Secondary

<GlassmorphismButton variant="secondary" />

Secondary actions with subtle glass 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.