Back to Projects

DeeUI Examdee Design System

A unified design system crafted to streamline product development, ensure consistency, and scale across the Examdee ecosystem.

Khám phá DeeUIdesign.examdee.ai-vietnam.vn

Overview

DeeUI is the core design system developed for Examdee — a modern educational platform.

The goal was to create a flexible, scalable system that could support multiple product features while maintaining visual consistency and improving development efficiency.

Reduce design inconsistency
Improve design-dev handoff
Speed up product iteration
Support future scaling
Color System
Type System
Aa
Heading 1Nunito / Bold / 40px
The quick brown fox jumps over the lazy dog.Body / Medium / 16px
Grid & Spacing
xl12px
2xl16px
full9999px
space-20016px
space-30024px
space-40032px
Vấn đề

Giải quyết những bất cập của sự tăng trưởng.

UI không nhất quán

Mỗi tính năng được phát triển riêng lẻ, dẫn đến trải nghiệm người dùng bị phân mảnh.

Thiết kế lặp đi lặp lại

Thiết kế phải tạo lại các thành phần giống nhau nhiều lần cho các module khác nhau.

Thiếu thành phần chuẩn hóa

Những thay đổi nhỏ trong button và input tạo ra nợ kỹ thuật và lỗi thiết kế.

Khó khăn khi mở rộng

Việc ra mắt tính năng mới mất nhiều thời gian hơn do thiếu cơ sở hạ tầng thiết kế.

Mục tiêu

Xác định
tầm nhìn
cho DeeUI.

Ngôn ngữ thiết kế thống nhất

Thiết lập một nguồn dữ liệu duy nhất cho tất cả các thành phần hình ảnh và chức năng.

Thư viện thành phần tái sử dụng

Xây dựng bộ UI block mạnh mẽ, dễ dàng tích hợp vào bất kỳ tính năng nào.

Cộng tác liền mạch

Xóa bỏ khoảng cách giữa thiết kế và dev thông qua các token và tài liệu dùng chung.

Khả năng mở rộng vô hạn

Đảm bảo hệ thống có thể phát triển song song với sự phức tạp của sản phẩm.

Foundation

Nền tảng hệ thống

Nền tảng (Foundation) định nghĩa các yếu tố cốt lõi của DeeUI, giúp đảm bảo tính nhất quán và linh hoạt trong toàn bộ sản phẩm.

Colors System

Colors System

Hệ thống màu sắc đồng nhất và bảng màu đa dạng cho giao diện.

Typography

Typography

Hệ thống kiểu chữ, kích thước và phân cấp nội dung khoa học.

Spacing & Radius

Spacing & Radius

Quy chuẩn khoảng cách và bo góc thống nhất, tối ưu trải nghiệm.

Icons

Icons

Thư viện biểu tượng đồng nhất, hiện đại và đa dạng kích thước.

Elevation

Elevation

Hệ thống đổ bóng và phân cấp độ sâu cho các lớp sản phẩm.

Grid System

Grid System

Hệ thống lưới chuẩn 8px giúp tối ưu bố cục và căn chỉnh tỉ lệ.

Tokens & Variables

Design Tokens & Figma Variables

DeeUI sử dụng Design Tokens kết hợp với Figma Variables để xây dựng một hệ thống thiết kế có cấu trúc rõ ràng, dễ mở rộng và đồng bộ chặt chẽ với code.

Typography
Color
Spacing
Tokens JSON
Shadow
Icon
Grid

Figma Variables

Figma Variables

Ví dụ về cách DeeUI sử dụng Figma Variables để xây dựng hệ thống thiết kế có cấu trúc và dễ mở rộng.

Variable Collections
primitives
colors
blue
gray
red
green
amber
purple
spacing
radius
semantic
components
typography
Variable Board
Collection: Primitives / Colors / Blue
NameTypeValue
50
Color
#EEF8FF
100
Color
#DAEEFF
200
Color
#BDE3FF
300
Color
#90D2FF
400
Color
#4DB2FF
500
Color
#3599FC
600
Color
#1F7AF1
700
Color
#1763DE
800
Color
#1951B4
900
Color
#1A468E
950
Color
#152C56

11 variables visible in this collection

Giá trị mang lại

Việc xây dựng hệ thống Variables trong DeeUI không chỉ giúp quản lý giao diện hiệu quả hơn, mà còn đóng vai trò như nền tảng để mở rộng và duy trì sản phẩm trong dài hạn.

Tổ chức hệ thống

Biến những giá trị rời rạc thành một hệ thống có tổ chức và dễ quản lý hơn.

01

Tối ưu hóa quy trình

Giảm sự phụ thuộc vào chỉnh sửa thủ công, giúp tiết kiệm thời gian đáng kể.

02

Tính nhất quán tối đa

Đảm bảo tính nhất quán trên toàn bộ sản phẩm từ thiết kế đến khi triển khai.

03

Phối hợp nhịp nhàng

Tăng hiệu quả phối hợp giữa Design và Development thông qua ngôn ngữ chung.

04

Developer Handover

Design Tokens trong hệ thống<Frontend>

Hệ thống Design Tokens của DeeUI được đồng bộ sang code thông qua file tokens.json, đóng vai trò là nguồn dữ liệu trung tâm giữa design và development.

Single Source of Truth

Mọi thay đổi từ Figma được tự động cập nhật vào code.

Platform Independent

JSON format cho phép sử dụng trên nhiều nền tảng Web, iOS, Android.

Type Safe

Tự động generate TypeScript definitions cho toàn bộ hệ thống token.

tokens.json
1{
2  "color": {
3    "brand": {
4      "primary": {
5        "default": { "value": "{color.blue.500}" },
6        "hover": { "value": "{color.blue.600}" }
7      }
8    }
9  },
10  "spacing": {
11    "md": { "value": "16px" },
12    "lg": { "value": "24px" }
13  },
14  "radius": {
15    "md": { "value": "12px" }
16  }
17}

Giá trị mang lại

Hệ thống Design Tokens không chỉ là về các con số, mà là về việc xây dựng một quy trình phát triển sản phẩm hiệu quả, chính xác và bền vững.

Đồng bộ Design – Code

Giao diện trên production luôn khớp với thiết kế.

01

Type-safe với TypeScript

Giảm lỗi khi sử dụng token trong quá trình phát triển.

02

Tăng tốc độ phát triển

Tái sử dụng token, hạn chế hard-code.

03

Dễ maintain & mở rộng

Update một nơi, áp dụng toàn hệ thống.

04

Visual Foundation

Hệ thống màu sắc

Hệ thống màu sắc của DeeUI được xây dựng dựa trên sự cân bằng giữathương hiệu vàtrải nghiệm người dùng, đảm bảo độ tương phản và khả năng tiếp cận tốt nhất.

Primary Blue

Màu sắc chủ đạo mang tính biểu tượng của hệ thống, được tinh chỉnh để đạt độ cân bằng tuyệt đối trên màn hình kỹ thuật số.

Core Shade500
#3599FC
PrimaryWCAG Pass
50
#EEF8FF
100
#DAEEFF
200
#BDE3FF
300
#90D2FF
400
#4DB2FF
600
#1F7AF1
700
#1763DE
800
#1951B4
900
#1A468E
950
#152C56
N

Neutral Gray

Bảng màu trung tính làm nền tảng cho mọi cấu trúc giao diện, phân cấp nội dung và điều hướng.

0
#FFFFFF
50
#F6F7F9
100
#ECEEF2
200
#D4DAE3
300
#AFBACA
400
#8495AC
500
#8495AC
600
#506079
700
#414E63
800
#374151
900
#333B47
950
#22272F

Semantic Colors

Hệ màu đại diện cho trạng thái hệ thống và phản hồi người dùng.

SuccessGreen Series
50#F2FBF3
100#E1F7E3
200#C5EDC8
500#39A244
700#266F2E
900#1E4924
WarningAmber Series
50#FDF8ED
100#F8EBCD
200#EFD598
500#DA8526
700#A0491D
900#6C301B
DangerRed Series
50#FEF4F2
100#FFE6E1
200#FFD2C9
500#F35C3F
700#BD3318
900#812B1B
InformationPurple Series
50#FCF5FF
100#F7E8FF
200#F0D5FF
500#C255F7
700#9922CE
900#691C87

Typography System

Hệ thống Typography

DeeUI sử dụng hệ thống typography được thiết kế dựa trên từng nhóm người dùng, nhằm tối ưu trải nghiệm đọc và cảm nhận giao diện.

Teacher

Teacher Interface

Inter

Inter mang lại cảm giác chuyên nghiệp, chính xác và tối ưu cho các tác vụ quản lý dữ liệu phức tạp.
Bold / 48pxProfessional
Medium / 32pxAccurate & Clear
Regular / 20pxDeeUI provides a specialized experience for educators.
Student

Student Interface

Nunito

Nunito với các đường bo góc mềm mại mang lại cảm giác thân thiện, nhẹ nhàng và giảm bớt áp lực trong học tập.
Bold / 48pxCreative
Medium / 32pxFriendly & Warm
Regular / 20pxLearning is an exciting journey with DeeUI.

Hệ thống phân cấp Typography

Cả hai hệ thống đều chia sẻ chung một bộ thông số kỹ thuật (Hierarchy specs) để đảm bảo tính đồng bộ, trong khi sự khác biệt về font-family giúp định hình cảm xúc phù hợp với mỗi nhóm người dùng.

Hierarchy Board

Teacher System (Inter)

Heading 1

Font size:64px
Line height:76px
Letter spacing:0%
Teacher / Bold

Typography

Teacher / Medium

Typography

Teacher / Regular

Typography

Heading 2

Font size:48px
Line height:56px
Letter spacing:0%
Teacher / Bold

Typography

Teacher / Medium

Typography

Teacher / Regular

Typography

Heading 3

Font size:40px
Line height:48px
Letter spacing:0%

Heading 4

Font size:32px
Line height:40px
Letter spacing:0%

Heading 5

Font size:24px
Line height:32px
Letter spacing:0%

Body lg

Font size:20px
Line height:28px
Letter spacing:0%

Body md

Font size:16px
Line height:24px
Letter spacing:0%

Body sm

Font size:14px
Line height:20px
Letter spacing:0%

Footnote

Font size:12px
Line height:16px
Letter spacing:0%
Hierarchy Board

Student System (Nunito)

Heading 1

Font size:64px
Line height:76px
Letter spacing:0%
Student / Bold

Typography

Student / Medium

Typography

Student / Regular

Typography

Heading 2

Font size:48px
Line height:56px
Letter spacing:0%
Student / Bold

Typography

Student / Medium

Typography

Student / Regular

Typography

Heading 3

Font size:40px
Line height:48px
Letter spacing:0%

Heading 4

Font size:32px
Line height:40px
Letter spacing:0%

Heading 5

Font size:24px
Line height:32px
Letter spacing:0%

Body lg

Font size:20px
Line height:28px
Letter spacing:0%

Body md

Font size:16px
Line height:24px
Letter spacing:0%

Body sm

Font size:14px
Line height:20px
Letter spacing:0%

Footnote

Font size:12px
Line height:16px
Letter spacing:0%

Layout Primitives

Spacing & Radius

DeeUI định nghĩa hệ thống spacing và border radius nhằm đảm bảo sự nhất quán trong layout, khoảng cách và hình dạng trên toàn bộ giao diện.

Spacing System

Hệ thống spacing chuẩn giúp việc thiết kế layout trở nên khoa học và đồng bộ. Các giá trị được tối ưu hóa cho hiển thị kỹ thuật số.

space-00 px
space-0252 px
space-0504 px
space-0756 px
space-1008 px
space-15012 px
space-20016 px
space-25020 px
space-30024 px
space-40032 px
space-50040 px
space-60048 px
space-80064 px
space-100080 px

Interactive Corner Radius

Khám phá cách các chuẩn bo góc thay đổi diện mạo của thành phần. Click vào danh sách bên phải để áp dụng ngay lập tức.

lg
Corner Radius8px

Visual Language

Icon System

DeeUI sử dụng thư viện Phosphor Icons làm nền tảng cho hệ thống icon, đảm bảo tính nhất quán, linh hoạt và dễ tích hợp trong quá trình phát triển.

Phosphor Icons

Tuỳ biến từ Thin tinh tế đến Duotone nổi bật

phù hợp mọi ngữ cảnh thiết kế.

Layout Architecture

Hệ thống Grid

DeeUI sử dụng hệ thống grid để tổ chức layout một cách nhất quán, giúp các thành phần UI được căn chỉnh chính xác và dễ mở rộng.

Device ModeDesktop
Columns12
Margin100px
Gutter24px
Col Width0px
100%
1
2
3
4
5
6
7
8
9
10
11
12

Interactive Responsive Grid System

MODULAR
REGISTRY
DESIGN_TOKENS: ATOMICCOORDINATES: 40.7128° N

Component System

Hệ thống Components

DeeUI cung cấp một hệ thống component được chuẩn hoá, giúp xây dựng giao diện nhanh chóng, nhất quán và dễ mở rộng.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Button

Buttons

Built with semantic colors and consistent states for clarity.

Placeholder
Help text

Input fields

Clear hierarchy: label, field, help text, and validation states.

Chip
1

Chips

Compact elements used for tagging, filtering, or selection.

STUDENT

Avatars

Visual identifiers with support for user status and grouping.

Label

Breadcrumbs

Helps users understand their location within the structure.

Badge

Badges

Highlights status or count using semantic color tokens.

1
2
3
100

Pagination

Allows navigation through large sets of content or pages.

Checkboxes, radiobuttons

Simple selection controls with clear active and focus states.

Plain tooltip
Plain tooltip

Tooltips

Reveals additional context without interrupting the flow.

...and more components

Core Components

Button Components

Button trong DeeUI được thiết kế theo từng nhóm người dùng, nhằm đảm bảo trải nghiệm phù hợp với ngữ cảnh sử dụng và hành vi tương tác.

Student Button
Student Button
Teacher Button
Teacher Button
Interactive Studio

Smart Variations

Mỗi Button được thiết kế theo cấu trúc module linh hoạt, cho phép kết hợp các trạng thái và thành phần khác nhau một cách nhất quán.

1. StudentButton

Code Implementation

Smart Variations
Size
States
Variant
Icons
Label

Figma Properties

StudentButton
Properties+
sizemd
stateDefault
variantprimary
fullWidthFalse
hasLeadingIconFalse
hasTrailingIconFalse
LabelBắt đầu học

2. TeacherButton

Code Implementation

Smart Variations
Size
States
Variant
Icons
Label

Figma Properties

TeacherButton
Properties+
sizemd
stateDefault
variantprimary
fullWidthFalse
hasLeadingIconFalse
hasTrailingIconFalse
LabelGiao bài ngay

Core Components

Input Components

Input trong DeeUI được tối ưu hóa cho việc nhập liệu chính xác, hỗ trợ đầy đủ các trạng thái và thành phần bổ trợ để tối ưu trải nghiệm người dùng.

Interactive Studio

Smart Variations

Mỗi Input được thiết kế theo cấu trúc module linh hoạt, cho phép kết hợp các trạng thái và thành phần khác nhau một cách nhất quán.

1. StudentInput

Code Implementation

Smart Variations
Size
States
Icons
Content
Label
Placeholder
Helper Text

Figma Properties

StudentInput
Properties+
sizemd
stateDefault
labelHọ và tên
placeholderNhập tên của bạn...
hasLeadingIconTrue
leadingIconUser
hasTrailingIconFalse
helperTextDùng tên thật để giáo viên dễ nhận biết

2. TeacherInput

Code Implementation

Smart Variations
Size
States
Icons
Content
Label
Placeholder
Helper Text

Figma Properties

TeacherInput
Properties+
sizemd
stateDefault
labelTiêu đề bài kiểm tra
placeholderVí dụ: Kiểm tra 15 phút - Chương 1
hasLeadingIconTrue
leadingIconSearch
hasTrailingIconFalse
helperText—