v1.0 · Indie Page Style

Design System

Tokens và components dùng trong portfolio. Mọi component nằm trong src/components/ds/.

Tokens — Colors

Hệ màu khai báo bằng CSS variables. Đổi một token, đổi toàn site.

canvas

#E8E7EC

canvas-2

#DFDEE5

surface

#FFFFFF

text

#0F1729

text-soft

#4B5563

accent

#6366F1

accent-soft

#EEF0FF

gold

#F5C861

green

#2DBA73

rose

#E86B7C

sky

#4DAEF4

orange

#F18A52

Tokens — Radii & Shadows

Bo góc và đổ bóng nhất quán theo thang.

6px

10px

14px

20px

28px

40px

999px

shadow-xs

shadow-sm

shadow-md

shadow-lg

Typography

Font chính: Inter Tight — đậm, hiện đại, đọc tốt mọi cỡ.

h1 / DisplayThe quick brown fox jumps over the lazy dog

h2 / HeadingThe quick brown fox jumps over the lazy dog

h3 / SubheadingThe quick brown fox jumps over the lazy dog

BodyThe quick brown fox jumps over the lazy dog

SmallThe quick brown fox jumps over the lazy dog

MonoThe quick brown fox jumps over the lazy dog

Buttons

5 variant: primary · accent · gold · ghost · outline. 3 size: sm · md · lg.

Primary

Accent

Gold

Ghost

Outline

Sizes

Chips & Badges

Chip cho meta nhỏ. Revenue badge cho số liệu nổi bật.

Chip — tones

DefaultPurpleGoldGreenRoseSkyOrange

Chip with icon

FeaturedVerified8 min

Stat chips

HCMC, VN6 projects

Revenue badge

$6.6k/mo$29k/mo$850/mo

Icon Tiles

Khối vuông bo tròn chứa icon — dùng cho service avatar, project icon.

Sizes

Tones

Icon set (24)

Cards

Card mặc định có shadow nhẹ. Flat = chỉ border. Interactive = hover lift.

Default

Card title

Soft shadow, white background, used for grouping content.

Flat

Border only

No shadow, 1px border. For dense layouts.

Interactive

Hover me

Lifts on hover, deeper shadow. For clickable cards.

Inputs

Pill-shaped text input, select, attached email + button.

Text input

Select

Textarea

Attached input (subscribe)

Platform links

Tabs / Filter pills

Segmented control với count chip.

DSTabRow

Area Chart

SVG area chart with smooth curves, y-axis labels, month labels. Gold gradient mặc định.

Growth (gold)

Flat (no gold)

Screenshots

Mobile → row 4 ảnh portrait. Web/AI → slider 3 ảnh landscape (mũi tên + dots).

Mobile — Row (4 ảnh)

Web / AI — Slider (3 ảnh)

Screenshot 1

Screenshot 2

Screenshot 3

01 / 03

Project Card

Signature component: icon + name + platform links + summary + visuals.

Top 1GPlay

ZaBotAI

4.5100k lượt tải

Nền tảng tạo, huấn luyện và triển khai chatbot AI cho ứng dụng nhắn tin — phục vụ khách hàng 24/7.

Post Card

Variant của project card cho bài viết — icon + tiêu đề + excerpt + meta.

Mobile

8 phút

Kotlin Multiplatform: bài học sau khi ship 3 app production

KMP đã thay đổi cách team mình build cross-platform — nhưng không phải mọi thứ đều màu hồng.

12 thg 4, 2026Đọc tiếp

FAQ

Accordion với plus → x animation.

Quy trình làm việc như thế nào?

Mình theo 5 bước: Khảo sát → Phân tích & Báo giá → Thiết kế → Lập trình → Bàn giao. Mỗi giai đoạn có demo rõ ràng.

Chi phí thiết kế Web/App là bao nhiêu?