Design Systems

Learn about my approach to design systems, how they keep a site consistent as it grows, and what makes me uniquely equipped to build one your team will actually use.

Who this is for

Why build a design system?

Your product has gotten inconsistent

Five button styles, three greys that are almost the same, and a new one-off every sprint. A system collects what works and retires the rest.

You're an agency looking to outsource

Your designers need a library to work from and nobody has time to build it. I set up the variables, styles and components so your team can get back to the pages.

You're starting something new

Starting with a system costs a little more up front and a lot less every month after. Each new page is assembled, not redrawn from scratch.

You bring the vision,
I help it come to life

In an era increasingly overwhelmed by AI slop, human creativity and craft are becoming more important. I uncover what was already a part of your company. I take your goals, your passions, and all the tiny details that make you stand above the rest — and I give them a voice and a presence that people can't ignore. You already know that what you do is game changing, but I can help others understand that. So let's get started, I'd love to hear what you're creating and become a part of it.

The Process

  1. 01

    Audit

    Taking stock

    I go through the files and the live product and collect every color, text style and component in use, so we can see what is working and what has drifted.

  2. 02

    Foundations

    Variables and text styles

    Color, type, spacing and radius become a small set of named variables, with light and dark modes built in from the start rather than added later.

  3. 03

    Components

    Building the pieces

    Buttons, cards, navigation and sections built on those variables, with the variants and states your team needs and none of the ones it doesn't.

  4. 04

    Templates

    Putting it to work

    Real pages rebuilt from the library, which is the best test there is. Anything missing or awkward shows up here instead of in the next project.

  5. 05

    Handoff

    Documentation and training

    Usage notes on every component and a walkthrough with your team, so the system keeps being used — and kept up — after I've gone.

The Deliverables

So… what’s included?

Name:Description:Deliverable:Est. timeline:
Design AuditCollecting the colors, type and components currently in use.Deliverable:Audit PageTimeline:2 days
VariablesDefining color, spacing and sizing tokens, with light and dark modes.Deliverable:Figma VariablesTimeline:2 days
TypographyA type scale with text styles for headings, body and UI.Deliverable:Figma Text StylesTimeline:1 day
Component LibraryBuilding the components, with variants and properties, on those variables.Deliverable:Figma Component LibraryTimeline:1-2 weeks
Page TemplatesRebuilding key pages from the library to prove it holds up.Deliverable:Figma TemplatesTimeline:3 days
DocumentationNotes on when and how to use each component, kept inside the file.Deliverable:Usage GuidelinesTimeline:2 days
Team HandoffA walkthrough of the system so your team can use and extend it.Deliverable:Recorded WalkthroughTimeline:1 day
Est. total:2-5 weeks

What Clients Say

Caleb was amazing on this project! He brought in a fresh set of ideas, made sure he understood the context and then delivered a compelling website design. He has really strong problem solving skills and takes pride in the work he does. I would definitely recommend him for website design and development work.
Abisheg Elijah
VP of Marketing, Co.tribute

The Portfolio

  • Company:Gather & Kin
    Services:Web Design, Webflow
    Industry:Floral Design
    Partner:
  • Company:Stag & Timber
    Services:Web Design, Webflow
    Industry:Architecture
    Partner:
  • Company:Brian Kelley MD
    Services:Web Design, Webflow
    Industry:Healthcare
    Partner:
  • Company:Susan Wojcicki Foundation
    Services:Webflow
    Industry:Non-Profit
    Partner:Fifty & Fifty
  • Company:Videa Health
    Services:Web Design, Webflow
    Industry:Healthcare
    Partner:Picnic
  • Company:Replo
    Services:Webflow
    Industry:SASS
    Partner:
  • Company:For The Win
    Services:Web Design, Webflow
    Industry:Residential Services
    Partner:
  • Company:GEBAF
    Services:Webflow
    Industry:Non-Profit
    Partner:Fifty & Fifty
  • Company:Natalie Cole Foundation
    Services:Web Design, Webflow
    Industry:Entertainment
    Partner:
  • Company:Mulago Foundation
    Services:Webflow
    Industry:Non-Profit
    Partner:Fifty & Fifty
  • Company:We Hear Youth Report
    Services:Webflow
    Industry:Non-Profit
    Partner:
  • Company:Fifty & Fifty Website
    Services:Webflow
    Industry:Design
    Partner:Fifty & Fifty
  • Company:VettX
    Services:Web Design, Webflow
    Industry:SASS
    Partner:
  • Company:Rebecca Behrens
    Services:Web Design, Webflow
    Industry:Design
    Partner:
  • Company:Frame Set
    Services:Web Design, Webflow
    Industry:SASS
    Partner:

Services

From Concept
To Launch

Logos, type and color that hold up everywhere they land, not just on the homepage. You get the marks, the palette and the rules for using them.

Explore

A component library your team can build with, documented so the next person doesn't have to guess how a card is meant to behave.

Explore

Pages designed to be built. Every state, every breakpoint and every empty case is drawn before a line of it is written.

Explore

Clean, maintainable Webflow builds on a CMS your client can actually run, handed over with the classes named the way you would name them.

Explore

Astro, React and everything Webflow cannot reach. Built fast, built to last, and built so the next developer thanks you.

Explore

Got Questions?
Get Answers.

FAQ’s

Still not sure if I’m a good fit? Reach out and I’d be more than happy to talk specifics about your project.

Why should I hire you?

Great question — Here's a few reasons:

  • I have a unique style and sense of taste, together we can make something that will stand out from the crowd.
  • I'm a highly skilled designer that has been freelancing for over 7 years.
  • I've gained industry awards and am a certified Webflow Partner.
  • I do branding, design, and Webflow development so you can get your website up and running without having to involve other vendors.
  • I prioritize organized design systems (clean class structure, component system, accessibility and responsiveness).

How long does a website project take?

Most sites take somewhere between a few weeks and a few months, from the first call to launch. The biggest variable is usually how quickly content and feedback come back, so we'll agree on a schedule for both at the start.

Do you work with agencies?

Yes. I regularly work alongside agencies and in-house teams, either taking a design through to build or owning the whole project under your name.

What Webflow framework do you use?

I've tried out most of the Webflow frameworks out there but I use Lumos for 95% of my builds. It adds a lot of really helpful developer functionality while still making it easy for clients to be able to make changes to their site. If you're curious about Webflow frameworks or why I don't use Client-First check out this blog post where I compare the biggest frameworks out there and describe their pros and cons.

Can I update the website myself after launch?

Yes. Every site is handed over with a CMS set up for the content you'll change most, and a walkthrough of how to use it.

Do you only work with clients in the Bay Area?

No. I'm happy to work with clients anywhere, and most projects run remotely over calls and shared files.

let's create something