Background
BloodScan Biotech isolates intact circulating tumor cells (CTCs) directly from blood using proprietary analysis technology, serving both direct-to-consumer appointments and partnerships with medical institutions. When I joined, the company had no established brand guidelines beyond a logo and three brand colors, and their existing website lacked a clear connection to the brand identity.
I was initially brought in to design a new company website, but I proposed starting with a design system first. Beyond speeding up the website design process, a design system would give the company a unified visual foundation that could extend to other touchpoints like presentations, print materials, and future digital products.
Building a design system from scratch for an early-stage startup with no existing brand framework.
I referenced established systems like Uber's Base and Ant Design, specifically their foundation settings such as typography scales and font hierarchy, because their structures are well-suited for web applications and offered a clear starting point for a small team. I also adopted Atomic Design principles to organize components into a scalable hierarchy.
Finalize page designs first, then extract reusable components based on actual patterns.
My initial approach was to create components as I designed each page. But I quickly found that components built too early, like cards, often needed to differ slightly across pages and couldn't be reused as expected. This led to excessive variations and messy component management. I shifted to a more effective workflow: complete the page designs first, then analyze which elements appeared consistently across pages and extract only those as components. This resulted in a focused set of around 10 core components with variants, keeping the system lean and maintainable.
Building a Scalable Design System
As the first designer on the team, I knew the company would eventually bring on more designers. So I focused on keeping the system as simple as possible while leaving room to grow.
Working within Figma's free plan, only two pages were available for the design system.Every component had to earn its place.
For typography, I initially defined a minimal scale of H1 through H4, paragraph, and label. As I designed the pages, I discovered specific needs that required additional levels, such as a distinct size for navigation, which led me to expand to H5, H6, paragraph large/small, and label small. Each addition was driven by a real use case rather than added preemptively. For color, I extended the three brand colors into shade scales for interactive states like button hovers, and introduced two accent colors for status indicators such as error and highlight.
Components follow an Atomic Design hierarchy, referencing Uber Base's structure: Atoms (typography, color, divider, grid system, logo), Molecules (button, form, navigation/menu), and Organisms (footer, paragraph, card, hero banner).
Implementation
With the design system in place, implementing the website in Framer was significantly more efficient. Framer supports importing artboards directly from Figma, so I could use them as a reference to quickly rebuild components without starting from a blank canvas. When adjustments were needed after the site went live, I could update the design system variables in Framer and have changes reflected across all pages instantly, rather than editing each page individually.
Outcome
What started as a website project became a scalable visual foundation for the company. Beyond the website, the founder began using the design system to create investor presentations, ensuring brand consistency across different touchpoints without needing to design from scratch each time. The system was also adopted for ProtoDive's landing page, a sister service under the same company, directly reusing the Figma library without modifications. For an early-stage startup that previously had only a logo and three colors, the design system gave the team a shared visual language they could apply independently across materials.