Never Settle for Good Enough
Sign up for Onyx emails to unlock access to everything we're excited to share - new coffee releases, resources and recipes, exclusive promotions 👀, and more.
Digital Architecture
A comprehensive reference of every design token, typographic style, button variant, form element, and UI component available in the Onyx Design Architecture system.
01 — Colors
Brand Core
Warm Neutrals
Product Accents
02 — Typography
Display Scale (Room-205)
Hero
Display XL
Display LG
Display MD
Display SM
Headings (Bajern + Montserrat)
Body Text
Body XL (18px) — Join our pilgrimage — seeking quality, truth and accountability in coffee. We journey to find the finest and most unique coffees in the world.
Body LG (16px) — Every coffee we source tells a story of its origin, the hands that cultivated it, and the meticulous process behind every roast.
Body Base (14px) — We believe that coffee, at its best, is a product of relentless curiosity, deep partnerships with producers, and an unwavering commitment to quality at every stage.
Body SM (12px) — Tasting notes, origin details, and processing methods are carefully documented for every lot we bring in.
Lead / Intro
This is lead text — a slightly larger, muted paragraph style designed for introductions and summaries that sit just below a hero heading.
Lead LG — An even more prominent introductory style for high-impact moments.
Detail Text (Kapra)
Detail XL
Detail LG — Single Origin
Detail — Process: Washed · Region: Huila
Detail SM — Sourced Direct · Roasted in Arkansas
Eyebrow / Accent
Eyebrow Text — New Arrival
Eyebrow LG — Featured Collection
Caption & Fine Print
Caption — Photo by Onyx Coffee Lab, Springdale AR.
Fine print — Subscription terms apply. Prices subject to change. Free shipping on orders over $50.
Monospace
const roast = await brew('ethiopia-yirgacheffe');
Inline code: --da-color-peach is one of our core tokens.
Blockquote
We don't just source coffee. We build relationships with producers who share our obsession with quality. Onyx Coffee Lab
Lists
Ordered
Unordered
03 — Buttons
Hollow / Outline
Pill Shape
Subtle Rounded
Ghost
Text / CTA Buttons
Active / Selected
Disabled
Button Group
Icon Buttons
04 — Form Elements
Text Inputs
Select & Textarea
Checkbox & Radio
Input Group (inline button)
Dark Variant
05 — Cards
Standard Cards
New Arrival
Delicate florals with stone fruit and citrus. A washed process that yields remarkable clarity.
Shop NowLimited Edition
Creamy body with notes of brown sugar and ripe cherry. Naturally processed.
Learn MoreSubscription
Our team selects exceptional coffees for you, delivered on your schedule.
SubscribeColor Variants
Crème Card
Step-by-step instructions for every brew method, from V60 to espresso.
Peach Card
Curated sets perfect for the coffee lover in your life.
Editorial Card (no radius, portrait ratio)
Deep dives into the farms and communities behind our coffees.
06 — Badges & Tags
Badges
Tags (interactive)
07 — Dividers & Separators
Standard
Dark
Peach
Thick
Short (left-aligned)
Short (centered)
Dashed
Spacers
Spacer SM (24px)
Spacer Default (48px)
Spacer LG (80px)
08 — Notices & Alerts
Default Notice — Your order has been received and is being processed.
Peach Notice — This coffee is currently on pre-order and ships within 2 weeks.
Success — Your subscription has been updated successfully.
Warning — Stock is limited. Only 12 bags remaining.
Error — Payment could not be processed. Please try again.
Info — Free shipping is available on orders over $50.
09 — Accordion
Grind size depends on your brew method. For pour-over, aim for medium (like sea salt). For espresso, go fine (like powdered sugar). French press calls for coarse (like raw sugar). When in doubt, start in the middle and adjust based on taste.
Keep your coffee in an airtight container at room temperature, away from direct sunlight. Avoid the refrigerator or freezer — the moisture and odors will degrade quality. Our bags have a one-way valve that allows CO2 to escape while keeping oxygen out.
Yes! We partner with cafes, restaurants, and offices worldwide. Our wholesale program includes training, equipment consultation, and dedicated support. Apply through our wholesale portal to get started.
We stand behind every bag. If you're not satisfied with your coffee, contact us within 30 days of purchase and we'll make it right — whether that's a replacement, credit, or refund.
10 — Tabs
Underline Tabs
A beautiful washed Ethiopian coffee with jasmine, bergamot, and peach notes. Sourced from the Gedeb district of Yirgacheffe at 2,100 masl.
Pill Tabs
Showing all available coffees from our current menu.
11 — Media Containers
Square, Rounded
Portrait 3:4
Landscape 4:3
Circle
Wide with overlay
Featured
Gradient Overlay
12 — Table
| Coffee | Origin | Process | Roast | Price |
|---|---|---|---|---|
| Geometry | Blend | Washed / Natural | Medium | $17.00 |
| Southern Weather | Blend | Washed | Medium-Dark | $17.00 |
| Monarch | Blend | Washed / Natural | Light-Medium | $18.00 |
| Ethiopia Banko | Ethiopia | Washed | Light | $22.00 |
| Colombia Aponte | Colombia | Lactic Natural | Light | $24.00 |
13 — Stats & Metrics
14 — Progress Bars
Default (75%)
Peach (50%)
Terracotta (30%)
15 — Avatars
16 — Color Swatches (interactive)
Packaging Colors
Large:
17 — Loading Skeletons
18 — Marquee / Ticker
19 — Grid & Layout
2-Column
3-Column
4-Column
Asymmetric (1fr 2fr)
Asymmetric (2fr 1fr)
20 — Spacing Scale
21 — Dark Surfaces
Dark Surface
Body text on a dark surface uses a muted crème tone for comfortable reading. Links and accents use the peach palette to maintain brand warmth against the editorial black.
Dark Card
Cards, badges, and other components adapt to dark surfaces.
Warm Dark
Using the warm-900 tone for a softer dark surface.
Notice on dark surface
Bonus — Border Radius Scale
None
SM (4px)
MD (8px)
LG (16px)
XL (24px)
Pill
Circle
Bonus — Shadow Scale
XS
SM
MD
LG
XL