Boris Color System

All colors now use Tailwind CSS color palette for consistency and maintainability.

Semantic Color Aliases (Tailwind Config)

'app-bg': '#18181b',           // zinc-900 - Main backgrounds
'app-bg-elevated': '#27272a',  // zinc-800 - Elevated surfaces (cards, modals)
'app-bg-subtle': '#1e1e1e',    // Custom ~zinc-850 - Subtle backgrounds
'app-border': '#3f3f46',       // zinc-700 - Primary borders
'app-border-subtle': '#52525b', // zinc-600 - Subtle borders
'app-text': '#e4e4e7',         // zinc-200 - Primary text
'app-text-secondary': '#a1a1aa', // zinc-400 - Secondary text
'app-text-muted': '#71717a',   // zinc-500 - Muted text
'primary': '#6366f1',          // indigo-500 - Primary accent
'primary-hover': '#4f46e5',    // indigo-600 - Primary hover state
'highlight-mine': '#fde047',   // yellow-300 - User highlights
'highlight-friends': '#f97316', // orange-500 - Friends highlights
'highlight-nostrverse': '#9333ea', // purple-600 - Nostrverse highlights

Highlight Colors (User-Settable)

Default colors in the color picker:

Yellow (default): #fde047 - yellow-300
Orange: #f97316 - orange-500
Pink: #ec4899 - pink-500
Green: #22c55e - green-500
Blue: #3b82f6 - blue-500
Purple: #9333ea - purple-600

Common Color Mappings

Old Hex	Tailwind Color	Usage
`#18181b`	zinc-900	Main app background
`#1a1a1a`	zinc-900	Component backgrounds
`#1e1e1e`	~zinc-850	Code blocks, subtle surfaces
`#252525`	zinc-800	Hover states
`#27272a`	zinc-800	Elevated surfaces
`#2a2a2a`	zinc-800	Buttons, inputs
`#333`	zinc-700	Primary borders
`#3f3f46`	zinc-700	Component borders
`#444`	zinc-600	Subtle borders
`#52525b`	zinc-600	Input borders
`#555`	zinc-500	Hover borders
`#666`	zinc-500	Muted text
`#71717a`	zinc-500	Secondary text
`#888`	zinc-400	Secondary text
`#999`	zinc-400	Muted labels
`#a1a1aa`	zinc-400	Placeholder text
`#aaa`	zinc-300	Light text
`#ccc`	zinc-300	Primary text on dark
`#ddd`	zinc-200	Bright text
`#e4e4e7`	zinc-200	Primary text
`#646cff`	indigo-500	Primary accent
`#535bf2`	indigo-600	Primary hover
`#fde047`	yellow-300	Default highlight (brighter)
`#f97316`	orange-500	Friends highlights
`#9333ea`	purple-600	Nostrverse highlights

Usage Guidelines

In CSS

Use Tailwind utilities whenever possible:

.example {
  background: rgb(24 24 27); /* zinc-900 */
  border: 1px solid rgb(63 63 70); /* zinc-700 */
  color: rgb(228 228 231); /* zinc-200 */
}

In TSX

Use Tailwind classes:

<div className="bg-zinc-900 border border-zinc-700 text-zinc-200">

Or semantic aliases:

<div className="bg-app-bg border border-app-border text-app-text">

CSS Variables (User-Settable)

For colors that users can customize:

background: var(--highlight-color-mine, #fde047);

Notes

All hex colors are now Tailwind palette colors
CSS variables remain for user-customizable colors
Semantic aliases provide easier maintenance
RGB format in CSS allows for opacity control

3.4 KiB Raw Blame History