~/kitchen_

UIComponents.

Matcha Logic의 디자인 시스템 가이드 (v2.2)입니다.

00. Typography

ClassSize (px)Usage (Matcha Standard)
text-3xl md:text-[48px]48pxL1. Display (Highlight)(PageTitle (with highlight) on About, Blog)
text-2xl md:text-4xl36pxL2. Display (Standard)(PageTitle (standard) on Index, About)
text-2xl md:text-[30px]30pxL3. Section Title(Section headers (Welcome Preamble, The Crew, Focus, H2))
text-xl md:text-[24px]24pxL4. Card & Item Title(Card titles and list item headlines (H3))
text-base16pxL7. Body Text(Paragraphs, preambles, descriptions, card body)
text-[10px]10pxL8. Detail & Metadata(Dates, tags, Specs, section indicators)
text-xs12pxL9. Badge(Standard tags and categories)
text-[10px]10pxL10. Micro Spec(Specs, labels, details)
L1Display (Highlight)

Matcha Logic.

CSS: 48px/ PageTitle (with highlight) on About, Blog
L2Display (Standard)
Brewing Log
CSS: 36px/ PageTitle (standard) on Index, About
L3Section Title
Latest Brewing
CSS: 30px/ Section headers (Welcome Preamble, The Crew, Focus, H2)
L4Card & Item Title
Visual Identity System
CSS: 24px/ Card titles and list item headlines (H3)
L7Body Text

Matcha Logic은 본문 가독성을 최우선으로 합니다. 16px를 기준으로 하며, 줄 간격을 넉넉하게 주어 편안한 읽기 경험을 제공합니다.

CSS: 16px/ Paragraphs, preambles, descriptions, card body
L8Detail & Metadata
2025. 11. 26. • Written by JIYU
CSS: 10px/ Dates, tags, Specs, section indicators
L9Badge
AI Coding
CSS: 12px/ Standard tags and categories
L10Micro Spec
SNAPDRAGON X ELITE
CSS: 10px/ Specs, labels, details

01. Badges

L8. Standard Badge (12px)
AI CodingRefactoringGuide
USAGE: Blog Category
L9. Micro Badge (10px)
MobileSnapdragon2025 ~
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
Tag2025.11.26

Standard Title (20px)

Ingredients나 Brewing 목록에서 사용합니다. 곡률은 16px(2xl)를 표준으로 정의합니다.

rounded-2xl border-matcha-100 shadow-atmosphere
Type B: Archive Card

Dark Title (20px)

Spec

Museum 등 무게감이 필요한 곳에 사용하며, 깊이있는 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