Thông báo

Style Guide

Trang này hiển thị tất cả components và styles của DIA DEMY.

Typography

Headlines

Heading 1 - 56px Medium

Heading 2 - 33px Medium

Heading 3 - 24px Medium

Heading 4 - 20px Medium

Heading 5 - 18px Medium
Heading 6 - 16px Medium

Content (Averta)

Large - 18px Regular

Large Medium - 18px Medium

Body - 16px Regular

Body Semibold - 16px Semibold

Small - 15px Regular

Small Medium - 15px Medium (Form Labels)

Meta - 13px Regular (smallest)

Actions (JetBrains Mono)

Action - 13px Semibold UPPERCASE (Button, Tab, Nav)
Input - 15px Medium

Text Emphasis

Học lập trình hiệu quả hơn

DIA DEMY cung cấp hơn 500 khóa học chất lượng cao

Colors

Brand

Primary
$color-primary
#f94848
Primary Hover
$color-primary-hover
#e03e3e

Semantic States

Error
$color-error
Success
$color-success
Warning
$color-warning
Info
$color-info

Text Hierarchy

Text High
$color-text-hi
Text Medium
$color-text-me
Text Low
$color-text-lo

Buttons

Main Variants

State Variants

Light Variants

Sizes

Border Radius

States

Full Width

Encrypt Effect

Badges & Tags

Badge Variants - Theo màu cơ bản

Mỗi màu có nhiều variant names (semantic + domain-specific) cho code dễ đọc.

Primary (Red)
primaryinstructor
Success (Green)
successstudentoffline
Warning (Orange)
warninghybrid
Danger (Red)
dangeradmin
Info (Blue)
infoonline
Default (Gray)
default

Badge Types

Normal Type (mặc định)

Normal BadgeSuccessInfo

Status Type (với dot pulsing)

ActivePendingInactiveProcessing

Badge Sizes

Small (sm) - 22pxMedium (md) - 32px

Usage Examples

Role badges:
AdminInstructorStudent
Learning modes:
OnlineOfflineHybrid
Status with dot:
Active UserBanned

Tags - Interactive Chips

Tag component với 3 visual states: Default → Hover → Active. Logic do parent quyết định.

3 Visual States

1. Default (static)
Dashed border • No interaction
2. Hover (clickable) - hover me!
Dashed → Solid gray border on hover
3. Active (selected) - hover me!
Solid primary border • Checkmark badge • Click to deselect/remove

Usage Patterns

Pattern 1: Toggle Filter (click to toggle on/off)
💡 Code: onClick={() => setActive(!active)}
Pattern 2: Cloud Tags (click to remove)
💡 Code: onClick={() => removeTag(id)}

Navigation

Nav Items

TRANG CHỦ
KHÓA HỌC
GIỚI THIỆU

Spacing Scale

$space-0
0px
$space-1
4px
$space-2
8px
$space-3
12px
$space-4
16px (base)
$space-5
20px
$space-6
24px (common)
$space-8
32px
$space-10
40px
$space-12
48px

Border Radius

$radius-none
0px
$radius-sm
4px
$radius-md
8px
$radius-lg
12px
$radius-xl
16px
$radius-full
9999px