chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: replace cyan accent with ember orange across entire frontend

Browse Source 
Swap accent color from cyan (#22d3ee) to ember orange (#f97316) site-wide.
Cyan caused contrast issues and felt generic — orange brings warmth and
urgency fitting for a troubleshooting tool.

Changes:
- CSS variables: accent, accent-hover, accent-dim, accent-text, primary, ring
- Warning color shifted from amber (#fbbf24) to yellow (#eab308) for
  semantic separation from orange accent
- Brand SVGs: logo gradient updated to orange
- 50+ component files: all hardcoded cyan hex values, Tailwind cyan-*
  classes, and rgba(34,211,238,...) glow values replaced
- landing.css: all 45+ cyan references + 5 old border color fixes
- DESIGN-SYSTEM.md bumped to v5 with decisions log
- CLAUDE.md: all color references synced to charcoal palette + orange accent
- PWA theme-color meta tag updated to match sidebar (#10121a)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-24 07:37:44 +00:00
parent 13860ced33
commit ff985fb755
52 changed files with 291 additions and 274 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
DESIGN-SYSTEM.md
View File

@@ -1,14 +1,14 @@
# ResolutionFlow Design System v4
# ResolutionFlow Design System v5
> **Status:** ACTIVE — This document is the single source of truth for all frontend design decisions.
> **Supersedes:** All previous design system docs including `DESIGN_SYSTEM_GUIDE.md`, `UI-DESIGN-SYSTEM.md`, `REBRAND-IMPLEMENTATION-GUIDE.md`, and any `COMPONENT_EXAMPLES.md` files.
> **Last Updated:** March 21, 2026
> **Supersedes:** All previous design system docs including `DESIGN_SYSTEM_GUIDE.md`, `UI-DESIGN-SYSTEM.md`, `REBRAND-IMPLEMENTATION-GUIDE.md`, and any `COMPONENT_EXAMPLES.md` files. Also supersedes the v4 cyan accent system.
> **Last Updated:** March 24, 2026
---
## Design Philosophy
ResolutionFlow uses a **flat, high-contrast dark theme** inspired by Sentry and PostHog. The aesthetic is premium, clean, and minimal — no glass morphism, no backdrop blur, no ambient orbs, no gradient backgrounds on surfaces. The accent color appears in ≤5% of the UI. Every design decision prioritizes **readability over decoration**.
ResolutionFlow uses a **flat, high-contrast dark theme** inspired by Sentry and PostHog. The aesthetic is premium, clean, and minimal — no glass morphism, no backdrop blur, no ambient orbs, no gradient backgrounds on surfaces. The accent color (ember orange) appears in ≤5% of the UI. Warm accent on cold charcoal surfaces creates high contrast and distinctive personality — orange conveys urgency and action, fitting for a troubleshooting tool. Every design decision prioritizes **readability over decoration**.
**Light mode** is a planned addition (dark/light toggle). Design all components with CSS variables so theming is a variable swap, not a rewrite.
@@ -18,39 +18,41 @@ ResolutionFlow uses a **flat, high-contrast dark theme** inspired by Sentry and
All colors are defined as CSS custom properties in `index.css` inside the `@theme` block (Tailwind v4) or `:root` / `.dark` blocks (Tailwind v3).
### Dark Mode (Default)
### Dark Mode (Default) — Charcoal Palette
```
Page background: #0c0d10
Sidebar background: #0f1118
Card background: #14161d
Card hover: #191c25
Input background: #191c25
Code background: #0e1017
Elevated surface: #1c1f2a
Page background: #1a1c23
Sidebar background: #10121a
Card background: #22252e
Card hover: #282b35
Input background: #282b35
Code background: #14161e
Elevated surface: #2e3140
Text primary: #e2e5eb
Text heading: #f0f2f5
Text secondary: #848b9b
Text muted: #4f5666
Text rail label: #6b7280
Text rail label: #e2e5eb
Border default: #1e2130
Border hover: #2a2f3d
Border default: #2e3240
Border hover: #3d4252
Accent (cyan): #22d3ee
Accent hover: #06b6d4
Accent dim (8-10%): rgba(34,211,238,0.10)
Accent text: #67e8f9
Accent (ember): #f97316
Accent hover: #ea580c
Accent dim (10%): rgba(249,115,22,0.10)
Accent text: #fdba74
Success: #34d399
Success dim: rgba(52,211,153,0.10)
Warning: #fbbf24
Warning dim: rgba(251,191,36,0.10)
Warning: #eab308
Warning dim: rgba(234,179,8,0.10)
Danger: #f87171
Danger dim: rgba(248,113,113,0.10)
```
> **Note:** Warning shifted from amber (#fbbf24) to yellow (#eab308) to maintain clear separation from the orange accent.
### Light Mode (Planned)
```
@@ -70,9 +72,9 @@ Text muted: #8b92a1
Border default: #dde0e7
Border hover: #c5c9d3
Accent: #0891b2
Accent dim: rgba(8,145,178,0.07)
Accent text: #0e7490
Accent: #ea580c
Accent dim: rgba(234,88,12,0.07)
Accent text: #c2410c
```
### What NOT To Use
@@ -82,6 +84,7 @@ Accent text: #0e7490
- No ambient orbs or floating glow elements
- No `bg-white/[0.04]` opacity-based backgrounds
- No purple gradient accent (`#818cf8 → #a78bfa`) — this is deprecated
- No cyan accent (`#22d3ee` / `#06b6d4` / `#67e8f9`) — replaced by ember orange in v5
- No `text-gradient-brand` utility — replaced by solid `accent-text` color
- No `glass-card`, `glass-stat`, `glass-card-glow` CSS utilities
@@ -236,13 +239,14 @@ Placeholder: text-muted
**Primary:**
```
Background: accent (#22d3ee)
Background: accent (#f97316)
Color: #fff
Border: none
Border-radius: 5px
Padding: 9px 16px
Font: 13px, 550 weight
Hover: brightness(1.1)
Hover: accent-hover (#ea580c), box-shadow 0 2px 12px rgba(249,115,22,0.25), translateY(-1px)
Active: translateY(0), box-shadow 0 0 4px rgba(249,115,22,0.15)
```
**Ghost:**
@@ -289,7 +293,7 @@ Color: accent-text
## Logo
- **Mark:** 30-32px square, border-radius 8px, `linear-gradient(135deg, #06b6d4, #22d3ee)`, white lightning bolt SVG
- **Mark:** 30-32px square, border-radius 8px, `linear-gradient(135deg, #ea580c, #f97316)`, white lightning bolt SVG
- **Wordmark:** "ResolutionFlow" in Bricolage Grotesque, 16-17px, weight 700, text-heading color
- **Combined:** Mark + wordmark horizontally, 10px gap
@@ -325,21 +329,21 @@ Shadows communicate **interaction state**, not decoration. On dark backgrounds,
**Resting state:** No shadows. Elements are flat with 1px borders.
**Elevation on dark backgrounds (the principle):** Instead of shadow = darker, elevation = lighter. A "raised" element gets a brighter surface color (`bg-elevated` / `#1c1f2a`) and optionally a very faint cyan glow. This creates perceived depth through contrast.
**Elevation on dark backgrounds (the principle):** Instead of shadow = darker, elevation = lighter. A "raised" element gets a brighter surface color (`bg-elevated` / `#2e3140`) and optionally a very faint orange glow. This creates perceived depth through contrast.
**Hover state (buttons):** Lift effect with accent glow.
- Primary button hover: `0 2px 10px rgba(34,211,238,0.2)` + `translateY(-1px)` — cyan glow
- Primary button hover: `0 2px 12px rgba(249,115,22,0.25)` + `translateY(-1px)` — orange glow
- Ghost button hover: brighter border (`border-hover`) + `translateY(-1px)`, no shadow
- Active/click: glow fades, element "presses down" to `translateY(0)`
**Active/selected state (tabs, toggles):** Elevated surface + faint accent glow.
- Active tab: `bg-elevated` + `box-shadow: 0 1px 4px rgba(34,211,238,0.08)` — class: `tab-active-shadow`
- Active tab: `bg-elevated` + `box-shadow: 0 1px 4px rgba(249,115,22,0.08)` — class: `tab-active-shadow`
**Card hover lift (optional):** For clickable cards.
- Hover: brighter border + `0 2px 8px rgba(34,211,238,0.06)` + `translateY(-2px)` — class: `card-lift`
- Hover: brighter border + `0 2px 8px rgba(249,115,22,0.06)` + `translateY(-2px)` — class: `card-lift`
**Overlays:** Flyouts, dropdowns, modals get stronger shadows (they overlay lighter content).
@@ -352,6 +356,7 @@ Shadows communicate **interaction state**, not decoration. On dark backgrounds,
- No `rgba(0,0,0,...)` shadows on resting elements (invisible on dark bg)
- No permanent decorative shadows
- No heavy glow effects — accent glow should be barely perceptible (≤ 0.1 opacity)
- No cyan glow effects — all accent glows use orange rgba(249,115,22,...)
---
@@ -402,3 +407,15 @@ These files contain outdated design information and should be ignored:
- `REBRAND-IMPLEMENTATION-GUIDE.md` — Old purple rebrand from Patherly
- `COMPONENT_EXAMPLES.md` — Old monochrome component patterns
- Any file referencing `glass-card`, `glass-stat`, `bg-gradient-brand`, or `text-gradient-brand`
- Any code using cyan accent values (`#22d3ee`, `#06b6d4`, `#67e8f9`, `rgba(34,211,238,...)`) — migrate to ember orange
---
## Decisions Log
| Date | Decision | Rationale |
|------|----------|-----------|
| 2026-03-24 | Accent color changed from cyan (#22d3ee) to ember orange (#f97316) | Cyan caused contrast issues, felt generic "tech SaaS". Orange provides warmth against cold charcoal, conveys urgency fitting for troubleshooting, and is distinctive in the MSP tool space. |
| 2026-03-24 | Warning color shifted from amber (#fbbf24) to yellow (#eab308) | Orange accent would clash with amber warning. Yellow provides clear semantic separation from the orange accent. |
| 2026-03-24 | Light mode accent set to #ea580c (orange-600) | Darker orange variant ensures proper contrast on white/light surfaces. |
| 2026-03-24 | Synced DESIGN-SYSTEM.md to actual charcoal palette | Doc was behind — still showed pre-charcoal values (#0c0d10 page, #14161d card). Updated to match index.css (#1a1c23 page, #22252e card). |