Overview

Vertabase is A scalable, token-driven design system built for Vertex Software Corp (a development agency), aimed at establishing reusable patterns and components to reduce dev handoff friction, help the team ship designs faster, giving every client project a tested starting point.

The Problem

As an agency, Vertex Software Corp designs across many industries and clients. Without a shared foundation, every new project meant rebuilding the same decisions from scratch: which grey colour to use, how to express error and success states, which type sizes to pair. That led to three recurring issues:

• Inconsistency between projects and between designers on the same project
• Slow starts, because the first days of every engagement went to setting up styles
• Messy handoff, because values were hard-coded and not mapped to anything developers could reuse

The Goal

Create one foundation that works as a starting point for any project while staying flexible enough to be themed for each client and the system needs to be:

1. Tested, refined across real projects rather than designed in isolation
2. Token-based, so a single change cascades everywhere
3. Documented, so anyone can pick it up without asking me

My Approach

Foundation

01. Colour

The colour page organises the palette into clear families, each on a 50 to 900 scale so designers always have a lighter or darker step available for states, borders and backgrounds.

Gradients. Error, warning and success each have paired gradients (500 to 700, 600 to 800, 700 to 900), plus a set of image-based gradient backgrounds for hero areas and feature cards.