Display - Large
Display - Medium
Heading 2XL (H1 equivalent)
Heading XL (H2 equivalent)
The quick brown fox jumps over the lazy dog
Heading LG (H3 equivalent)
The quick brown fox jumps over the lazy dog every morning
Heading MD (H4 equivalent)
The quick brown fox jumps over the lazy dog every morning at sunrise
Heading SM (H5 equivalent)
The quick brown fox jumps over the lazy dog every morning at sunrise near the forest
Heading XS (H6 equivalent)
The quick brown fox jumps over the lazy dog every morning at sunrise near the forest and lake
Paragraph XL
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraph LG
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Paragraph MD (Default body text)
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Spacing Scale
3XS (2px)
2XS (4-6px)
XS (8-12px)
S (12-16px)
M (16-24px)
L (24-40px)
XL (32-64px)
2XL (48-80px)
3XL (64-128px)
4XL (96-160px)
Border Radius & Shadows
Border Radius Tokens
none
xs
md
lg
xl
2xl
full
Shadow Elevation Levels
SM
MD
LG
XL
Hệ thống nút khá tối ưu
Primary Style Buttons
Secondary Style Buttons
Light Style Buttons
Dark Style Buttons
Outline Style Buttons
Button with Links
1. Typography Check (Theme Defaults)
Heading 2 - Jumps Over The Lazy Dog
Heading 3 - Sphinx Of Black Quartz
Heading 4 - Judge My Vow
Heading 5 - Pack My Box With Five Dozen Liquor Jugs
Heading 6 - The Five Boxing Wizards Jump Quickly
Paragraph (Body) – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Paragraph (Long) – Efficiency is doing things right; effectiveness is doing the right things. Modern design systems require a balance of structure and flexibility. By using token-based architecture, we ensure consistency across all component layers while maintaining the ability to scale and adapt to new requirements without breaking existing layouts.
2. Card Demos (Structure Test)
Simple Card
Basic card structure with title, description and a simple text link.
Category • 5 min read
Blog Post Title That Might Span Two Lines
Excerpt text goes here. It provides a quick summary of the article content to entice users to click.
Feature Highlight
Highlighted feature with secondary background to stand out. Uses icon and clear hierarchy.