Cuma Biji

Overview

Cuma Biji is a specialty coffee roaster and retailer celebrating the heritage and terroir of Indonesian coffee origins—Gayo, Toraja, Kintamani, Java Preanger, Flores, and Papua. The brand embodies a philosophy of 'Artisanal Warmth'—a design aesthetic that fuses heritage craftsmanship with contemporary minimalism, evoking the intimate ritual of coffee preparation and the respect owed to small-farm producers. The visual language is rooted in natural materials (warm browns, cream, sage accents), serif typography (Fraunces) for editorial gravitas, and generous white space that honors both the product and the user's attention. The UI feels like stepping into a carefully curated coffee shop: unhurried, intentional, and grounded in authenticity.

The brand voice is precise, humble, and educational—never breathless or trendy. Cuma Biji speaks to coffee enthusiasts who value origin stories, fair pricing, and honest tasting notes. Vocabulary patterns include specificity (origin names, altitude, processing method), directness ("Diseduh dengan hormat"—brewed with respect), and a conversational warmth that acknowledges the farmer's labor. Example sentence in brand voice: "This Gayo Natural from Aceh arrives at 1,500 meters where morning mist meets volcanic soil—expect chocolate, stone fruit, and a clean finish."

Colors

The color palette is anchored in warm, earthy tones that evoke coffee, soil, and the Indonesian landscape. Primary (#6b5344, a warm medium brown) is the signature accent used on CTAs, navigation highlights, and interactive focus states—it reads as trustworthy and grounded, never corporate. The surface stack progresses from near-white (#faf8f3, oklch 0.97) through warm grays (#e8e4dd, #dfd9d0) to create subtle depth without harsh contrast; this preserves readability while maintaining the warm, inviting aesthetic. On-surface text (#1a1410) is a near-black with brown undertones, avoiding pure black's coldness. Secondary (#8b7355, a lighter warm brown) and tertiary (#a89968, a sage-gold) provide supporting accents for badges, highlights, and secondary actions. The error state (#d32f2f) is a cl

Typography

The type system pairs Fraunces (a high-contrast serif with generous letterforms) for display and headline hierarchy with Inter (a neutral, legible sans-serif) for body and UI text. This pairing communicates editorial authority (Fraunces signals heritage and craft) while maintaining modern usability (Inter ensures clarity at small sizes). Display (96px, 400 weight, -0.02em tracking) is reserved for hero headlines and conveys the brand's confident, unhurried voice. Headline-lg (48px, 400 weight) and headline-md (32px, 400 weight) are used for section titles and product names, maintaining the serif's warmth. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) are set in Inter for product descriptions, blog copy, and long-form content, with generous li

Layout

The layout follows a 12-column grid with a max-width of 1320px, centered on the viewport. The design uses a fluid, spacious approach: the hero section spans full-width with asymmetric composition (text on left, illustration on right), while product grids use 3–4 columns on desktop, 2 on tablet, and 1 on mobile. Spacing is semantic and generous: lg spacing (40px) separates major sections (hero, product grid, footer), md spacing (24px) is used for card padding and section margins, and sm spacing (12px) is used for component internal padding. The gutter between grid columns is 24px. Container max-width is 1320px with 24px horizontal padding on all sides, ensuring content never touches the viewport edge. White space is treated as a design element—sections breathe, cards have breathing room, an

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic contrast. The elevation system uses three levels: sm (0 1px 2px rgba(0,0,0,0.06)) for small, interactive elements like buttons and form inputs; md (0 4px 12px rgba(0,0,0,0.1)) for cards, modals, and standard containers; and lg (0 16px 40px rgba(0,0,0,0.12)) for elevated modals and hover states. Cards use a 1px border in outline-variant (#9d9489) combined with md shadow to define edges without harshness. On hover, cards transition from md to lg shadow (200ms ease) to signal interactivity. Focus states on interactive elem

Shapes

The shape philosophy is 'Soft Modernism'—rounded corners that feel contemporary without sacrificing warmth or legibility. Buttons and form inputs use 6px (0.75rem / md) border-radius, creating a gentle, approachable feel that's neither sharp nor overly rounded. Cards and containers use 12px (1rem / lg) border-radius for a slightly softer appearance that suggests craft and care. Product images and hero illustrations use 12px (lg) radius to frame content without distraction. Full-width elements (hero, footer) use 0px radius to anchor the layout. The 6px and 12px radii are derived from the 8px un

Components

Action Elements Buttons are the primary call-to-action mechanism. Primary buttons (#6b5344 background, white text, 14px Inter 500, 12px 24px padding, 6px radius) are used for main CTAs like 'Jelajahi Koleksi' and 'Atau buat blend kamu sendiri'. On hover, the background shifts to #5a4d42 (a darker brown) with a 200ms ease transition; on focus, add a 3px inset box-shadow in rgba(107, 83, 68, 0.2). Secondary buttons (transparent background, primary text, 1px outline border) are used for alternative actions; on hover, the background becomes surface-container-low (#ede9e2) with a 200ms transition. Buttons must have a minimum height of 44px and minimum width of 48px to meet touch targets on mobile.

Containers & Surfaces Cards are the primary container for product information, blog excer

Do's and Don'ts

**Do**

• Do use Fraunces for headlines and hero copy to convey heritage and editorial authority; reserve Inter for body text and UI labels to maximize legibility.
• Do maintain generous white space (lg spacing between sections, md spacing within cards) to create a calm, unhurried experience that respects the user's attention.
• Do apply the warm brown primary (#6b5344) sparingly on CTAs, focus states, and key interactive elements; overuse dilutes its impact and the brand's intentionality.
• Do use the full surface stack (surface-container-low, -high, -highest) to create subtle depth and visual hierarchy without harsh contrast or cold grays.
• Do transition all interactive state changes (hover, focus, active) over 200ms ease to signal interactivity without jarring the user.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds; instead, use on-surface (#1a1410) and surface (#faf8f3) to maintain the warm, organic aesthetic.
• Don't apply shadows larger than lg (0 16px 40px rgba(0,0,0,0.12)) or use multiple layered shadows; the brand favors subtle, single-layer elevation.
• Don't mix serif and sans-serif fonts within the same line or component; use Fraunces for headlines and Fraunces-only, Inter for body and UI-only.
• Don't use bright, saturated colors (neons, pure reds, pure blues) for non-error states; the palette is warm and muted to reflect the coffee and heritage aesthetic.
• Don't round corners more than 12px (lg) except for full-circle avatars; excessive rounding reads as playful or juvenile, conflicting with the brand's craft-focused voice.