Activity Style Guide
Use this guide to style feed cards so they look intentional, readable, and consistent with your profile theme.
Helpful resources
Loading matched recommendations...
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.
Helpful resources
Loading matched recommendations...
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.
Loading account tools...
Helpful resources
Loading matched recommendations...
