When I first began building the design system for Foodpoint, my single goal was to unify the user experience across iOS, Android, and Web.
A brand design system is a documented set of rules and reusable assets that govern how the brand looks and communicates across every surface. A real design system includes:
- Design tokens — The atomic values that define visual language: hex codes, font sizes, spacing units, border radius
- Color palette — Primary, secondary, neutral, and semantic color roles with usage rules
- Typography scale — Font families, weights, sizes, and line-height rules for every text style
- Logo guidelines — Clear/safe zones, approved color variants, prohibited uses
- Component library — Buttons, cards, form fields, navigation patterns; each with defined states and variants
- Usage documentation — Written rules that explain when and how to use each element
Step 1: Establish Brand Foundation
Designing a logo is the first step in building your brand and a mark of professionalism in business.
What is logo design?
Logo design is the process of creating a unique visual symbol or mark that represents a brand’s identity, values and recognition in the marketplace.
For Foodpoint, I'm taking consideration of 2 types of logo for the brand to serve the purposes for use for both web and mobile applications.
- Wordmark: Logo built from full brand name
- Pictorial Mark: Icon or symbol represents brand
Step 2: Build Your Color System
The next main question most designers asked: “How do you define and choose the right colours of a brand?”
Understanding brand values helps me to create a colour language for this brand. I find colour inspiration from websites, photography and posters to get the right colour palette. Foodpoint represent emotions of fun and cheerful energy, so the color Tangerine Orange has been selected as the key color for the brand.
After choosing the colours, it’s time to create a colour language which is part of the design language of the brand or the style guide. Having only brand color is not enough, I also need to define the Primary colours, Secondary/Accent colours, Typography colours, background colours.
When I have the complete color palette, I implement 60-30-10 rule to harmonize the color scheme and make a well-balanced interface design. When choosing a new color palette, 60% of the palette is dedicated to the dominant color — usually, we call it neutral. Secondary color, or complementary, makes up 30% of the palette, and a third color, accent one, is used for the remaining 10% of the design.
Design Tokens is for consistent theming across atoms and organisms. I'm using Figma for mapping design layers to component hierarchy.
Step 3: Define Your Typography Scale
Before choosing font stack, there is 3 main questions to ask:
- Do you have licensed fonts already, or do you need free/open-source options?
- Are you building for web, mobile, print, or all three?
- Do you want one typeface family or two (e.g., a serif for headings, sans-serif for body)?
Step 4: Design Component Library
A component is any reusable UI element: buttons, cards, form inputs, navigation bars, alerts, badges.
Building UI components using Atomic Design Methodology
Atomic Design is formulated by Brad Frost, in which everything begins with the smallest element of the interface: the atom.
Atomic Design provides a shared language and structure that solves several key problems:
- Consistency - Every component has a defined place and purpose.
- Reusability - Common patterns are built once and reused everywhere.
- Scalability - Teams can confidently expand without breaking existing UI.
- Cross-discipline alignment - Designers and developers speak the same ‘atomic’ vocabulary.
| Level | Description | Example |
| Atoms | The smallest building blocks of UI | Button, Input, Label |
| Molecules | Groups of atoms that work together | Search Bar (Input + Button) |
| Organisms | Complex components composed of molecules | Header, Card Grid, Product Tile |
| Templates | Page-level layouts defining structure | Dashboard Layout |
| Pages | Real, data-filled screens seen by users | Dashboard with actual user data |
