Web Text & Background Color System (Tailwind) #26
Reference in New Issue
Block a user
Delete Branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Let's examine and extract out what is a good for us to use as a foundation
Great question — this is where the brand really becomes usable.
Below is a clean, Tailwind-native text + background color system for TrueRoster that aligns with:
• Accessibility (contrast)
• The Webflow color principles you shared
• Your logo semantics (trust → clarity → delight)
This is written as a go-to reference for web + product UI.
⸻
🎨 TrueRoster — Web Text & Background Color System (Tailwind)
⸻
1️⃣ Primary Backgrounds (Default Surfaces)
Main App / Marketing Background
• Class: bg-slate-50
• HEX: #F8FAFC
Use for:
• App canvas
• Marketing pages
• Dashboards
✔ Calm, neutral, reduces eye fatigue
⸻
Card / Panel Background
• Class: bg-white
• HEX: #FFFFFF
Use for:
• Cards
• Modals
• Tables
• Forms
✔ Creates hierarchy without color noise
⸻
Subtle Section Background
• Class: bg-slate-100
• HEX: #F1F5F9
Use for:
• Section breaks
• Sidebars
• Filters
⸻
2️⃣ Primary Text Colors (Hierarchy)
Primary Body Text
• Class: text-slate-900
• HEX: #0F172A
Use for:
• Headlines
• Important copy
• Navigation
✔ Maximum readability + trust
⸻
Secondary / Supporting Text
• Class: text-slate-600
• HEX: #475569
Use for:
• Descriptions
• Labels
• Metadata
⸻
Muted / Helper Text
• Class: text-slate-400
• HEX: #94A3B8
Use for:
• Placeholders
• Hints
• Disabled text
⸻
3️⃣ Brand & Interactive Colors
Primary Action (Buttons, Links)
• Class: bg-sky-500 text-white
• Hover: hover:bg-sky-600
• Active: active:bg-sky-700
✔ Friendly, community-driven CTA
⸻
Secondary Action (Outline Buttons)
• Class: border-sky-500 text-sky-600
• Hover: hover:bg-sky-50
⸻
Verification / Success
• Class: bg-emerald-500 text-white
• Text Only: text-emerald-600
✔ Matches logo checkmark semantics
⸻
4️⃣ Status & Feedback Colors (Semantic)
Success
• bg-emerald-50 text-emerald-700
• Icon: text-emerald-500
⸻
Warning
• bg-amber-50 text-amber-700
• Icon: text-amber-500
⸻
Error
• bg-red-50 text-red-700
• Icon: text-red-500
⸻
Info / Neutral
• bg-sky-50 text-sky-700
⸻
5️⃣ Dark Mode (Optional but Recommended)
Dark Background
• Class: bg-slate-900
Primary Text
• Class: text-slate-100
Secondary Text
• Class: text-slate-400
Cards
• Class: bg-slate-800
Primary Action
• Class: bg-sky-500 hover:bg-sky-400
✔ Maintains brand color integrity
⸻
6️⃣ Accessibility Rules (Important)
Following WCAG + Webflow guidance:
• Never use text-slate-400 on bg-white for body text
• Always pair:
• text-white → bg-sky-500+
• text-slate-900 → bg-slate-100+
• Buttons must meet 4.5:1 contrast
⸻
7️⃣ Quick Reference Table
Purpose Text Background
Page text-slate-900 bg-slate-50
Card text-slate-900 bg-white
CTA text-white bg-sky-500
Success text-emerald-700 bg-emerald-50
Warning text-amber-700 bg-amber-50
Error text-red-700 bg-red-50
⸻
Creative Director Take 🎯
This system:
• Feels calm and trustworthy
• Uses color sparingly but meaningfully
• Scales cleanly into dashboards, mobile, and marketing
• Matches your logo semantics perfectly
If you want next, I can:
• Generate a Tailwind theme config
• Create button + form UI samples
• Produce a 1-page Color Usage PDF
• Stress-test contrast for accessibility
You’re setting this up the right way.