Links Guide: Your accent color in its natural habitat
Links are everywhere (bio, posts, widgets, even HTML slots). If link styling is consistent,
your whole profile feels cohesive. This section is simple on purpose — it controls your “click language.”
📸 What you’ll see in Links
This matches the Links section on the Settings screen.
✅ What Links controls (and what it doesn’t)
- Controls: link color + hover color across most clickable text on your profile.
- Also controls: underline style and hover animation (as shown in your UI).
- Doesn’t control: buttons (Buttons section) or nav tabs (Navigation section has its own active colors).
Simple rule:
Link color = your accent.
Hover color = the same accent “reacting” (brighter/darker), not reinventing itself.
Link color = your accent.
Hover color = the same accent “reacting” (brighter/darker), not reinventing itself.
🎛 Links settings (field-by-field)
- Profile Link Color — default link color across your profile.
- Profile Link Hover Color — color links become when hovered (desktop) or pressed (mobile).
- Profile Link Style — underline behavior (example shown: No Underline).
- Profile Link Hover Animation — hover effect animation (example shown: None).
Accessibility / clarity tip:
If you choose No Underline, make sure your link color stands out clearly.
If links are subtle, turn on an underline style or make hover more obvious.
If you choose No Underline, make sure your link color stands out clearly.
If links are subtle, turn on an underline style or make hover more obvious.
✅ 60-second setup (no overthinking)
- Pick your accent color (the one you’ll also use for Buttons + Navigation Active).
- Set Profile Link Color to that accent.
- Set Profile Link Hover Color to a brighter/darker sibling of the same accent.
- Pick a Link Style that stays readable (underline if you want max clarity).
- Pick a Hover Animation (or leave it at None for clean UI).
🎨 3 “copy-this” link systems
✅ System 1: Universal Modern
- Link Color: your main accent
- Hover Color: same accent, 10–20% brighter
- Link Style: optional (underline if subtle)
- Hover Animation: None or subtle
🧼 System 2: Premium Minimal
- Link Color: deep accent (indigo/blue/teal)
- Hover Color: slightly darker + more saturated
- Link Style: underline or thin underline
- Hover Animation: None
⚡ System 3: Cyber Reaction
- Link Color: cyan/teal
- Hover Color: shift slightly toward electric blue
- Link Style: optional (underline can be cool)
- Hover Animation: subtle effect only
What not to do:
Link = blue, hover = red. That reads like a theme conflict, not a design choice.
Link = blue, hover = red. That reads like a theme conflict, not a design choice.
🛠 Troubleshooting (fast fixes)
- Links don’t stand out: choose a higher-contrast Link Color and make Hover Color more distinct.
- Links are too loud: reduce saturation and keep hover subtle.
- Links clash with buttons/nav: unify your accent color family across Links + Buttons + Navigation active state.
- Links inside HTML Slots look wrong: either let global styles apply (simplest) or override link color inside slot CSS.
Fast test:
Hover links in your bio, activity feed, and widgets. If they feel consistent in all three places, you’re done.
Hover links in your bio, activity feed, and widgets. If they feel consistent in all three places, you’re done.
