# Rosetta Color Palette ## Brand Colors | Name | Hex | Usage | |------|-----|-------| | Primary Blue | `#248AE6` | Main accent, buttons, links | | Primary Blue Dark | `#238BE6` | Dark theme primary | | Primary Blue Pressed | `#2B7CD3` | Button pressed state | | Primary Blue Disabled | `#9BCDFF` | Disabled state | ## Light Theme (not implemented yet) | Token | Hex | Usage | |-------|-----|-------| | background | `#FFFFFF` | Main background | | backgroundSecondary | `#F2F3F5` | Grouped sections | | surface | `#F5F5F5` | Cards, inputs | | text | `#000000` | Primary text | | textSecondary | `#666666` | Subtitle, caption | | textTertiary | `#999999` | Placeholder, hint | | border | `#E0E0E0` | Borders | | divider | `#EEEEEE` | List separators | | messageBubble | `#F5F5F5` | Incoming message | | messageBubbleOwn | `#DCF8C6` | Own message (green) | | inputBackground | `#F2F3F5` | Text input bg | ## Dark Theme (active) | Token | Hex | Usage | |-------|-----|-------| | background | `#000000` | Main background (Color.black) | | backgroundSecondary | `#2A2A2A` | Grouped sections | | surface | `#242424` | Cards, inputs | | text | `#FFFFFF` | Primary text | | textSecondary | `#8E8E93` | Subtitle, caption | | textTertiary | `#666666` | Placeholder, hint | | border | `#2E2E2E` | Borders | | divider | `#333333` | List separators | | messageBubble | `#2A2A2A` | Incoming message | | messageBubbleOwn | `#263341` | Own message (dark blue) | | inputBackground | `#2A2A2A` | Text input bg | ## Semantic Colors | Token | Hex | Usage | |-------|-----|-------| | error | `#FF3B30` | Errors, destructive | | success | `#34C759` | Success, online | | warning | `#FF9500` | Warnings | | accent | `#E91E63` | Secondary accent (pink) | | online | `#34C759` | Online indicator | ## Avatar Colors (hash-based, 11 variants — Mantine v8 "light" variant) Rendering: dark mode = opaque `#1A1B1E` base + shade-6 at 15% opacity + shade-3 text. Light mode = white base + shade-6 at 10% opacity + shade-6 text. | Index | Shade-6 (tint) | Shade-3 (text dark) | Name | |-------|---------------|---------------------|------| | 0 | `#228be6` | `#74c0fc` | Blue | | 1 | `#15aabf` | `#66d9e8` | Cyan | | 2 | `#be4bdb` | `#e599f7` | Grape | | 3 | `#40c057` | `#8ce99a` | Green | | 4 | `#4c6ef5` | `#91a7ff` | Indigo | | 5 | `#82c91e` | `#c0eb75` | Lime | | 6 | `#fd7e14` | `#ffc078` | Orange | | 7 | `#e64980` | `#faa2c1` | Pink | | 8 | `#fa5252` | `#ffa8a8` | Red | | 9 | `#12b886` | `#63e6be` | Teal | | 10 | `#7950f2` | `#b197fc` | Violet | Hash input = display name (NOT public key). Fallback when name empty = `publicKey.prefix(7)` (server sends first 7 chars as default title). Index = `abs(hashCode(input)) % 11`. Hash algorithm: `hash = (hash << 5) - hash + charCode` (same as Java's String.hashCode, 32-bit signed). ## Background Blur Solid Presets | Name | Hex | |------|-----| | solid_blue | `#0D8CF4` | | solid_green | `#4CAF50` | | solid_orange | `#FF9800` | | solid_red | `#E53935` | | solid_purple | `#7C4DFF` | | solid_teal | `#009688` | | solid_pink | `#E91E63` | | solid_grey | `#78909C` | ## Background Blur Gradient Presets | Name | Start | End | |------|-------|-----| | grad_blue_cyan | `#2979FF` | `#00BCD4` | | grad_green_lime | `#4CAF50` | `#CDDC39` | | grad_orange_yellow | `#FF9800` | `#FFEB3B` | | grad_red_pink | `#E53935` | `#FF4081` | | grad_purple_blue | `#7C4DFF` | `#536DFE` | | grad_teal_green | `#009688` | `#69F0AE` | | grad_pink_magenta | `#E91E63` | `#CE93D8` | | grad_mono | `#546E7A` | `#B0BEC5` |