A field guide to
BREWMARK
Intelligence for the craft coffee community
This design system draws inspiration from research notebooks, Bauhaus geometry, and the world's best editorial publications. Every element is crafted to feel purposeful, refined, and distinctly BrewMark.
Colors
A warm, papery foundation with strategic Bauhaus primaries for emphasis.
Foundation
Paper
#FAF8F5
Paper Dark
#F0EDE6
Ink Muted
#8B8378
Ink Light
#5C5347
Ink
#2C2416
Bauhaus Accents
Signal Red
Alerts, errors
Deep Blue
Links, primary
Warm Yellow
Highlights, CTA
Roast Spectrum
Typography
Serif for narrative, mono for data. Clear hierarchy through size and weight.
Masthead
BREWMARK
Headlines
Ethiopia Yirgacheffe
font-serif text-4xl
Bright, floral, and complex
font-serif text-2xl
With notes of bergamot and jasmine
font-serif text-xl
Measurements
45.0g
font-mono text-4xl
Ratios
1:16.5
font-mono text-4xl
Body & Links
When the first cup of this Ethiopian Yirgacheffe was brewed at 4.5 clicks on a Fellow Ode, the room filled with notes of bergamot. A coarser grind brought out the jasmine.
Category Label
Brewing
Timestamp
Dec 5, 2025 · 4:42 PM
Entry Number
#0042
Components
Buttons, inputs, badges. Functional and purposeful.
Buttons
Form Inputs
Badges & Tags
Cards
Entry cards, recipe displays, and featured content.
Ethiopia Yirgacheffe
Onyx Coffee Lab
Bright and floral with notes of bergamot and jasmine.
4.5
Grind Setting
1:16
Ratio
45g
Dose
720g
Water
Colombia Huila, Honey Process
Counter Culture Coffee
Balanced and chocolatey with caramel sweetness. This honey-processed lot from Huila has been the community favorite for three weeks running.
Recommended
4.0
grind clicks
1:15
ratio
Tables
Data tables with expandable rows for detailed views.
| Coffee | Grinder | Grind | Ratio | Roast | Score | |
|---|---|---|---|---|---|---|
Ethiopia Yirgacheffe Onyx Coffee Lab | Fellow Ode Gen 2 | 4.5 | 1:16 | Light | +22 | ▼ |
Colombia Huila Counter Culture | Baratza Encore | 18 | 1:15 | Medium | +15 | ▼ |
Sumatra Mandheling Stumptown | Comandante C40 | 28 | 1:14 | Dark | +8 | ▼ |
Patterns
Reusable layout patterns for common use cases.
Numbered List (Semafor-style)
Ethiopia Yirgacheffe is trending
Community votes up 340% this week on Onyx latest release.
Grinder has appeared in 62% of new recipes this month.
Light roasts dominate batch brew
Medium and dark roasts see decline as specialty grows.
Stats Display
2,847
Recipes
1,203
Coffees
42
Grinders
18
Brewers
Category Navigation (Monocle-style)
Live Indicator Bar
Modals
Equipment selection and value picker overlays with consistent styling.
Equipment Selection Modal
Select Grinder
Fellow
Baratza
Value Preset Modal
Select Water Amount
Machine capacity: 500–1250g
Custom Amount
Modal States
Selected Item
Fellow Ode Gen 2
1-11 settings
Hover State
Baratza Encore
1-40 settings
Sliders
Fine-tune controls with range inputs, segmented buttons, and toggle pills.
Range Slider with Increment Buttons
4.5
Dose Slider
45g
Strength Segmented Control
Taste Profile Pills
Parameter Card with Quick Adjust
Reset to Defaults
Bottom Sheet
Mobile-optimized slide-up selection panel with search and grouping.
Bottom Sheet (Mobile Pattern)
Select Grinder
Mobile-only component (hidden on desktop)
Bottom Sheet Elements
Drag Handle
Group Header
Selected Option
Normal Option
Icons
Geometric CSS-based icons. No SVG libraries, no emojis — pure CSS shapes.
Outlined Icons (24px)
Filled Icons (24px)
Icon Sizes
Icon Usage Examples
In Buttons
In Navigation
Loading
Skeleton loaders and shimmer animations for content placeholders.
Skeleton Variants
Text
Circular
Rectangular
Skeleton Card
Skeleton Recipe Display
Skeleton Table
Loading Spinner
Forms
Form layouts, validation states, and authentication patterns.
Form Layout
Sign in
Welcome back! Enter your credentials to continue.
Minimum 8 characters
Don't have an account?
Validation States
Please enter a valid email address
Email verified
Error Message
Invalid credentials. Please try again.
Button States
Input Focus States