Bitewise Design System
They say a good recipe needs the right ingredients so I cooked up a design system
that keeps Bitewise looking fresh, consistent, and delicious across every screen.
Project Context
Color & Typefaces
Grid & Layout system
Core Components
The Why?
Bitewise started as my “design playground” an app idea where people could track meals, learn about
their food, and build healthier eating habits.
But very quickly, I ran into the classic designer problem:
Every new screen looked slightly different. Spacing was off, colors didn’t match perfectly, and buttons
kept shapeshifting like they were in witness protection.
Bitewise became my chance to build a scalable, accessible, and visually cohesive design language from
scratch the kind of system I’d want to work with if I were part of a real product team.
Problem It Solves
Designing without a system is like cooking without a recipe you can do it, but you’ll never get the same
dish twice.
Before Bitewise’s design system, every new screen meant re-deciding spacing, colors, and component
styles. That slowed me down, created visual inconsistencies, and made the UI feel less trustworthy.
This system fixes that by giving every pixel a rule to follow so the app looks cohesive, builds faster,
and scales without me redesigning from scratch every time.
Research and challenges
I wasn’t born knowing how to design a design system (if only). My first challenge was figuring out
where to even start spacing? colors? components? Or all at once?
Luckily, I had guides. Public design systems from Apple, Google, and Razorpay, these design systems
were huge and served more as an inspiration rather than a guide. YouTube channels like UI Collective
took it further, helping me understand atomic design principles.
The hardest part wasn’t copying it was adapting these ideas into something that felt right for
Bitewise’s tone, product goals, and real-world usability. It meant constant iteration, testing, and
yes… sometimes deleting hours of work because the spacing was “just slightly off.”
Colors and Type faces
Main brand colors
Type faces hierarchy
#3D3E3B
#7B7B76
#B8B9B2
#F6F7ED
#F8F9F2
#FAFAF5
#FCFDFA
#0F0F0F
#1E1E1E
#2E2E2E
#3D3D3D
#6E6E6E
#9D9D9D
#CECECE
#390000
#720000
#AC0000
#E50000
#EC4040
#F17F7F
#F8BFBF
#3C3923
#787346
#B4AC69
#F0E68C
#F4ECA9
#F7F2C5
#FBF8E2
#001900
#003200
#004B00
#006400
#408B40
#7FB17F
#BFD8BF
#000810
#000F1F
#00172F
#001F3F
#40576F
#7F8E9E
#BFC7CF
#402300
#804600
#BF6900
#FF8C00
#FFA940
#FFC57F
#FFE2BF
For Bitewise, I implemented an 8pt grid system (my personal favorite), which made spacing predictable
and components way easier to scale. Instead of guessing “should this card be 17px or 19px away?”, the
grid gave me a rhythm. Suddenly, alignment wasn’t a headache it was automatic.
24g
Fats
56g
Protein
200g
Carbs
Tuna Salad
394kcal
10 Ing
20 min
24g
Fats
56g
Protein
200g
Carbs
Fruits bowl
394kcal
10 Ing
20 min
24g
Fats
56g
Protein
200g
Carbs
Mango shake
394kcal
10 Ing
20 min
20g
Fat
55g
Protein
75g
Carbs
Mango shake
394kcal
250g
20 min
Sunday
20 March
Log meals
Welcome back
Vaibhavi
Breakfast
(07:00 - 10:00)
Lunch
(12:00 - 14:00)
Dinner
(18:00 - 20:00)
view in details
105
Fats
80
Proteins
250
Carbs
1320
Kcal
9:41
20px
20px
18px
18px
16px
16px
30px
14px
14px
64px
136px
136px
88px
120px
64px
56px
44px
8pt Spacing system
8pt grid system
Column layout with 20 px margin, 16 px gutter & Row layout with 8px height and gutter
Toolbox
This isn’t a final museum piece. Design systems never are. It’s more like a startup always shipping,
always growing.
Tab bar
Default
Hover
Pressed
Disabled
Order online
Order online
Order online
Order online
Download list
Download list
Download list
Download list
00:00
Start timer
00:00
Start timer
00:00
Start timer
00:00
Start timer
Secondary
View plan
View plan
View plan
View plan
Edit goals
Edit goals
Edit goals
Vegan for Week
21-days meal plan
View plan
24g
Fats
56g
Protein
200g
Carbs
Tuna Salad
394kcal
10 Ing
20 min
24g
Fats
56g
Protein
200g
Carbs
9 Ingredients
25 min
4/5 Rating
285 kcal
view in details
105
Fats
80
Proteins
250
Carbs
1320
Kcal
Chicken
165°F
Rice
15 min
Cards & Tags
This design system is a living, evolving foundation rather than a finished artifact. The goal was to
establish a scalable system that ensures consistency, efficiency, and clarity across the product. While
the current version includes the essential building blocks (typography, colors, buttons, cards), it’s
designed to grow expanding into advanced patterns, accessibility guidelines, dark mode, and more.
By treating it as an evolving system instead of a one-off project, I’ve built a framework that can adapt to
future needs and scale with the product.
Next Project
Sebaceous
Sebaceous is a skincare brand made for oily skin but instead of telling people to fight their
shine, we celebrate it. Minimal, modern, and a little rebellious, designed to make the glow
impossible to ignore.