DESIGN SYSTEM
A comprehensive guide to the liquid glass design language, components, and patterns
Typography
| Heading 1 |
ANAKOT LIQUID |
96px / 82px |
| Heading 2 |
ความเชี่ยวชาญ
|
48px / 56px |
| Heading 3 |
Stripe |
30px / 36px |
| Heading 4 |
สถาปัตยกรรมมินิมอล |
24px / 32px |
| Bold L | ฿19,900 | 36px / 44px |
| Bold M | Liquid (ลื่นไหล) | 24px / 32px |
| Bold S | SEO & การวิเคราะห์ | 20px / 28px |
| Paragraph L |
เราไม่ได้แค่สร้างเว็บไซต์ แต่เราสร้างระบบนิเวศที่เป็นของเหลว |
18px / 28px |
| Paragraph M |
ข้อมูลเชิงลึกช่วยเพิ่มการมองเห็นและเปลี่ยนกระแสผู้เข้าชมให้เป็นลูกค้าที่ภักดี |
16px / 24px |
| Regular S | รากฐานดิจิทัลสำหรับธุรกิจใหม่ | 14px / 20px |
| Caption | / เดือน | 12px / 16px |
| Micro | นวัตกรรมไร้รอยต่อ | 10px / 14px |
| Gradient Text | ที่ลื่นไหล | 48px / 56px |
Colors & Surfaces
Backgrounds
Primary Colors
Text Colors
Borders & Dividers
Gradients
UI Components
Buttons
Input Fields
Cards
Service Card
Hover to see arrow appear
Card with Gradient
Background gradient overlay
Badges & Tags
Navigation Dots
Layout & Spacing
Container
max-w-7xl mx-auto px-6
1280px max-width, centered, 24px horizontal padding
Section Padding
py-32 (8rem vertical padding)
Grid Layouts
Split Layout
Left Content
flex-1 max-w-xl
Right Content
Motion & Interaction
Hover Effects
Glass Panel Hover
Lifts up 5px, border brightens
Arrow Reveal
Opacity transition on hover
Reveal Animation
Fades in and slides up from 30px
Motion Animations
Button Transitions
Scale Transitions
Scale 110% on hover
Scale 105% on hover
Icons
Icon System
Using Iconify with Lucide icon set. Icons inherit text color and can be sized via data-width attribute.
Icon Sizes
Icon Colors
Common Icons
arrow-up-right
search
compass
palette
code-2
check-circle
heart
play
Icon Usage Examples
Icon in container with gradient background