Making design at Oxen AI scalable.

While building out the MVP of Oxen, I was tasked with creating a scalable Figma component library to speed up the development of future features. Additionally, I was tasked with updating the company logo & marketing site. The result was a library—defining colors, typography, spacing, layouts, and components—and a new website.

The team for this project consisted of 1 Front-End Engineer and 1 Product Designer (me).

Problem

As I was building out features for Oxen’s MVP, design consistency became vital to ensure we built a professional-looking product.

Process

To start, I leveraged a type scale tool to determine text styles and a contrast ratio tool to define Oxen’s colors. Next, I chose an icon library to use and defined the spacing for the platform using a 5-pixel grid. With the basics down, I created components for frequently used elements.

Simultaneously, I worked on creating a platform logo, a marketing site, marketing collateral, and a platform loading animation.

Solution

Logo

The logo features two curves significant in the field of machine learning— a sigmoid and a parabola.

Loading Animation

Colors

Typography

Iconography (Teeny Icons)

Form Components

Button & Tag Components

Card Components

Website

Marketing Collateral

Results

The resulting component library, website, and logo have been used since Oxen’s public release. This work has supported the creation of cohesive marketing materials and product features.