Phucph.

Spotlight

Profile

Portfolio

Endorsements

Contact

Phucph.

Spotlight

Profile

Portfolio

Endorsements

Contact

Phucph.

Spotlight

Profile

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 💚

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 🎨

Green Yellow

Green yellow

Amber

Pacific blue

Denim blue

40+

Typography

Create a sense of completeness for
presented content 💌

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)

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 🤚

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 💫

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.

Illustration

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

Tab bar

Entrance for the most important portals in
this platform 🔐

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 🤌

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 📝

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 🗑️

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.

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

Example screens with the aid of Tree Design System

More & more

Thousands of screens have been generated using Tree Design System 🍀

Contributors

Thank you for scrolling almost 40K pixels 🫶

Thank you for scrolling almost 25K pixels 🫶

Thank you for scrolling almost
40K pixels 🫶

Le Phuong Anh

Lead Designer

@lephuonganh2205

Pham Hong Phuc

Designer

@phucphdesign

Others

All our CX members who have been together 😍

Phucph.

Phucph.

Phucph.

Phucph.

Phucph.

Phucph.

Phucph.

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

Principles

Principles

Principles

Bring Finhay product designs to international quality 🌍

Bring Finhay product designs to international quality 🌍

📑

📑

Consistency

Consistency

💬

💬

Response

Response

✋

✋

Control

Control

👁️

👁️

Focus

Focus

👤

👤

Human

Human

💌

💌

Metaphor

Metaphor

Styles

Styles

Styles

Keep every user interface in thesame rhythm 🎧

Keep every user interface in thesame rhythm 🎧

🍱

🍱

Layout grid

Layout grid

🎨

🎨

Color

Color

🔤

🔤

Typography

Typography

📦

📦

Others

Others

Layout grid

Layout grid

A strong foundation for sustainable designs 🧱

A strong foundation for sustainable designs 🧱

Mobile

Mobile

Desktop

Desktop

Color

Color

Elements for vibrant & human-centric designs 💚

Primary

Primary

Primary 500

Neutral

Neutral

Neutral 600

White 500

Semantic

Semantic

500

500

Keep every user interface in the
same rhythm 🎧

Keep every user interface in the
same rhythm 🎧

Create a sense of completeness for
presented content 💌

Maintain the consistency of every
user interface 🫡

Maintain the consistency of every
user interface 🫡