Activity Guide: Style your feed like a real product UI
The Activity feed is where people actually hang out. If your feed looks clean and readable, people scroll longer.
This section controls card styling, text comfort, borders, spacing, and the “premium UI” feel.
📸 What you’ll see in Activity
This matches the Activity section on the Settings screen.
Two-layer trick:
Think in two layers:
Activity Item (the post surface) + Post Card (the card shell).
When those two match, the feed looks “designed.”
Think in two layers:
Activity Item (the post surface) + Post Card (the card shell).
When those two match, the feed looks “designed.”
✅ What Activity affects (and what it doesn’t)
- Affects: feed post cards, borders, radius, spacing, opacity, shadows, text comfort.
- Doesn’t primarily affect: global background (Background), your core blocks (Colors), buttons/reaction hovers (Buttons), link styling (Links).
🎛 Activity settings (plain English)
- Activity Item Background Color — background behind each feed entry.
- Activity Text Size — feed text size (comfort).
- Activity Line Height — space between lines (readability).
- Activity Border Color — border around feed items.
- Activity Border Size — thickness (try 1px if the feed blends in).
- Activity Border Style — Solid = modern; Dotted = intentional retro vibes.
- Activity Border Radius — rounded corners for activity items.
- Activity Text Color — main feed text color.
- Activity Meta Color — quieter text (timestamps, small labels).
- Post Card Background Color — the card “shell” background.
- Activity Card Opacity — transparency/glass feel (your tip suggests trying 70% first).
- Activity Card Radius — rounding for activity cards.
- Post Card Border Radius — rounding for the post card layer.
- Post Card Shadow Strength — depth/glow under cards.
- Post Card Inner Padding — space inside each post card (big “premium” lever).
If the feed feels cramped:
Increase Post Card Inner Padding and slightly increase Activity Line Height.
That fixes 80% of “this feels cheap” issues.
Increase Post Card Inner Padding and slightly increase Activity Line Height.
That fixes 80% of “this feels cheap” issues.
✅ Best-practice setup order (so you don’t chase your tail)
- Set Activity Item Background Color (match your main surface or 1 shade different).
- Set Activity Text Color + Activity Meta Color (meta should be dimmer).
- Set Activity Text Size + Line Height (comfort first).
- Set border basics: Border Color + Border Size + Border Style.
- Set card feel: Card Opacity + Radius + Padding + (optional) Shadow.
🎨 3 “copy-this” Activity styles
✅ Style A: Modern Clean Feed
- Text Size: 14–15px
- Line Height: ~1.5
- Border: 1px solid subtle
- Radius: 8px
- Opacity: 100%
- Padding: 12–16px
- Shadow: Low or None
🧊 Style B: Subtle Glass Feed
- Opacity: 85–90%
- Border: 1px subtle tinted
- Radius: 8–12px
- Text: off-white + dimmer meta
- Padding: 12–16px
- Shadow: Low (optional)
📼 Style C: Retro Panel Feed
- Text Size: 13–14px
- Line Height: 1.4–1.5
- Border: 1–2px solid or dotted (intentional)
- Radius: 0–4px
- Opacity: 100%
- Padding: 8–12px
- Shadow: None
Fast readability win:
If people write longer posts, bump Text Size up a little and use a slightly higher Line Height.
If people write longer posts, bump Text Size up a little and use a slightly higher Line Height.
🛠 Troubleshooting (fast fixes)
- Feed blends into background: set Border Size to 1px, pick a subtle Border Color, then add low Shadow if needed.
- Text hard to read: increase Card Opacity (toward 90–100%), then adjust Text Color/Meta Color for contrast.
- Feels cramped: increase Post Card Inner Padding and slightly raise Line Height.
- Too loud/busy: neutralize backgrounds, soften borders, dim Meta Color.
- Reactions/hover look wrong: those usually live in Buttons (Activity Feed Button Hover Color).
