Colors Guide: Pick a palette that looks intentional
Colors are the difference between “clean style” and “I touched a color picker and woke up in 47 tabs.”
This guide covers exactly what the Colors section controls (and where the rest of the colors live).
✅ What the Colors section controls
Think of Colors as your surface paint:
the backgrounds behind cards, the sidebar, and input boxes.
Buttons, links, navigation, widgets, and the activity feed each have their own sections.
This matches the Colors section on the Settings screen.
“Tip: Pick 1 main color.”
Choose one main vibe, then reuse it instead of inventing a new color every 12 seconds.
🚀 The “looks good fast” method
- Pick your Surface: set Profile Block Background Color.
- Match your Sidebar: set Profile Sidebar Color (same or 1 shade darker).
- Make typing readable: set Textarea Background Color + Textarea Text Color.
- Set hover colors: make sure hover is visible (not identical).
- Stop. Check your profile. Then move to Links/Buttons if you want an accent color.
🎛 Colors section: field-by-field
-
Profile Block Background Color
The background behind your main content blocks/cards. -
Textarea Background Color
The background behind text input fields (where you type). -
Textarea Text Color
The text color inside those input fields (must be readable). -
Profile Sidebar Color
Colors your profile sidebar/menu background. -
Profile Sidebar Hover Color
The hover background color when you move over sidebar items. -
Profile Sidebar Hover Secondary Color
A second hover layer color (adds depth—keep it in the same color family as hover).
If something looks “flat,” move your Block and Sidebar colors one step apart:
dark page → slightly lighter blocks, or light page → slightly darker blocks.
🛠 Common mistakes (fast rescues)
- “My text disappears.” Your surface and text contrast is off—darken the surface or lighten the text (Typography controls main text).
- “Inputs are blinding / invisible.” Set Textarea Background + Textarea Text as a pair.
- “It looks chaotic.” Too many accents—pick one accent and reuse it in Links + Buttons + Nav later.
- “Hover states do nothing.” Hover colors must be different from base sidebar colors (even slightly).
🗺 Color Control Map (where to change what)
If you’re thinking “why didn’t that setting change the thing I wanted?” this is why.
🏗 Core surfaces (this page)
- Colors: Block background, Sidebar, Textarea background/text, Sidebar hover colors
🅰 Text readability
- Typography: Profile Text Color (main text)
🔗 Accent colors (links)
- Links: Link Color + Link Hover Color
🧷 Accent colors (buttons)
- Buttons: Button Background + Button Text (and hover options)
🧭 Menus + active tabs
- Navigation: Active/hover backgrounds + text colors
🧩 Cards & feed styling
- Widgets: widget background/border/title
- Activity: post card background/text/meta/border
🎨 Palette templates (steal these)
These are “safe starters.” Set your Block + Sidebar first, then match Typography and Links/Buttons after.
🧊 Cyber Glass Starter
#0b1220#08101c#e8f0ff#22d3eeUse a dark background image or none. Add overlay if text gets bullied.
🌙 Neon Night Starter
#120a1a#0c0612#f7e9ff#ff4fd8Keep hover colors in the same pink/purple family for a clean glow vibe.
🌲 Forest Starter
#0f1a14#0b120e#eaf4ee#d6b25ePair with a subtle nature image + medium overlay for “cozy but readable.”
🌸 Soft Pastel Starter
#f6f3ff#efeaff#23212b#7c5cffIf you use a bright image, add overlay so text stays crisp.
Set Profile Block Background Color + Profile Sidebar Color first.
Then go to Typography for text and Links/Buttons for accent.
