Links Guide
Links are a key readability and interaction signal. Keep color, style, and hover behavior coherent across profile areas.
Fast path: link color -> hover color -> link style -> hover animation -> check contrast in bio, feed, and widgets.
Link Fields (Current Stack)
- Profile Link Color: default link color.
- Profile Link Hover Color: hover/active link color.
- Profile Link Style:
No Underline, Underline, Dotted Underline, Dashed Underline, Wavy Underline. - Profile Link Hover Animation:
None, Underline, Color Change, Grow, Shrink, Rotate, Blur.
Links controls from your settings screen.
Stack note: link color fields are defined in
Profile_Colors, while link style and hover animation are defined in Profile_Links.
Accessibility rule: if you use
No Underline, ensure color contrast is strong enough that links are still clearly identifiable.
Links Workflow
- Set Profile Link Color to your primary accent.
- Set Profile Link Hover Color to a clear sibling shade (lighter or darker).
- Choose Link Style based on readability target and visual tone.
- Choose Hover Animation (start with
NoneorColor Changefor clean UI). - Validate in context across bio text, feed items, and sidebar/widgets.
Starter Recipes
Universal Modern
- Style: Underline or No Underline
- Hover Animation: Color Change
- Hover color: 10-20% brighter than base
- Use same accent family as button/nav active states
Premium Minimal
- Style: Underline or Dashed Underline
- Hover Animation: None
- Keep saturation moderate for cleaner visual hierarchy
- High contrast with surrounding text is mandatory
Cyber Accent
- Style: Wavy Underline or Dotted Underline
- Hover Animation: Grow or Color Change
- Keep motion subtle to avoid visual noise
- Avoid mixing unrelated base/hover hues
Common Fixes
- Links blend into text: increase contrast and/or switch to an underline style.
- Hover feels harsh: use a closer hover shade or set animation to
None. - Theme feels inconsistent: align link accents with Buttons and Navigation Active.
- Links feel too decorative: avoid aggressive animations like rotate/blur on dense text areas.
- Slot content looks off: either let global link styles apply or override slot anchor styles intentionally.
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.
