CORE: Building a Multi-Brand Design Ecosystem

Defining the Aceable Brand

Branding
Design System

The Aceable Design System is the foundation of CORE. If you haven’t checked that out already, I recommend starting there!

Background

Our Aceable design system — originally named VISION (the project title established prior to my arrival) — proved to be a major success. It significantly elevated the user experience across Aceable’s platforms while also driving measurable performance improvements in both our driving and real estate verticals. With a strong, flexible system in place, the next challenge became clear: how do we scale this success across Aceable’s broader portfolio of brands without starting from scratch?

That question led us to iDriveSafely and DriversEd.com (both within the driving education vertical) and, eventually, to PrepAgent, a recently acquired real estate licensing platform.


The Challenge

Each brand presented a different starting point. iDriveSafely and DriversEd.com were in urgent need of an overhaul, both aesthetically and from a UX/UI perspective. Inconsistent layouts, dated visuals, and fragmented interaction patterns made it difficult to deliver a modern, intuitive learning experience.

PrepAgent was already in relatively good shape, with a functional interface and a more modern baseline. However, the platform needed to be migrated, and maintaining its existing, fully custom styling would have added unnecessary complexity and long-term overhead. Rather than replicating PrepAgent’s exact visual system we made a strategic decision to fold it into CORE’s component architecture, allowing us to streamline the migration, reduce engineering lift, and create a more scalable foundation while preserving PrepAgent’s brand identity.

Project Goals

Rather than designing three entirely new systems (or duplicating each design system file), we made a deliberate decision to extend the Aceable design system — now formalized as CORE — across all brands. Using Figma variables, we applied CORE as a shared structural foundation across brands. This allowed each product to leverage the same underlying system, including:

  • Component structures: Flexible page sections designed to support a wide range of content, layouts, and media types without feeling rigid or prescriptive.

  • Element structures: Standardized foundations for typography, color, buttons, inputs, and other UI elements, defined by how they function on the page rather than by visual style.

At the same time, each brand retained its own identity through controlled variation:

  • Brand-specific color palettes

  • Distinct typography

  • Subtle stylistic nuances tailored to each audience

A Shared Framework for Multiple Brands

CORE is derived from the Aceable Design System. A simplified version is shown here.

Below is an example of how this framework scales across PrepAgent, iDriveSafely, and DriversEd.com.

Defining Brand Modes with Figma Variables

Once our core styles (including components, color, and typography) were established, we built our CORE framework in Figma using a dedicated variable mode for each brand. This approach allowed the same components and page sections (such as two-column layouts or slider cards) to be reused across brands, while maintaining a single source of truth for structure.

Each variable mode controlled brand-specific styling, enabling components to inherit the same underlying architecture while maintaining their unique visual identities.

Below is a snapshot of how this is implemented in Figma. While only a subset of properties is shown, each brand defines its own values for spacing, color, and other foundational attributes. You’ll also notice that variables are named to closely mirror their CSS equivalents — . This isn’t a requirement within Figma, but using any other naming convention felt unnecessary. (Our Engineering team agreed.)

What does this look like?

See below! Each animation shows how each variable influences a single component. The result: A lean design system that dramatically reduced JIRA tickets and kept things simple for designers — a huge win given our limited resources.

Note: This animation shows desktop only. Variable switching is supported across all predefined breakpoints: Extra Large (1236px+), Large (1024–1235px), Medium (768–1023px), Small (600–767px), and Extra Small (under 500px).