Groq

May '25 - Dec '25

From May to December 2025, I worked at Groq as a Product Design Intern on the GroqCloud platform. Over 8 months, I led the creation of a comprehensive design system for the entire console frontend—standardizing visual language, reducing color conventions from 30 to 14, and building a scalable component library. Alongside this foundational work, I designed and shipped multiple platform features, from LoRA management interfaces to mobile-optimized modals, while contributing directly to the codebase.

Overview

GroqCloud's rapid growth had led to inconsistent UI patterns across the platform. Colors were duplicated under different naming conventions, components had multiple implementations, and there was no single source of truth for design decisions. The engineering team needed a system that would accelerate development while ensuring visual consistency.

Design System

I broke the design system into two phases: Foundations — Colors, typography, icons, spacing, and elevation; and Components — Reusable UI elements from buttons to complex inputs.

Foundations

I began by auditing every color in use across the console, uncovering duplicates and near-identical shades scattered throughout the codebase. After consolidating these into a streamlined palette, I built a Tailwind CSS-based color system with shades from 50-950, reducing 30 different color conventions down to 14 core values.

To make the system truly scalable, I introduced semantic naming conventions that mapped to the Tailwind palette. Instead of ambiguous names like $neutral-popover-foreground, designers and engineers could now reference clear, purpose-driven tokens like $text-primary, $text-secondary, or $background-default.

This approach enabled seamless theme switching—$background-default maps to $neutral-50 in both light and dark modes without requiring overrides, making theming effortless.

Using Tailwind as the framework, I defined text styles split between body and headings, with each style following a text-type-size convention (e.g., text-body-small, text-heading-large). Size, weight, line-height, and tracking were all standardized within this system.

Icons were sourced from the Lucide library, and spacing utilized a consistent scale based on rem units (1 rem = 16px) with tokens like $spacing-04 and $spacing-06.

Components

After auditing the console, I identified every repeated UI element that could be componentized. Each component was designed across three sizes (small, default, large), implemented in both light and dark modes, and documented with hover, active, and disabled states.

Many components required multiple variants to cover different use cases. For example, the button component included:

button-primary, button-secondary, button-ghost

button-dropdown, button-pill, button-outline, button-split

Impact

The design system became the foundation for all new GroqCloud development, enabling faster implementation, consistent user experience, and easier onboarding for new designers and engineers.

Feature Design & Development

Beyond the design system, I designed and shipped several key platform features:

LoRA Management Interface

Designed an iterative evolution from card-based layouts to a streamlined list-based interface for managing LoRA fine-tuned models, improving information density and scanning efficiency.

Usage Dashboard

Created a comprehensive dashboard for monitoring API usage statistics, costs, and analytics, giving users clear visibility into their GroqCloud consumption.

Documentation Search (cmd+k)

Designed an AI-powered command palette for quick documentation access, integrating intelligent question-answering directly into the console workflow.

Direct Code Contributions

In addition to design work, I contributed to the GroqCloud codebase, shipping both polish improvements and new feature implementations.