Phucph.

Spotlight

Resume

Portfolio

Endorsements

Contact

Phucph.

Spotlight

Resume

Portfolio

Endorsements

Contact

Phucph.

Spotlight

Resume

Portfolio

Endorsements

Contact

Your viewport is too small. Please use a larger device to view the site.

Buy new one

Make Finhay consistent,
centralized, and human-centric
with Tree Design System

Finhay is a personal investment platform for 3M+ Vietnamese users

Make Finhay consistent, centralized, and human-centric with Tree Design System

Finhay is a personal investment platform for 3M+ Vietnamese users

Make Finhay consistent, centralized, and human-centric with Tree Design System

Finhay is a personal investment platform for 3M+ Vietnamese users

Make Finhay consistent,
centralized, and human-centric
with Tree Design System

Finhay is a personal investment platform for 3M+ Vietnamese users

Principles

Bring Finhay product designs to international quality 🌍

📑

Consistency

Ensure language and images align with real-world customer experiences.

Strictly adhere to rules, and opt for a minimalist design to enhance consistency.

Ensure language and images align with real-world customer experiences.

Strictly adhere to rules, and opt for a minimalist design to enhance consistency.

💬

Response

Always focus on users' task-related responses.

Follow-up responses should offer flexibility through images, sounds, interactions, or text.

Always focus on users' task-related responses.

Follow-up responses should offer flexibility through images, sounds, interactions, or text.

✋

Control

Users are always in control, with the right to cancel, exit, or continue.

Hints is essential to assist users in predicting their next actions.

Users are always in control, with the right to cancel, exit, or continue.

Hints is essential to assist users in predicting their next actions.

👁️

Focus

Always offer essential information and actions based on the context of use.

Proactively eliminate irrelevant decorations or content.

Always offer essential information and actions based on the context of use.

Proactively eliminate irrelevant decorations or content.

👤

Human

Place people at the core of the product design process.

Fully commit to user accessibility and attention standards.

Place people at the core of the product design process.

Fully commit to user accessibility and attention standards.

💌

Metaphor

Offer users with a sense of authenticity and closeness.

A familiar experience will encourage users to develop a habit with the product.

Offer users with a sense of authenticity and closeness.

A familiar experience will encourage users to develop a habit with the product.

Styles

Keep every user interface in the same rhythm 🎧

🍱

Layout grid

🎨

Color

🔤

Typography

📦

Others

Layout grid

A strong foundation for sustainable designs 🧱

Mobile

Count 04. Type Stretch. Column width Auto. Gutter 16. Margin 16.

Desktop

Count 12. Type Center. Column width 72. Gutter 24. Margin Auto.

Color

Elements for vibrant & human-centric designs 💚

Elements for vibrant and human-centric designs 💚

Primary

The brand-unique green 🍀

Primary 500

Neutral

Pure neutral color presented below 🌚

Neutral 600

White 500

Semantic

Common meaningful colors for additional information 🚦

500

100

More+

Decorative colors for other purposes 🎨

Using decorative colors for purposes 🎨

Decorative colors for other purposes 🎨

Green Yellow

Green yellow

Amber

Pacific blue

Denim blue

40+

Typography

Create a sense of completeness for presented content 💌

Elements for vibrant and human-centric designs 💚

Headline

Averta for Finhay - Brand typeface of Finhay 🍀

Icon type

Tree Icons - Symbol typeface of Finhay 🍀

Others

SF Pro Text & Roboto - Default OS typefaces ⚙️

Other styles

Spacing

Arrange different elements by horizontal & vertical standard 🧭

Name

Specs

Example (8:1)

Example (2:1)

Example (5:1)

3XS

2XS

2XL

3XL

4XL

5XL

Elevation

Arrange different elements by depth 🔮

Layer 1

Flat

Share to support 👍

Layer 2

Single drop shadow

X=0, Y=4, B=20, S=0, #000000, 10%

Layer 3

Single drop shadow

X=0, Y=8, B=24, S=0, #000000, 10%

Layer 4

Single drop shadow

X=0, Y=12, B=32, S=0, #000000, 10%

Corner radius

Use figurative details to create friendliness and modernity ✨

Name

Specs

Example (1:1)

UI Components

Maintain the consistency of every user interface 🫡

🍀

App icon

👆

Button

🔆

Iconography

🖼️

Illustration

🏠

Tab bar

✍️

Text field

🚸

Alert popup

🗑️

Empty state

📦

Others

App icon

The first interaction between users and Finhay app 🤚

Elements for vibrant and human-centric designs 💚

Guideline

Strictly follow Google Play Store & App Store's guidelines 🛍️

App Store

Google Play Store

Iconography

Add the proximity and simplicity for a wonderful experience 💫

Elements for vibrant and human-centric designs 💚

System icons

Supplement for illustrative content & systemic features ⚙️

Product icons

Represent each Finhay's core product 🍀

Sub-product icons

Represent sub-products inside 🗂️

More+

Represent brands, rankings, payment types, etc...

Represent brands, rankings, payments, etc.

Represent brands, rankings, payment types, etc...

Illustration

Use Finhay's signature mascot for enhanced brand recognition ⭐️

Elements for vibrant and human-centric designs 💚

Tab bar

Entrance for the most important portals in this platform 🔐

Elements for vibrant and human-centric designs 💚

Home

Access to the prime content

Cashback

Shop at various brands for unlimited cashback

Blog

View all articles focused on the financial market

More+

Enable personalized adjustment of tab bar (maximum 5 icons)

Button

Primary ways to execute tasks 🤌

Elements for vibrant and human-centric designs 💚

Retangle button

Construct the connection between various elements in one interface 🔗

Circle button

Construct the independence from other elements in one interface 🎭

Text field

Enable users to fill in essential information 📝

Elements for vibrant and human-centric designs 💚

Normal text

Use for normal information

Password

Use for secured information

Date picker

Use for date time information

Dropdown & Selector

Use for a cluster of information within a designated group

Empty state

Confirm an empty state and suggest possible actions 🗑️

Elements for vibrant and human-centric designs 💚

Other components

Card

Quickly deliver transparent content 🚀

List view only. Clear navigation. Whitespace rather than divider.

Quickly deliver transparent content 🚀

List view only. Clear navigation. Whitespace rather than divider.

Quickly deliver transparent content 🚀

List view only. Clear navigation. Whitespace rather than divider.

Bottomsheet

Enable an independent content delivery without disruptions to the main flow

Tooltip

Provide the user with additional information when needed

More+

Various components to systemize user interfaces

Onboarding

Notification

Snackbar

Tab

Badge

Tag

Logo

...

Demo

Example screens with the aid of Tree Design System

More & more

Thousands of screens have been generated using Tree Design System 🍀

Elements for vibrant and human-centric designs 💚

Contributors

Thank you for scrolling almost 40K pixels 🫶

Thank you for scrolling almost 25K pixels 🫶

Thank you for scrolling almost 30K pixels 🫶

Le Phuong Anh

Lead Designer

@lephuonganh2205

Pham Hong Phuc

Designer

@phucphdesign

Others

All our CX members who have been together 😍