UI Components.
Matcha Logic의 디자인 시스템 가이드 (v2.2)
00. Typography
| Class | Size (px) | Usage (Matcha Logic) |
|---|---|---|
| text-4xl md:text-6xl | 60px | L1. Display (About, Origin, Ingredients) |
| text-3xl md:text-5xl | 48px | L2. H1 Standard (Blog, Tasting, Flavors) |
| text-2xl md:text-3xl | 30px | L3. Section Title (메인 섹션 구분) |
| text-xl md:text-2xl | 24px | L4. Card Title (카드 제목, 소제목) |
| text-base | 16px | L7. Body Text (모든 본문 및 설명글) |
| text-sm | 14px | L8. Detail (설명, 날짜, 푸터) |
| text-xs | 12px | L8. Badge (카테고리 태그) |
| text-[10px] | 10px | L9. Micro (스펙 배지) |
L1. Display
Matcha Logic.
SIZE: 60px USAGE: About, Origin, Ingredients
L2. H1 Standard
Brewing Log
SIZE: 48px USAGE: Blog, Tasting, Flavors
L3. Section Title
Latest Brewing
SIZE: 30px USAGE: 메인 섹션 구분
L4. Card Title
Visual Identity System
SIZE: 24px USAGE: 카드 제목, 소제목
L7. Body Text
Matcha Logic은 본문 가독성을 최우선으로 합니다. 16px를 기준으로 하며, 줄 간격을 넉넉하게 주어 편안한 읽기 경험을 제공합니다.
SIZE: 16px USAGE: 모든 본문 및 설명글
L8. Detail
2025. 11. 26. • Written by JIYU
SIZE: 14px USAGE: 설명, 날짜, 푸터
L8. Badge
AI Coding
SIZE: 12px USAGE: 카테고리 태그
L9. Micro
SNAPDRAGON X ELITE
SIZE: 10px USAGE: 스펙 배지
01. Badges
L8. Standard Badge (12px)
AI Coding Refactoring Guide
USAGE: Blog Category L9. Micro Badge (10px)
Mobile Snapdragon 2025 ~
USAGE: Specs, Attributes 02. Buttons & Links
Primary
bg-matcha-900 Secondary (Fill Effect)
hover:bg-matcha-800 Accent (Highlight)
bg-matcha-500 shadow-lg Text Link
variant="link" 03. Cards
Type A: Content Card (Standard)
Tag
Standard Title (20px)
Ingredients나 Brewing 목록에서 사용합니다. (본문 14px)
Type B: Archive Card (Dark)
Spec
Dark Title (20px)
Museum 등 무게감이 필요한 곳에 사용합니다. (본문 14px)
Type C: Feature Card (Report / Wide)
v1.0.0
Feature Card Title (24px)
Tasting Notes처럼 텍스트의 비중이 높고 주목도가 필요한 콘텐츠에 사용합니다.