Coffee journaling on ATProto (alpha)
alpha.arabica.social
coffee
feat: impeccable config
+166
-25
+1
-25
.gitignore
+1
-25
.gitignore
···
1
-
# Binaries
2
1
bin/
3
2
tmp/
4
3
*.exe
···
6
5
*.dll
7
6
*.so
8
7
*.dylib
9
-
10
-
# Test binary
11
8
*.test
12
-
13
-
# Templ generated files
14
9
*_templ.go
15
-
16
-
# Output of the go coverage tool
17
10
*.out
18
-
19
-
# Generated files
11
+
*.secret
20
12
static/css/output.css
21
-
22
-
# Database
23
13
*.db
24
14
*.db-shm
25
15
*.db-wal
26
-
27
-
# IDE
28
16
.vscode/
29
17
.idea/
30
18
*.swp
31
19
*.swo
32
20
*~
33
-
34
-
# OS
35
21
.DS_Store
36
-
37
-
# Dependencies
38
22
vendor/
39
-
40
-
# Logs
41
23
*.log
42
-
43
-
# Nix
44
24
result
45
25
result-*
46
26
/arabica
47
27
/ogcard
48
-
49
-
# Other
50
28
*.bak
51
-
52
-
# Development files
53
29
known-dids.txt
54
30
moderators.json
55
31
roles.json
+49
.impeccable.md
+49
.impeccable.md
···
1
+
# Arabica Design Context
2
+
3
+
## Design Context
4
+
5
+
### Users
6
+
Mixed audience ranging from casual home brewers to serious hobbyists. The core user cares about their coffee craft — they track beans, dial in recipes, and want to see what the community is brewing. They use Arabica on phones (morning brew logging) and desktop (exploring data, browsing the feed). Context is unhurried — this isn't a work tool, it's a hobby companion.
7
+
8
+
### Brand Personality
9
+
**Cozy, social, inviting** — like a neighborhood specialty cafe where regulars share what they're drinking. Not clinical or corporate. The warmth comes from the subject matter (coffee, ritual, craft) and the community layer (AT Protocol federation, shared feed, likes/comments).
10
+
11
+
### Emotional Goals
12
+
- **Calm satisfaction**: The quiet pleasure of a well-made cup — unhurried, grounded, warm
13
+
- **Geeky delight**: Data is fun, details are rewarding — dialing in extraction is part of the joy
14
+
- **Community belonging**: Seeing what others brew, sharing discoveries, social warmth
15
+
- **Craft pride**: Your brewing journey documented — mastery over your process
16
+
17
+
### Aesthetic Direction
18
+
**Visual references:**
19
+
- Specialty coffee bag packaging (Counter Culture, Onyx, George Howell) — craft labels, earthy tones, confident typography, tactile feel
20
+
- Analog journals — Moleskine notebooks, handwritten brew logs, the texture of paper and ink
21
+
22
+
**Anti-references:**
23
+
- Generic SaaS dashboards, corporate productivity tools
24
+
- Overly techy/developer aesthetic — data should feel warm, not cold
25
+
- Social media feed clones (Instagram/Twitter layouts with no personality)
26
+
27
+
**Theme:** Light + dark (both supported, OS preference + manual toggle). The warm brown palette (#4a2c2a family) and cream backgrounds (#FAF7F5) are core to the identity.
28
+
29
+
**Typography:** Iosevka Patrick (custom monospace Nerd Font) is the established body/UI font and well-liked by users. Open to pairing with a warmer display font for headings to soften the technical feel while keeping Iosevka's character for body text and data.
30
+
31
+
### Design Principles
32
+
33
+
1. **Warmth over precision** — Brown paper, not graph paper. Even data-heavy views should feel handcrafted, not clinical. Tint everything toward the coffee palette.
34
+
35
+
2. **Quiet confidence** — Like a well-designed coffee bag: strong typography, restrained color, no need to shout. Let the content (brews, beans, community) be the star.
36
+
37
+
3. **Tactile texture** — Evoke the analog: the weight of a ceramic mug, the grain of a kraft label, the soft edge of a journal page. Avoid flat, sterile surfaces.
38
+
39
+
4. **Community as atmosphere** — The social feed should feel like overhearing conversations at a cafe, not scrolling a timeline. Presence over performance.
40
+
41
+
5. **Respect the ritual** — Coffee brewing is meditative. The interface should match that pace — no urgency, no pressure, no gamification. Every interaction should feel intentional.
42
+
43
+
### Existing Design System
44
+
- **Colors:** Brown 50-900 scale + amber accents, CSS custom properties for all surfaces
45
+
- **Font:** Iosevka Patrick (400/500/600 weights), monospace throughout
46
+
- **Components:** Cards, tables, combo-selects, feed cards, filter pills, modals, badges
47
+
- **Shadows:** 3-tier system (sm/md/lg) with warm-tinted rgba
48
+
- **Animations:** Quick (100-400ms), fade+slide patterns, like-pop interaction
49
+
- **Theme:** Full light/dark with CSS variables, OS preference detection
+25
CLAUDE.md
+25
CLAUDE.md
···
230
230
- `go mod download -json MODULE` — get dependency source path
231
231
- `go doc foo.Bar` — read package/type/function docs
232
232
- `go run ./cmd/server` instead of `go build` to avoid artifacts
233
+
234
+
## Design Context
235
+
236
+
See `.impeccable.md` for the full design system reference. Key points:
237
+
238
+
### Brand Personality
239
+
**Cozy, social, inviting** — like a neighborhood specialty cafe. Warm, not
240
+
clinical. The emotional goals are calm satisfaction, geeky delight, community
241
+
belonging, and craft pride.
242
+
243
+
### Visual References
244
+
- Specialty coffee bag packaging (Counter Culture, Onyx) — craft labels, earthy
245
+
tones, confident type
246
+
- Analog journals — Moleskine, handwritten brew logs, texture of paper and ink
247
+
248
+
### Design Principles
249
+
1. **Warmth over precision** — Brown paper, not graph paper
250
+
2. **Quiet confidence** — Strong typography, restrained color, let content shine
251
+
3. **Tactile texture** — Evoke the analog: ceramic, kraft, journal pages
252
+
4. **Community as atmosphere** — Cafe conversations, not social media timelines
253
+
5. **Respect the ritual** — No urgency, no gamification, intentional interactions
254
+
255
+
### Typography
256
+
Iosevka Patrick (custom monospace) is the core UI font. Open to pairing with a
257
+
warmer display font for headings.
+91
docs/design-audit.md
+91
docs/design-audit.md
···
1
+
# Design Audit — April 2026
2
+
3
+
## What's Already Working
4
+
5
+
- **Coffee-tinted shadows** (`rgba(61,35,25,...)` instead of black) — subtle, distinctive
6
+
- **Like-pop animation** — multi-point spring scale, genuinely delightful
7
+
- **Feed card stagger** — nth-child delays create alive-feeling lists
8
+
- **Dark mode** — thoughtful (amber focus rings, warm undertones preserved, not lazy inversion)
9
+
- **Custom Iosevka Patrick font** — gives personality that system fonts can't
10
+
- **Filter pill hover/active pattern** — outline previews type color, fills on select
11
+
- **Brown palette** — custom, not Tailwind defaults; follows coffee color progression
12
+
- **CSS variable architecture** — 100+ design tokens, robust theme switching
13
+
14
+
## Core Problem
15
+
16
+
Arabica has strong *tokens* (colors, font, shadows) but **generic *patterns***. The
17
+
brown palette is distinctive, but it's applied to layouts that could be any admin
18
+
dashboard: same-sized cards in grids, identical icon+label metadata rows repeated
19
+
30+ times, flat tab navigation, uniform spacing. The "craft coffee journal" feeling
20
+
lives in the color tokens but not in the structure or typography.
21
+
22
+
## High-Impact Opportunities
23
+
24
+
### 1. Typography — Display Font Pairing
25
+
26
+
Iosevka does everything: headings, body, labels, data. No typographic *contrast*.
27
+
A warm display face for headings paired with Iosevka for body/data would separate
28
+
"content you read" from "data you scan."
29
+
30
+
Brand words: cozy, textured, handcrafted. Think: the typeface on a specialty coffee
31
+
bag label — confident, slightly imperfect, warm. Not a geometric sans. Something
32
+
with character like Bitter (earthy slab serif), Vollkorn (warm old-style), or
33
+
Zilla Slab (humanist slab — sturdy, approachable, uncommon).
34
+
35
+
### 2. Entity Cards Need Visual Identity
36
+
37
+
Bean, Roaster, Grinder, Brewer, Recipe cards are structurally identical — same
38
+
layout, same icon+label grid, same spacing. They should feel like different kinds
39
+
of objects in a collection:
40
+
41
+
- **Bean cards**: roast-level color indicator, origin as visual badge
42
+
- **Brewer cards**: method icon (V60, espresso portafilter, AeroPress)
43
+
- **Recipe cards**: different proportions, recipe-card feel
44
+
- **Roaster cards**: location as primary visual element
45
+
46
+
### 3. Feed Cards — Replace the Left-Stripe
47
+
48
+
The 3px `border-left` colored stripe is the most recognizable Arabica pattern, but
49
+
it's also one of the most generic dashboard conventions. The type-color system
50
+
(brew=#6b4423, bean=#b45309, etc.) is good — needs a less templated expression:
51
+
52
+
- Small colored dot or pill badge with type name
53
+
- Subtle background tint (bean cards get faint amber wash)
54
+
- Type icon in card header instead of a border
55
+
56
+
### 4. Spacing Rhythm
57
+
58
+
Almost everything is `p-4` or `p-6`. Pages feel evenly padded rather than composed.
59
+
Brew view should breathe differently than a management table. Rating deserves more
60
+
space. Section transitions need varied gaps — tight within, generous between.
61
+
62
+
### 5. Welcome/Landing Experience
63
+
64
+
Unauthenticated visitors see a login form and bullet points. No hero moment, no
65
+
imagery, no personality. First impression should feel like picking up a beautiful
66
+
bag of coffee, not opening a SaaS tool.
67
+
68
+
### 6. Empty States & Loading
69
+
70
+
Skeletons are generic pulse animations. Empty states are plain text. Missed
71
+
personality moments — "No beans yet. Time to visit your local roaster."
72
+
73
+
### 7. Form Modals Are Interchangeable
74
+
75
+
All 5 entity creation dialogs identical. Fields could be grouped semantically.
76
+
Required vs optional have no visual distinction. Forms work but feel like database
77
+
admin, not a coffee journal.
78
+
79
+
## Medium-Impact Opportunities
80
+
81
+
- **Buttons too uniform** — every button is `btn-primary`, no hierarchy
82
+
- **Section headers** use `uppercase tracking-wider` as visual crutch
83
+
- **Rounded corners everywhere** — no sharp edges for texture contrast
84
+
- **No micro-interactions** beyond like-pop — card hovers only change shadow
85
+
86
+
## Suggested Priority
87
+
88
+
1. Display font pairing (foundational — touches every page)
89
+
2. Feed card + entity card visual identity (most-seen components)
90
+
3. Welcome/landing redesign (first impression)
91
+
4. Spacing rhythm on key pages (brew view, feed)