UI Components.
Matcha Logic의 디자인 시스템 가이드 (v2.2)입니다.
00. Typography
| Class | Size (px) | Usage (Matcha Standard) |
|---|---|---|
| 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 | L9. Badge (카테고리 태그) |
| text-[10px] | 10px | L10. Micro (스펙 배지) |
L1 Display
Matcha Logic.
CSS: 60px / About, Origin, Ingredients
L2 H1 Standard
Brewing Log
CSS: 48px / Blog, Tasting, Flavors
L3 Section Title
Latest Brewing
CSS: 30px / 메인 섹션 구분
L4 Card Title
Visual Identity System
CSS: 24px / 카드 제목, 소제목
L7 Body Text
Matcha Logic은 본문 가독성을 최우선으로 합니다. 16px를 기준으로 하며, 줄 간격을 넉넉하게 주어 편안한 읽기 경험을 제공합니다.
CSS: 16px / 모든 본문 및 설명글
L8 Detail
2025. 11. 26. • Written by JIYU
CSS: 14px / 설명, 날짜, 푸터
L9 Badge
AI Coding
CSS: 12px / 카테고리 태그
L10 Micro
SNAPDRAGON X ELITE
CSS: 10px / 스펙 배지
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 (Design Standards)
Type A: Standard Card
Tag 2025.11.26
Standard Title (20px)
Ingredients나 Brewing 목록에서 사용합니다. 곡률은 16px(2xl)를 표준으로 정의합니다.
rounded-2xl border-matcha-100 shadow-atmosphere Type B: Archive Card
Dark Title (20px)
SpecMuseum 등 무게감이 필요한 곳에 사용하며, 깊이있는 Atmosphere 그림자를 가집니다.
rounded-2xl bg-matcha-900 (Dark) Type C: Feature Card
v2.2.0
Feature Card Title (24px)
Tasting Notes처럼 주목도가 필요한 콘텐츠에 사용합니다. 고밀도 FHD 환경을 위해 기존의 과도했던 곡률을 16px로 절제하고 타이포그래피의 선명도를 높였습니다.
p-8 md:p-10 rounded-2xl shadow-atmosphere