Activity Style Guide
Use this guide to style feed cards so they look intentional, readable, and consistent with your profile theme.
Fast path: Item background -> text/meta -> size/line-height -> borders -> card opacity/radius/shadow/padding.
Activity Fields (Current Stack)
- Activity Item Background Color: base background for feed items.
- Activity Card Opacity:
100% to 10%transparency control. - Activity Card Radius:
0px, 4px, 8px, 12px, 16px, 24px, 32px. - Activity Border Size:
None, 1px, 2px, 3px. - Activity Border Style:
Solid, Dashed, Dotted, Double, None. - Activity Border Color: border color for activity cards.
- Activity Border Radius:
None (0px), Slight (4px), Rounded (8px), Very Rounded (16px). - Activity Text Color: main post text color.
- Activity Text Size:
12px, 13px, 14px, 15px, 16px, 18px. - Activity Line Height:
1.2, 1.3, 1.4, 1.5, 1.6, 1.7. - Activity Meta Color: timestamps and supporting meta text.
- Post Card Background Color: post card shell background.
- Post Card Border Radius:
0px, 4px, 8px, 12px, 16px, 24px, 32px. - Post Card Shadow Strength:
None, Soft, Medium, Strong, Neon. - Post Card Inner Padding:
0px, 8px, 12px, 16px, 20px, 24px.
Activity controls from your settings screen.
Important: reaction button hover color is controlled by
Activity Feed Button Hover Color (separate field), not by the core card border/text fields.
Activity Workflow
- Set base surfaces: Activity Item Background Color, then Post Card Background Color.
- Lock text readability: Activity Text Color + Activity Meta Color, then Text Size and Line Height.
- Define shape: Activity Card Radius, Activity Border Radius, Post Card Border Radius.
- Tune separation: Border Size/Style/Color and Post Card Shadow Strength.
- Finish comfort: Post Card Inner Padding and Activity Card Opacity.
Starter Recipes
Clean Feed
- Text Size: 14px or 15px
- Line Height: 1.5
- Border: 1px Solid
- Shadow: Soft
- Padding: 12px or 16px
Glass Feed
- Card Opacity: 70% to 80%
- Border: 1px Solid with subtle color
- Radius: 12px or 16px
- Shadow: Medium
- Meta color visibly dimmer than text
High Contrast Feed
- Card Opacity: 90% to 100%
- Text Size: 15px or 16px
- Line Height: 1.6
- Border: 2px Solid
- Padding: 16px or 20px
Common Fixes
- Feed looks flat: increase border contrast and set shadow to Medium.
- Feed feels cramped: increase line height and Post Card Inner Padding.
- Feed feels noisy: reduce border thickness and keep one dominant accent.
- Meta is too loud: darken or desaturate Activity Meta Color relative to text.
- Buttons do not pop on hover: tune
Activity Feed Button Hover Colorin its own control.
FAQs
What should I configure first in this section?
Set base colors/readability controls first, then style polish.
How many changes should I do per save?
One change at a time for reliable troubleshooting.
What should I verify after each change?
Readability, contrast, and interaction clarity on desktop and mobile.
When should I use advanced CSS?
After standard controls are stable and only for targeted overrides.
How do I avoid visual clutter?
Keep one dominant accent and reduce competing effects.
What is the fastest rollback?
Revert the last change first and retest before further edits.
