SSS Colors Guide: Cards, Sidebars, Forms & Contrast
The Colors section sets the main card, sidebar, and form colors. Build a small, readable color group before adding more accents in Links, Buttons, Navigation, Widgets, or Effects.
Loading matched recommendations...
Settings in this guide
- Profile Block Background Color: the main card color.
- Textarea Background Color: the background inside larger writing boxes.
- Textarea Text Color: the words typed inside those boxes.
- Profile Sidebar Color: the sidebar or menu base color.
- Profile Sidebar Hover Color: the first hover color.
- Profile Sidebar Hover Secondary Color: the second hover layer.
This picture shows the older Classic Backup view. The setting names can still help you find the same choices in Studio Editor.
Whole Home and Room designs
Whole Home can set one color group for every Room. Use a Room design when one Room needs a different mood while the rest continue sharing the base colors.
Whole Home
Use it for the shared look that Rooms follow unless you give a Room its own design.
One Room
Use it when only one part of your Digital Home needs a different look.
Private Draft
Studio keeps your changes private until you publish them.
Classic Backup
Classic Backup changes the public Whole Home as soon as saving finishes.
Recommended order
- Set Profile Block Background Color.
- Choose a Sidebar Color from the same color family.
- Set Textarea Background and Text together.
- Choose hover colors that are visibly different from the normal sidebar.
- Set Links, Buttons, Navigation, Widgets, and Activity colors next.
- Preview desktop, phone, Safe View, and the selected Room.
Where other colors live
Main text
Typography and nearby text-color settings.
Links
Normal link, hover, underline, and movement.
Buttons
Button background, label, hover, glow, Follow, and Unfollow.
Navigation
Normal tabs and the active tab.
Widgets
Card surfaces, titles, borders, and shadows.
Activity
Post cards, text, dates, reactions, borders, and shadows.
Simple contrast rules
- Writing-box text must be readable before, during, and after typing.
- Hover colors should change clearly without hiding the label.
- Use one main accent color and one supporting shade before adding more.
- See-through cards take on more color from the background.
- Check the colors with the real background and effects turned on.
Starter palettes
Cyber Glass
Deep navy cards, soft white text, and one cyan accent.
Loading matched recommendations...
Neon Night
Dark purple-black cards, pale text, and one bright pink accent.
Forest
Dark green cards, warm light text, and a muted gold accent.
Soft Pastel
Pale lavender cards, dark text, and one medium-purple accent.
Common fixes
Text disappears
Increase the difference between the card and text colors.
Writing boxes are hard to read
Set the Textarea Background and Text colors together.
The palette feels chaotic
Use one main color family and one accent.
Hover looks broken
Make the hover color clearly different from the normal sidebar.
Wrong Room changed
Check the selected Room and publish destination.
Preview differs from live
The colors may still be in a Private Draft.
FAQs
What should I set first?
The main card, sidebar, and writing-box colors.
Why are Links and Buttons in other guides?
They have their own settings and states.
Can Rooms use different color groups?
Yes, when those settings are available for the selected Room.
How many accent colors should I use?
Start with one main accent and one supporting shade.
Why do see-through cards change color?
The background shows through them.
What else should I test?
Writing boxes, hover, links, buttons, navigation, dates, and keyboard outlines.
What happens when Whole Home changes?
Rooms that still follow Whole Home update. Room-only color choices stay different.
What is the quickest safe reset?
Use a solid readable card, a matching sidebar, clear writing-box colors, and simple hover.
Loading matched recommendations...
