FontSplash

Overview

FontSplash is a personal project built to show design skill, frontend engineering, and backend integration. It helps users explore visual styles through curated themes and AI generated combinations. Each theme combines typography, colors, gradients, descriptive text, and a consistent structure that can be previewed instantly.

The goal was to create a fast tool that supports creative exploration without requiring external design software. The tool also demonstrates dynamic font loading, AI assisted generation, theme filtering, and a full user interface designed in Figma.

The Problem

Designers and developers often need quick inspiration when experimenting with color palettes and typography. Moving between design tools slows down the early exploration phase. Many AI tools require logins or impose strict limits, which interrupts the workflow. FontSplash was created to solve these problems by offering instant theme previews and simple generation with no required authentication.

The Solution

FontSplash provides curated themes, AI generation, dynamic font loading, and color based filtering. The backend route sends user prompts to an AI model that returns structured JSON objects. The server extracts these objects and sends them directly to the client. The frontend renders the themes in real time and loads Google Fonts only when needed. This gives each card accurate typography and makes theme browsing visually consistent.

AI Integration

The generation route sends the user prompt to the OpenAI API with a strict instruction to return a JSON array with defined keys. A regex extracts the array to ensure that the response stays predictable. This allows each theme to include a title, two fonts, several colors, a gradient or solid background, and descriptive body text. The system remains stateless with no user accounts or authentication requirements.

Filters and Categorization

FontSplash includes a theme directory with filters for both fonts and color families. Color grouping is done by converting hex values to RGB and comparing them to a selection of reference colors using Euclidean distance. This allows the interface to categorize themes into groups such as Red, Blue, Yellow, or Gray without any manual tagging.

Styling and Interface

The UI was designed fully in Figma. The theme cards display title typography, body text, accent bands, gradients, and clickable swatches that copy color values to the clipboard. Each font is loaded dynamically when a card mounts. The layout is built with React and Tailwind utilities, giving the project responsive behavior and a consistent visual structure.

Challenges and Learnings

Building a consistent theme schema for the AI required trial and error to ensure predictable output. Dynamic font loading also needed careful handling to avoid duplicate imports. Designing an interface that accommodates both gradient backgrounds and solid colors presented additional layout considerations. These challenges helped refine skills in Next.js, API design, and UI engineering.

Outcome

The final result is a complete tool that demonstrates a range of abilities, including interface design, full stack development, AI integration, and frontend performance optimization. It serves as a strong portfolio piece for employers by showing practical engineering decisions and a polished user experience.