매주 새로 볶는 커피 구독

로스팅한 지 사흘 안 된 원두만 담습니다. 취향을 고르면 매주 목요일에 도착합니다.

4,200구독 중인 가정

72시간로스팅 후 배송까지

12종싱글 오리진 원두

루마의 원칙

한 잔의 기준을 정해두고, 매주 그 기준대로 보냅니다.

사흘 이내 로스팅

주문이 모이면 그때 볶습니다. 미리 볶아 쌓아두지 않습니다.

취향 진단

다섯 가지 질문으로 산미와 바디를 맞춰 원두를 고릅니다.

산지 직거래

에티오피아와 콜롬비아 농장에서 직접 계약해 들여옵니다.

커핑 기록 동봉

그 주 배치의 커핑 노트와 로스팅 프로파일을 함께 보냅니다.

나눠 받는 계정

한 구독으로 두 가지 원두를 나눠 받을 수 있습니다.

언제든 일시정지

여행이나 출장 주간은 구독 관리에서 한 번에 건너뜁니다.

구독 플랜

원두 양과 주기만 고르면 됩니다. 약정 기간은 없습니다.

Solo

12,900원주 1회

200g 원두 한 봉
분쇄도 선택 가능
배송비 포함
언제든 일시정지

Duo

22,900원주 1회

Solo의 모든 항목
200g 두 종 또는 400g 한 종
커핑 노트 카드 동봉
한정 로스팅 우선 배정

House

39,000원주 1회

Duo의 모든 항목
1kg 업소용 팩
드립백 20개 추가
담당자 상담 연결

첫 주는 취향 진단용 샘플 세 종으로 시작합니다.

DEMO · 브랜드 랜딩 · 레퍼런스

Astryx (Meta 디자인 시스템) 규칙으로 지은 화면

커피 구독 브랜드 LUMA의 랜딩 한 페이지를 39가지 디자인 스타일로 각각 다시 지었습니다. 콘텐츠는 그대로, 규칙만 갈아끼운 화면입니다.

이 화면이 지키는 규칙

Meta가 공개한 오픈소스 디자인 시스템으로, StyleX 원자 CSS와 깊게 통합된 시맨틱 토큰 아키텍처가 핵심입니다. 따뜻한 크림 배경과 니어블랙 모노크롬 강조의 절제된 기본 테마(neutral) 위에 butter, matcha, gothic, y2k 등 테마 팩을 얹어 코드 수정 없이 전혀 다른 무드를 만들 수 있습니다. 커피 구독 브랜드 LUMA의 랜딩 한 페이지를, Astryx (Meta 디자인 시스템) 규칙만 갈아끼워 다시 지은 화면입니다. 이 스타일이 붙들고 있는 축은 네 가지 — Components over primitives — 원시 HTML보다 컴포넌트를 우선 사용 · Semantic tokens — 색·간격·반경을 외형이 아닌 목적으로 명명 · Theme-agnostic code — 앱 코드가 색상값을 모르므로 테마·다크모드가 자동 동작 · Open interfaces — 모든 프리미티브를 export해 자유로운 조합·확장 허용. 그래서 다른 걸 다 포기하더라도 화면에 끝까지 남는 것은 시맨틱 토큰 기반 스타일링 (색·간격·반경 모두) / body→surface→card 서피스 계층에 따른 시각적 깊이 쪽입니다. 무드로 읽으면 미니멀 · 따뜻한 · 신뢰감 계열, 여백이 넓은 · 따뜻한 · 시대색이 옅은 · 격식 있는 자리에 놓입니다. 실제로는 멀티 테마를 지원해야 하는 SaaS 제품 · 다크모드 자동 대응이 필요한 웹 앱 · AI 코딩 도구와 협업하는 컴포넌트 기반 개발 같은 화면에서 자주 만납니다.

색이 하는 일

웜 크림 바디(#F8F4ED) 위 화이트 서피스 계층과 니어블랙(#15110C) 모노크롬 강조 — 모든 토큰이 라이트/다크 쌍으로 정의되는 의도 기반 시맨틱 시스템. 색의 역할은 이렇게 나뉩니다 — background → body(#F8F4ED 웜 크림) → surface/card(#FFFFFF) → popover 순의 서피스 계층 / text → primary #15110C(니어블랙), secondary #4E606F(블루그레이), disabled #A4B0BC / accent → #15110C — 강조조차 모노크롬, accent-muted는 8% 알파 틴트. 대신 넘지 않는 선이 있습니다 — HEX 하드코딩 금지 — 반드시 시맨틱 토큰(--color-text-primary 등)만 사용 / 서피스 계층(body→surface→card→popover) 순서를 건너뛰거나 뒤집지 않음. 이 페이지에 실제로 물려 있는 값은 강조색 #15110C, 배경 #F8F4ED, 표면 #FFFFFF입니다. 대비 기준은 시맨틱 토큰 레벨에서 라이트·다크 양쪽 모두 텍스트-배경 대비를 보장하도록 값 쌍이 설계됨 (WCAG 준수).

글자와 리듬

Figtree — 둥글고 친근하지만 절제된 기하학적 산세리프 (코드에는 모노스페이스). 글꼴은 최대 2종까지 씁니다. 타입 스케일은 1.2 (Minor Third) — 14px 기준 기하급수 스케일. 폰트 크기·행간 수동 지정 금지 — Display/Heading/Body/Label/Supporting 시맨틱 타입 토큰만 사용 / 라인 박스를 4px 그리드에 정렬해 기준선·간격을 예측 가능하게 유지 — 히어로와 본문 사이의 거리가 여기서 정해집니다. 이 화면에 물린 값은 Figtree 계열, 제목 600 · 본문 400 두께, 자간 0em입니다. 섹션 사이 여백은 표준적인 쪽으로 잡혀 있습니다.

손끝에서 갈리는 차이

Astryx (Meta 디자인 시스템)에서 하지 않는 것은 분명합니다 — 색상·크기 하드코딩 금지 — 테마 독립성이 깨져 테마 팩·다크모드가 오작동 / 컴포넌트가 커버하는 영역에서 원시 HTML 사용 금지 (Components over primitives) / 호버 반응을 지연시키는 애니메이션 금지 — 상호작용이 사용자 동작보다 늦으면 안 됨. 버튼은 모서리를 살짝 굴린 모양에 어두워지는 호버, 카드는 선으로만 그은 표면에 꿈쩍하지 않는 반응으로 물려 있습니다. 전환은 175ms cubic-bezier(0.24, 1, 0.4, 1) 한 박자로 통일했습니다. 표준 이징 cubic-bezier(0.24,1,0.4,1) 하나로 통일 — 빈번한 상호작용은 fast(175ms), 레이아웃 변화는 medium(410ms), OS 모션 감소 설정 존중. 테마·다크모드를 처음부터 시스템으로 깔고 가는 신규 프로젝트 · React 기반 대규모 제품의 디자인 토큰 표준화 · AI 에이전트와 함께 UI를 생성·유지보수하는 팀 같은 프로젝트라면 이 조합이 가장 오래 버팁니다.