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 · 커머스 · 레퍼런스
Carbon Design System 규칙으로 지은 화면
LUMA 원두 스토어의 쇼핑 한 페이지를 39가지 디자인 스타일로 각각 다시 지었습니다. 상품과 장바구니는 그대로, 규칙만 갈아끼운 화면입니다.
이 화면이 지키는 규칙
IBM의 오픈소스 디자인 시스템으로, 엔터프라이즈 제품에 최적화되어 있습니다. 커피 구독 브랜드 LUMA의 랜딩 한 페이지를, Carbon Design System 규칙만 갈아끼워 다시 지은 화면입니다. 이 스타일이 붙들고 있는 축은 세 가지 — 명확하고 직관적 · 접근 가능하고 포용적 · 일관되고 예측 가능. 그래서 다른 걸 다 포기하더라도 화면에 끝까지 남는 것은 8px 기반 spacing 시스템 철저 준수 / Focus indicator — 키보드 포커스 시 2px 파란 외곽선 필수 쪽입니다. 무드로 읽으면 미니멀 · 신뢰감 계열, 여백이 넓은 · 차가운 · 시대색이 옅은 · 격식 있는 자리에 놓입니다. 실제로는 엔터프라이즈 SaaS · 데이터 분석 대시보드 · IBM 클라우드 제품 같은 화면에서 자주 만납니다.
색이 하는 일
White/Gray10/Gray90/Gray100 4가지 테마 기반. 모두 회색-파랑 계열의 절제된 팔레트. 색의 역할은 이렇게 나뉩니다 — interactive → 버튼, 링크, 포커스 — IBM Blue (#0F62FE) / ui-background → 페이지 배경 (테마에 따라 #fff, #f4f4f4, #262626, #161616) / ui-01/02: 컴포넌트 배경 — 테마에 따라 2단계. 대신 넘지 않는 선이 있습니다 — IBM Blue 계열 외 primary 색상 사용 금지 / 4가지 공식 테마 중 하나 선택 — 임의 테마 생성 지양. 이 페이지에 실제로 물려 있는 값은 강조색 #0F62FE, 배경 #161616, 표면 #262626입니다. 대비 기준은 WCAG 2.1 AA 전면 준수. 모든 테마에서 텍스트-배경 4.5:1 이상.
글자와 리듬
IBM Plex Sans — 기술적이고 전문적이며 가독성 높은 산세리프. 고정폭 코드에는 IBM Plex Mono. 글꼴은 최대 2종까지 씁니다. 타입 스케일은 Carbon Type Scale 고정 (4px 기반 수학적 스케일). IBM Plex 계열만 사용 권장 (Plex Sans, Plex Mono, Plex Serif) / 14단계 Type Scale 준수 (12/14/16/18/20/24/28/32/36/42/48/54/60/68px) — 히어로와 본문 사이의 거리가 여기서 정해집니다. 이 화면에 물린 값은 IBM Plex Sans 계열, 제목 600 · 본문 400 두께, 자간 0em입니다. 섹션 사이 여백은 촘촘한 쪽으로 잡혀 있습니다.
손끝에서 갈리는 차이
Carbon Design System에서 하지 않는 것은 분명합니다 — 8px 그리드 벗어난 spacing 사용 금지 / IBM Blue 외 강조색 추가 금지 / 장식적 그라데이션·그림자 사용 금지 — 완전 플랫. 버튼은 각을 살린 모양에 어두워지는 호버, 카드는 납작한 표면에 테두리에 색이 도는 반응으로 물려 있습니다. 전환은 110ms cubic-bezier(0.2, 0, 0.38, 0.9) 한 박자로 통일했습니다. Productive 모션: 100~200ms, Linear. Expressive 모션: 200~400ms, ease-in-out. 불필요한 애니메이션 배제 — 기능 중심. 엔터프라이즈 SaaS · B2B 제품 · 관리자 대시보드 같은 프로젝트라면 이 조합이 가장 오래 버팁니다.