Bilberry Design System

This site documents the design language for BilberryDB—an analytics database platform—and serves as my class project for building a reusable, token-based design system in Figma and code.

What is this site?

The Bilberry Design System site is a working styleguide and component library. It brings together color, typography, spacing, and reusable UI components so BilberryDB can feel consistent across pages, screen sizes, and future features.

Goals

  • Practice translating Figma designs and tokens into real, working HTML and CSS.
  • Build a small but complete design system that could scale with the Bilberry product over time.
  • Document decisions in a way that classmates, instructors, and future collaborators can easily understand.

Who this is for

  • Me, as the designer/developer — to keep visual decisions organized and consistent.
  • Instructors and peers — to review how foundations, components, and patterns connect.
  • Future collaborators — to onboard quickly to the look and feel of BilberryDB.

What you will find here

Foundations

Color palette, typography, and spacing tokens that define the core visual language of BilberryDB. These map directly to CSS variables used throughout the site.

View foundations

Components

Reusable UI pieces such as buttons, cards, and the sign-in form. Each component is shown with usage guidelines and code snippets.

View components

Guidelines & patterns

Higher-level rules for using colors and buttons, plus common layouts like authentication screens and dashboards that combine multiple components.

View guidelines

Why I created this design system

This project is part of my coursework, focused on learning how to move from Figma layouts into accessible, responsive front-end code. Bilberry gave me a “fake but realistic” product to design for, so I could practice:

  • Defining design tokens and keeping them in sync with CSS.
  • Using components consistently across multiple pages.
  • Building documentation that explains not just how things look, but why they work that way.

What I would like to improve next

  • Expand the component library with tables, filters, and more complex data-heavy layouts.
  • Add more detailed accessibility notes for color contrast and keyboard interactions.
  • Connect this static design system to a real front-end framework in the future.
↑