Making Design at Oxen AI Scalable.

  • Oxen AI
  • Winter 2022

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 and 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 a Front-End Engineer and a Product Designer (me).

Mockup of the Oxen AI website.

Problem

As I was building out features for Oxen’s MVP, design consistency became vital to ensuring 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 and defined the platform’s spacing using a 5-pixel grid. With the basics down, I created components for frequently used elements.

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

Solution

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

Oxen AI logo mockup, built from a sigmoid and a parabola curve
The logo's two curves — a sigmoid and a parabola — nod directly to machine learning.

Loading Animation

Colors

Grid of Oxen AI's brand colors
Colors

Typography

Grid of Oxen AI's typography styles
Typography

Iconography

Grid of Oxen AI's icon library (Teeny Icons)
Iconography (Teeny Icons)

Components

Grid of Oxen AI's form components
Form Components
Grid of Oxen AI's button and tag components
Button & Tag Components
Grid of Oxen AI's card components
Card Components

Website

Mockup of the Oxen AI marketing website
The refreshed marketing site, built on the new component library.

Results

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