YG
예가체페 코체레
에티오피아 · 라이트 · 200g
자몽과 홍차, 산뜻한 끝맛
18,000원/ 200g
4.8 (214)
원두 스토어
이번 주 로스팅 일정에 올라간 원두만 보여드립니다.
정렬
이번 주 원두
목요일 로스팅분으로 준비합니다.
전체 8종
HU
우일라 수프리모
콜롬비아 · 미디엄 · 200g
캐러멜과 견과, 부드러운 바디
15,500원/ 200g
4.6 (167)
AN
안티구아 파스토레스
과테말라 · 미디엄 · 200g
다크초콜릿과 은은한 향신료
16,500원/ 200g
4.5 (132)
KE
신상품
키암부 AA
케냐 · 미디엄 · 200g
자두와 토마토, 묵직한 단맛
19,000원/ 200g
4.7 (98)
MD
만델링 G1
인도네시아 · 다크 · 200g
삼나무와 흑설탕, 낮은 산미
14,500원/ 200g
4.3 (76)
HB
베스트
하우스 블렌드
블렌드 · 미디엄 다크 · 500g
우유와 잘 어울리는 기본 블렌드
23,000원/ 500g
4.9 (503)
DC
디카페인 콜롬비아
콜롬비아 · 미디엄 · 200g
늦은 저녁에도 부담 없는 한 잔
17,000원/ 200g
4.4 (88)
DB
재고 임박
드립백 12개입
블렌드 · 미디엄 · 12개 · 120g
사무실과 여행용으로 담는 구성
16,000원/ 12개 · 120g
4.6 (341)
DEMO · 커머스 · 레퍼런스
Toss Design System (TDS) 규칙으로 지은 화면
LUMA 원두 스토어의 쇼핑 한 페이지를 39가지 디자인 스타일로 각각 다시 지었습니다. 상품과 장바구니는 그대로, 규칙만 갈아끼운 화면입니다.
이 화면이 지키는 규칙
OKLCH 색공간 기반의 정교한 컬러 시스템, 파생 가능한 테마 시스템, 11개 핵심 컴포넌트를 갖춘 토스의 디자인 시스템으로 금융 앱부터 슈퍼앱, POS, 글로벌까지 확장 가능한 System of System 구조입니다. 커피 구독 브랜드 LUMA의 랜딩 한 페이지를, Toss Design System (TDS) 규칙만 갈아끼워 다시 지은 화면입니다. 이 스타일이 붙들고 있는 축은 세 가지 — Simplicity — 복잡한 금융을 단순하게 · Consistency — 모든 플랫폼에서 동일한 경험 · Scalability — 테마 파생으로 무한 확장. 그래서 다른 걸 다 포기하더라도 화면에 끝까지 남는 것은 8px 기반 스페이싱 시스템 / 시맨틱 컬러 토큰을 통한 일관된 색상 사용 쪽입니다. 무드로 읽으면 미니멀 · 신뢰감 계열, 여백이 넓은 · 중성적인 · 시대색이 옅은 · 격식 있는 자리에 놓입니다. 실제로는 핀테크 / 금융 모바일 앱 · 슈퍼앱 멀티 서비스 플랫폼 · POS 및 오프라인 디바이스 UI 같은 화면에서 자주 만납니다.
색이 하는 일
OKLCH 색공간 기반으로 인지적으로 균일한 명도를 보장하는 시맨틱 컬러 토큰 시스템. 색의 역할은 이렇게 나뉩니다 — primary → 주요 CTA 및 브랜드 강조 — TDS Blue (#0050FF ~ #3182F6 스케일) / background → 화이트(#FFFFFF) 및 라이트 그레이(#F2F4F6) 배경 / text → #191F28(본문), #4E5968(보조), #8B95A1(비활성). 대신 넘지 않는 선이 있습니다 — 동일 스케일 번호는 반드시 동일 명도 — Blue 100과 Red 100은 같은 밝기 / 다크모드 전용 명도 보정 적용 (라이트와 다른 별도 기준치). 이 페이지에 실제로 물려 있는 값은 강조색 #3182F6, 배경 #F2F4F6, 표면 #FFFFFF입니다. 대비 기준은 OKLCH 기반 인지적 균일 명도 + APCA 대비 알고리즘 적용, 저해상도 디바이스에서도 색상 소실 없이 식별 가능.
글자와 리듬
Toss Product Sans — 친근하면서도 신뢰감 있는 자체 개발 산세리프. 글꼴은 최대 1종까지 씁니다. 타입 스케일은 1.25 (Major Third). 계층화된 Typography 토큰으로 폰트 크기·라인 높이 추상화 / iOS/Android '더 큰 텍스트' 접근성 설정 연동 필수 — 히어로와 본문 사이의 거리가 여기서 정해집니다. 이 화면에 물린 값은 Inter 계열, 제목 700 · 본문 400 두께, 자간 -0.01em입니다. 섹션 사이 여백은 촘촘한 쪽으로 잡혀 있습니다.
손끝에서 갈리는 차이
Toss Design System (TDS)에서 하지 않는 것은 분명합니다 — 플랫폼별 토큰 개별 관리 금지 — 반드시 Single Source of Truth 유지 / 시맨틱 토큰 무시하고 하드코딩된 색상값 직접 사용 금지 / 복잡한 장식 요소로 금융 정보의 가독성을 해치는 디자인 금지. 버튼은 모서리를 살짝 굴린 모양에 어두워지는 호버, 카드는 납작한 표면에 살짝 떠오르는 반응으로 물려 있습니다. 전환은 200ms ease-in-out 한 박자로 통일했습니다. ease-in-out 200ms 기본 — 자연스럽고 빠른 트랜지션, 금융 맥락에서 사용자 불안감을 주지 않는 안정적 모션. 모바일 중심 B2C 금융 서비스 · 다수 브랜드를 수용하는 슈퍼앱 플랫폼 · 접근성과 일관성이 핵심인 대규모 프로덕트 같은 프로젝트라면 이 조합이 가장 오래 버팁니다.