← Back to work Next project →

I created Quartz, a scalable design system that helped Harvest product teams ship faster, stay consistent and reduce design debt.

Design System Figma Scale
01import React from 'react'
02import { Button } from '@/components/ui/button'
03import { cn } from '@/lib/utils'
04import { Badge } from '@/components/ui/badge'
05import { Input } from '@/components/ui/input'
06
07interface ButtonProps {
08 variant: 'default' | 'secondary' | 'outline'
09 size?: 'sm' | 'md' | 'lg'
10 disabled?: boolean
11}
12
13export const ButtonDemo = () => {
14 const { variant, size } = useButtonConfig()
15
16 if (!variant) {
17 return <Skeleton className="h-9 w-24" />
18 }
19
20 return (
21 <div className={cn("flex flex-col gap-4")}>
22 <Button variant={variant} size={size}>
23 Click me
24 </Button>
25 <Button variant="outline" size="sm">
26 Cancel
27 </Button>
28 <Badge variant="secondary">New</Badge>
29 </div>
30 )
31}
Dashboard
Overview Analytics Reports
Total Revenue $45,231.89 +20.1%
Subscriptions +2,350 +180.1%
Active Now +573 +201
Line Chart - Interactive Showing total visitors for the last 3 months
Recent Sales
Olivia Martin olivia@email.com
+$1,999.00
Jackson Lee jackson@email.com
+$39.00
Isabella Nguyen isabella@email.com
+$299.00

Quartz Design System

Harvest · Fintech · 2024–2025

I built Quartz, Harvest's token-driven design system, from the ground up to help all our product teams align around shared foundations, reusable components, patterns and documentation.

Role

Lead Designer

Timeline

8 months

Team

4 product teams

Tools

Figma, Tokens Studio

The problem

Four product teams were designing in four different languages. Spacing, type and components were inconsistent, forcing teams to recreate patterns from scratch and slowing down delivery across Harvest products.

What I changed

Three shifts that turned scattered styles into a shared, scalable foundation across product teams.

Unified foundations

A shared token system for color, type, spacing and elevation across all products.

Reusable components

120+ components with variants, states and documentation built for scale.

Clear documentation

Usage guidelines, do/don't examples and handoff rules for consistent adoption.

  1. 01

    Foundations

    Create a shared visual language through scalable tokens for color, typography, spacing and elevation.

  2. 02

    Component overview

    Apply reusable components across real product interfaces to improve consistency and delivery speed.

  3. 03

    Component anatomy

    Define each component's structure, states and behavior so teams can use it with confidence.

  4. 04

    Design-to-code workflow

    Connect design, documentation and engineering through a shared workflow from Figma to production.

  5. 05

    Documentation and adoption

    Turn guidelines into practical usage patterns that improve consistency across teams and products.

Foundations

I started by making tokens the true foundation of Quartz. Instead of defining colors, spacing and typography as isolated styles, I structured them into a shared token system that could scale across components, states and Harvest product teams.

element.tone.emphasis.state

Element

  • Text
  • Stroke
  • Icon
  • Fill
  • Background

Tone

  • Neutral
  • Brand
  • Error
  • Warning
  • Success
  • Inverse

Emphasis

  • Strong
  • Weak
  • Weaker

State

  • Hover
  • Press
  • Focus
  • Disabled
  • Selected

Components overview

Quartz turned recurring interface patterns into reusable components, helping teams stop recreating the same UI from scratch.

Customer Status Plan Amount

Olivia Martin

olivia@email.com
Active Pro $1,999.00

Jackson Lee

jackson@email.com
Pending Starter $39.00

William Kim

will@email.com
Trial Pro $99.00

Total Revenue

$

$45,231.89

+20.1% from last month

Create account

Enter your email below to create your account

name@example.com
••••••••
Sign up with Email

Component anatomy

Each component was designed with variants, states and usage rules to make implementation clearer and reduce ambiguity during handoff.

Label

Placeholder
Menu item
Menu item
Menu item
Menu item
Clear button
Input field
Dropdown menu
Dropdown Arrow
Scroll bar
Overlay

Design-to-code workflow

Quartz was built to connect design decisions with implementation. Tokens, components and documentation created a shared workflow from Figma to development, helping teams keep design and code aligned.

Figma

Figma

Design tokens and component decisions

Claude Code

Claude Code

Syncs, structures and accelerates implementation

Storybook

Storybook

Visual documentation for shared components

Developers

Install, reuse and ship in production

Documentation and adoption

Quartz was not only a component library. It included documentation, usage guidelines and handoff rules so product teams could adopt the system consistently.

Pure Black

#000000

Pure White

#FFFFFF

Avoid using pure whites and blacks, this can cause irritation to user eye

Dark Grey

#191919

Pale White

#F6F6F6

Instead of pure whites or pure blacks, use dark greys and off whites

Impact

Measured improvements in design speed, consistency and shared ownership after Quartz adoption.

+40% faster design production.Teams shipped flows quicker with shared components.

-30% fewer UI inconsistencies.Tokens enforced shared spacing, type and color.

120+ components shipped.Documented in Figma and Storybook for reuse.

1 source of truth.One library replaced four fragmented systems.

Next, a conversational AI agent for wealth advisors. See how voice and chat helped advisors diagnose client needs faster.

All work View next project →