DESIGN SYSTEM / FOUNDATIONS
DESIGN SYSTEM / FOUNDATIONS
Foundations
Foundations
Core visual principles that define the product’s interface and maintain consistency across screens.
Core visual principles that define the product’s interface and maintain consistency across screens.
v1.0
v1.0
DESIGN SYSTEM
DESIGN SYSTEM
01
01
Color System
Color System
A semantic color system used to communicate brand identity, interaction states, order status, feedback, and interface hierarchy.
A semantic color system used to communicate brand identity, interaction states, order status, feedback, and interface hierarchy.
Overview
Overview
Semantic palette at a glance
Semantic palette at a glance
The proportional strip balances neutral interface surfaces with focused action and status colors.
The proportional strip balances neutral interface surfaces with focused action and status colors.
Neutral Surface
Neutral Surface
#F4F4F4
#F4F4F4
Neutral Surface
Neutral Surface
#EFEFEF
#EFEFEF
Primary Orange
Primary Orange
#EF9D03
#EF9D03
Ready Green
Ready Green
#31AE53
#31AE53
Preparing Blue
Preparing Blue
#2063CE
#2063CE
Brand
Brand
Primary & soft primary
Primary & soft primary
Use primary orange for decisive interaction and its soft companion for supporting surfaces.
Use primary orange for decisive interaction and its soft companion for supporting surfaces.
Brand
Brand
Color / Primary
Color / Primary
#EF9D03
#EF9D03
Primary actions · Selected states · Brand highlights · Important CTAs · Active navigation
Primary actions · Selected states · Brand highlights · Important CTAs · Active navigation
Soft primary
Soft primary
Color / Primary / Soft
Color / Primary / Soft
#FFEBC4
#FFEBC4
Soft primary background · Highlight containers · Secondary orange surfaces
Soft primary background · Highlight containers · Secondary orange surfaces
Status
Status
Strong colors paired with soft backgrounds
Strong colors paired with soft backgrounds
Each semantic state has an emphasis color and a companion surface color for banners, badges, and notifications.
Each semantic state has an emphasis color and a companion surface color for banners, badges, and notifications.
Ready / Success
Ready / Success
Ready
Ready
Status / Ready
Status / Ready
#31AE53
#31AE53
Ready status · Successful state · Completed order indication
Ready status · Successful state · Completed order indication
Status / Ready / Soft
Status / Ready / Soft
#E5F8EB
#E5F8EB
Ready status background · Success notification background
Ready status background · Success notification background
Preparing / Processing
Preparing / Processing
Processing
Processing
Status / Preparing
Status / Preparing
#2063CE
#2063CE
Preparing status · Processing state · Informational status
Preparing status · Processing state · Informational status
Status / Preparing / Soft
Status / Preparing / Soft
#DAE4F5
#DAE4F5
Preparing status background · Informational background
Preparing status background · Informational background
Error / Destructive
Error / Destructive
Canceled
Canceled
Status / Error
Status / Error
#D35B50
#D35B50
Errors · Validation failure · Destructive feedback
Errors · Validation failure · Destructive feedback
Status / Error / Soft
Status / Error / Soft
#FFE5E5
#FFE5E5
Error background · Validation message background
Error background · Validation message background
Neutral
Neutral
Interface hierarchy
Interface hierarchy
A compact grayscale ramp supports surfaces, dividers, icons, secondary copy, and high-emphasis text.
A compact grayscale ramp supports surfaces, dividers, icons, secondary copy, and high-emphasis text.
Neutral / 50
Neutral / 50
#F4F4F4
#F4F4F4
Page background · Gray button · Light surfaces
Page background · Gray button · Light surfaces
Neutral / 100
Neutral / 100
#EFEFEF
#EFEFEF
Inactive button · Gray button · Text box · Search box
Inactive button · Gray button · Text box · Search box
Neutral / 300
Neutral / 300
#DDDDDD
#DDDDDD
Border · Divider · Separator
Border · Divider · Separator
Neutral / 400
Neutral / 400
#BDBDBD
#BDBDBD
Icons · Placeholder · Disabled content
Icons · Placeholder · Disabled content
Neutral / 500
Neutral / 500
#8D8D8D
#8D8D8D
Notes · Supporting text
Notes · Supporting text
Neutral / 600
Neutral / 600
#5D5D5D
#5D5D5D
Secondary text
Secondary text
Neutral / 900
Neutral / 900
#000000
#000000
Default text · High-emphasis text
Default text · High-emphasis text
Documentation note
Documentation note
Semantic colors should be used based on meaning rather than visual preference. For example, green represents Ready/Success and blue represents Preparing/Processing.
Semantic colors should be used based on meaning rather than visual preference. For example, green represents Ready/Success and blue represents Preparing/Processing.
01
01
Buttons
Buttons
Button styles and states for primary actions, secondary actions, and icon buttons.
Button styles and states for primary actions, secondary actions, and icon buttons.
Height: 48px (L) · 40px (M) · 32px (S) · Radius: 8px · Padding H: 24px · Icon Gap: 8px
Height: 48px (L) · 40px (M) · 32px (S) · Radius: 8px · Padding H: 24px · Icon Gap: 8px
Variants
Variants
text
text
text
text
text
text
text
text
text
text
Variants
Variants
text
text
text
text
text
text
text
text
text
text
Variants
Variants
text
text
text
text
text
text
text
text
text
text
02
02
Typography
Typography
Typography styles designed to maintain readability and consistency across multilingual interfaces.
Typography styles designed to maintain readability and consistency across multilingual interfaces.
iOS
iOS
Android
Android
1
1
Latin / Alphabet
Latin / Alphabet
Lexend Deca
Lexend Deca
Available styles: Regular, SemiBold
Available styles: Regular, SemiBold
Lexend Deca — Regular
Lexend Deca — Regular
Regular
Regular
Order your favorite food easily
Order your favorite food easily
Lexend Deca — SemiBold
Lexend Deca — SemiBold
SemiBold
SemiBold
Order your favorite food easily
Order your favorite food easily
Usage
Usage
English · Indonesian · Vietnamese using Latin characters · General interface text
English · Indonesian · Vietnamese using Latin characters · General interface text
2
2
Japanese
Japanese
LINE Seed JP App_TTF
LINE Seed JP App_TTF
Available styles: Regular, Bold
Available styles: Regular, Bold
LINE Seed JP App_TTF — Regular
LINE Seed JP App_TTF — Regular
Regular
Regular
注文を確認してください
注文を確認してください
LINE Seed JP App_TTF — Bold
LINE Seed JP App_TTF — Bold
Bold
Bold
注文を確認してください
注文を確認してください
Usage
Usage
Japanese UI · Japanese labels · Japanese body copy
Japanese UI · Japanese labels · Japanese body copy
4 · Type Scale
4 · Type Scale
Reusable hierarchy tokens
Reusable hierarchy tokens
Every text token defines a consistent role, family, weight, size, and recommended application.
Every text token defines a consistent role, family, weight, size, and recommended application.
Sizes shown in pt
Sizes shown in pt
TOKEN
TOKEN
STYLE
STYLE
FONT FAMILY
FONT FAMILY
WEIGHT
WEIGHT
SIZE
SIZE
LIVE EXAMPLE
LIVE EXAMPLE
RECOMMENDED USAGE
RECOMMENDED USAGE
Type / H1
Type / H1
H1
H1
Lexend Deca
Lexend Deca
SemiBold
SemiBold
30pt
30pt
Page title
Page title
Page titles
Page titles
Type / H2
Type / H2
H2
H2
Lexend Deca
Lexend Deca
SemiBold
SemiBold
26pt
26pt
Section heading
Section heading
Section headings
Section headings
Type / H3
Type / H3
H3
H3
Lexend Deca
Lexend Deca
SemiBold
SemiBold
20pt
20pt
Card heading
Card heading
Card headings
Card headings
Type / Body
Type / Body
Body / Default
Body / Default
Lexend Deca
Lexend Deca
Regular
Regular
18pt
18pt
Main body content
Main body content
Main body content
Main body content
Type / Note / Large
Type / Note / Large
Notes / Large
Notes / Large
Lexend Deca
Lexend Deca
Regular
Regular
15pt
15pt
Supporting text
Supporting text
Supporting text
Supporting text
Type / Note / Medium
Type / Note / Medium
Notes / Medium
Notes / Medium
Lexend Deca
Lexend Deca
Regular
Regular
13pt
13pt
Labels and captions
Labels and captions
Labels and captions
Labels and captions
Type / Note / Small
Type / Note / Small
Notes / Small
Notes / Small
Lexend Deca
Lexend Deca
Regular
Regular
12pt
12pt
Small metadata
Small metadata
Small metadata
Small metadata
Hierarchy in context
Hierarchy in context
A compact UI composition
A compact UI composition
The scale creates a clear reading sequence from page-level context to supporting metadata.
The scale creates a clear reading sequence from page-level context to supporting metadata.
Page Title
Page Title
Section title
Section title
A clear card heading
A clear card heading
Body copy explains the content with enough detail to support understanding and action.
Body copy explains the content with enough detail to support understanding and action.
Supporting label / caption
Supporting label / caption
03
03
Category Chips
Category Chips
Categorization components used for filtering and labeling content.
Categorization components used for filtering and labeling content.
Chip States
Chip States
All Items
All Items
Popular
Popular
New
New
Sale
Sale
Drinks
Drinks
Selected
Selected
Selected
Selected
Default
Default
Default
Default
Disabled
Disabled
Disabled
Disabled
Event Status Badges
Event Status Badges
Ongoing Events
Ongoing Events
Upcoming events
Upcoming events
Cancelled events
Cancelled events
Status badge chips: Ongoing (green), Upcoming (yellow), Finished (gray)
Status badge chips: Ongoing (green), Upcoming (yellow), Finished (gray)
04
04
Language Selector
Language Selector
Language selection component for multilingual product experiences.
Language selection component for multilingual product experiences.
Language Button
Language Button
English
English
日本語
日本語
Language List (Selected)
Language List (Selected)
English
English
Selected
Selected
Language List (Options)
Language List (Options)
日本語
日本語
Japanese
Japanese
Tiếng Việt
Tiếng Việt
Vietnamese
Vietnamese
Bahasa Indonesia
Bahasa Indonesia
Indonesian
Indonesian
Let’s Create Impact Together
Have something in mind? Feel free to reach out.
Let’s connect, exchange ideas, and create something impactful together.
Project
© Bhaswara Maralaut 2026. All rights reserved.
Created by Bhaswara Maralaut
Let’s Create Impact Together
Have something in mind? Feel free to reach out.
Let’s connect, exchange ideas, and create something impactful together.
Project
© Bhaswara Maralaut 2026. All rights reserved.
Created by Bhaswara Maralaut