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

feat: update design system v5→v6, accent blue replaces ember orange

Browse Source 
- Accent: #f97316 (orange) → #60a5fa/#2563eb (electric blue)
- Info: new cyan (#67e8f9/#0891b2) since blue took the accent slot
- Warning: #eab308 (yellow) → #fbbf24/#d97706 (amber reclaimed)
- Surfaces: deeper charcoal range for better layer separation
- Full light mode semantic color variants specified
- Based on competitive research: no MSP tool uses this blue register

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-29 15:45:41 +00:00
parent d5122123c2
commit eafc3752a0
2 changed files with 67 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
CLAUDE.md
View File

@@ -21,7 +21,7 @@
- **Design system:** [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md) — THE source of truth for all design decisions - **Design system:** [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md) — THE source of truth for all design decisions
- **Design aesthetic:** Flat, high-contrast dark theme (Sentry/PostHog-inspired). No glass morphism, no gradients on surfaces, no ambient effects. Light mode planned. - **Design aesthetic:** Flat, high-contrast dark theme (Sentry/PostHog-inspired). No glass morphism, no gradients on surfaces, no ambient effects. Light mode planned.
- **Accent color:** Ember orange (#f97316 / #ea580c). Used sparingly — ≤5% of the UI. Warning is yellow (#eab308), not amber, to stay distinct from accent. - **Accent color:** Electric blue (#60a5fa dark / #2563eb light). Used sparingly — ≤5% of the UI. Warning is amber (#fbbf24), info is cyan (#67e8f9).
- **Fonts:** IBM Plex Sans (`font-sans`, body), Bricolage Grotesque (`font-heading`, headings), JetBrains Mono (`font-mono`, code) — loaded via Google Fonts - **Fonts:** IBM Plex Sans (`font-sans`, body), Bricolage Grotesque (`font-heading`, headings), JetBrains Mono (`font-mono`, code) — loaded via Google Fonts
- **Logo:** 30px gradient square (ember orange) + "ResolutionFlow" in Bricolage Grotesque 700 - **Logo:** 30px gradient square (ember orange) + "ResolutionFlow" in Bricolage Grotesque 700
- **Layout:** Icon rail sidebar (72px default) with hover flyout panels. Pinnable to full 260px sidebar. See [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md) - **Layout:** Icon rail sidebar (72px default) with hover flyout panels. Pinnable to full 260px sidebar. See [DESIGN-SYSTEM.md](DESIGN-SYSTEM.md)
@@ -342,7 +342,7 @@ gh run view <id> --json jobs --jq '.jobs[] | {name: .name, conclusion: .conclusi
**87. FlowPilot must ask GUI vs script preference:** When a task can be done via GUI or script (e.g., creating AD users), FlowPilot must ask the engineer which approach they prefer BEFORE suggesting either. Never assume the user wants a script. See `FLOWPILOT_SYSTEM_PROMPT` rules in `flowpilot_engine.py`. **87. FlowPilot must ask GUI vs script preference:** When a task can be done via GUI or script (e.g., creating AD users), FlowPilot must ask the engineer which approach they prefer BEFORE suggesting either. Never assume the user wants a script. See `FLOWPILOT_SYSTEM_PROMPT` rules in `flowpilot_engine.py`.
**88. Charcoal palette — sidebar-darkest approach:** Sidebar `#10121a`, page `#1a1c23`, cards `#22252e`, borders `#2e3240`. This gives more contrast range than true-dark (`#0c0d10`). All colors via CSS variables in `index.css` `@theme` block. Accent is ember orange (#f97316), not cyan. **88. Charcoal palette — sidebar-darkest approach:** Sidebar `#0e1016`, page `#16181f`, cards `#1e2028`, borders `#2a2e3a`. This gives more contrast range than true-dark. All colors via CSS variables in `index.css` `@theme` block. Accent is electric blue (#60a5fa), not orange or cyan.
**92. `tsc -b` in Dockerfile is stricter than `npx tsc --noEmit`:** The production build (`tsc -b && vite build`) enforces `noUnusedLocals` and `noUnusedParameters` as hard errors. After any refactor that moves logic between components or removes features, trace every import and destructured prop to remove orphans. IDE warnings (yellow squiggles) flag these — check them before pushing. **92. `tsc -b` in Dockerfile is stricter than `npx tsc --noEmit`:** The production build (`tsc -b && vite build`) enforces `noUnusedLocals` and `noUnusedParameters` as hard errors. After any refactor that moves logic between components or removes features, trace every import and destructured prop to remove orphans. IDE warnings (yellow squiggles) flag these — check them before pushing.

111
DESIGN-SYSTEM.md
View File

@@ -1,16 +1,16 @@
# ResolutionFlow Design System v5 # ResolutionFlow Design System v6
> **Status:** ACTIVE — This document is the single source of truth for all frontend design decisions. > **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. Also supersedes the v4 cyan accent system. > **Supersedes:** All previous design system docs including v5 (ember orange accent), `DESIGN_SYSTEM_GUIDE.md`, `UI-DESIGN-SYSTEM.md`, `REBRAND-IMPLEMENTATION-GUIDE.md`, and any `COMPONENT_EXAMPLES.md` files.
> **Last Updated:** March 24, 2026 > **Last Updated:** March 29, 2026
--- ---
## Design Philosophy ## 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 (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**. 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 (electric blue) appears in ≤5% of the UI. Cool blue accent on deep charcoal surfaces creates high contrast and technical confidence — blue conveys trust, precision, and reliability, fitting for a troubleshooting tool that MSP engineers depend on during outages. 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. **Dual-mode design:** Dark mode is the default. Light mode is fully specified — all colors use CSS custom properties so theming is a variable swap, not a rewrite. Semantic colors shift to darker variants (Tailwind 400→600) in light mode to maintain WCAG AA contrast.
--- ---
@@ -18,16 +18,17 @@ 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). 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) — Charcoal Palette ### Dark Mode (Default) — Deep Charcoal Palette
``` ```
Page background: #1a1c23 Page background: #16181f
Sidebar background: #10121a Sidebar background: #0e1016
Card background: #22252e Card background: #1e2028
Card hover: #282b35 Card hover: #252830
Input background: #282b35 Input background: #252830
Code background: #14161e Code background: #12141a
Elevated surface: #2e3140 Elevated surface: #2a2d38
Surface raised: #303442
Text primary: #e2e5eb Text primary: #e2e5eb
Text heading: #f0f2f5 Text heading: #f0f2f5
@@ -35,25 +36,26 @@ Text secondary: #848b9b
Text muted: #4f5666 Text muted: #4f5666
Text rail label: #e2e5eb Text rail label: #e2e5eb
Border default: #2e3240 Border default: #2a2e3a
Border hover: #3d4252 Border hover: #3d4252
Accent (ember): #f97316 Accent (blue): #60a5fa
Accent hover: #ea580c Accent hover: #3b82f6
Accent dim (10%): rgba(249,115,22,0.10) Accent dim (10%): rgba(96,165,250,0.10)
Accent text: #fdba74 Accent text: #93c5fd
Accent glow (15%): rgba(96,165,250,0.15)
Success: #34d399 Success: #34d399
Success dim: rgba(52,211,153,0.10) Success dim: rgba(52,211,153,0.10)
Warning: #eab308 Warning (amber): #fbbf24
Warning dim: rgba(234,179,8,0.10) Warning dim: rgba(251,191,36,0.10)
Danger: #f87171 Danger: #f87171
Danger dim: rgba(248,113,113,0.10) Danger dim: rgba(248,113,113,0.10)
Info (cyan): #67e8f9
Info dim: rgba(103,232,249,0.10)
``` ```
> **Note:** Warning shifted from amber (#fbbf24) to yellow (#eab308) to maintain clear separation from the orange accent. ### Light Mode
### Light Mode (Planned)
``` ```
Page background: #f3f4f7 Page background: #f3f4f7
@@ -63,6 +65,7 @@ Card hover: #f8f9fb
Input background: #eef0f4 Input background: #eef0f4
Code background: #f5f6f9 Code background: #f5f6f9
Elevated surface: #e8eaef Elevated surface: #e8eaef
Surface raised: #dde0e7
Text primary: #1a1d24 Text primary: #1a1d24
Text heading: #0d0f13 Text heading: #0d0f13
@@ -72,9 +75,20 @@ Text muted: #8b92a1
Border default: #dde0e7 Border default: #dde0e7
Border hover: #c5c9d3 Border hover: #c5c9d3
Accent: #ea580c Accent: #2563eb
Accent dim: rgba(234,88,12,0.07) Accent hover: #1d4ed8
Accent text: #c2410c Accent dim: rgba(37,99,235,0.07)
Accent text: #1d4ed8
Accent glow: rgba(37,99,235,0.10)
Success: #059669
Success dim: rgba(5,150,105,0.07)
Warning: #d97706
Warning dim: rgba(217,119,6,0.07)
Danger: #dc2626
Danger dim: rgba(220,38,38,0.07)
Info: #0891b2
Info dim: rgba(8,145,178,0.07)
``` ```
### What NOT To Use ### What NOT To Use
@@ -83,8 +97,7 @@ Accent text: #c2410c
- No gradient backgrounds on cards or surfaces - No gradient backgrounds on cards or surfaces
- No ambient orbs or floating glow elements - No ambient orbs or floating glow elements
- No `bg-white/[0.04]` opacity-based backgrounds - No `bg-white/[0.04]` opacity-based backgrounds
- No purple gradient accent (`#818cf8 → #a78bfa`) — this is deprecated - No ember orange accent (`#f97316` / `#ea580c` / `#fdba74`) — replaced by blue in v6
- No cyan accent (`#22d3ee` / `#06b6d4` / `#67e8f9`) — replaced by ember orange in v5
- No `text-gradient-brand` utility — replaced by solid `accent-text` color - No `text-gradient-brand` utility — replaced by solid `accent-text` color
- No `glass-card`, `glass-stat`, `glass-card-glow` CSS utilities - No `glass-card`, `glass-stat`, `glass-card-glow` CSS utilities
@@ -173,7 +186,7 @@ The default navigation is a narrow icon rail (72px) with:
``` ```
Background: bg-card Background: bg-card
Border: 1px solid border-default Border: 1px solid border-default
Border-left: 3px solid [varies by position - accent, success, warning, accent] Border-left: 3px solid [varies by position - accent, success, warning, info]
Border-radius: 8px Border-radius: 8px
Padding: 18px 16px Padding: 18px 16px
``` ```
@@ -218,10 +231,11 @@ Border-radius: 20px (pill)
| Type | Background | Text Color | | Type | Background | Text Color |
|------|-----------|------------| |------|-----------|------------|
| Info/Accent | accent-dim | accent-text | | Accent | accent-dim | accent-text |
| Success | success-dim | success | | Success | success-dim | success |
| Warning | warning-dim | warning | | Warning | warning-dim | warning |
| Danger | danger-dim | danger | | Danger | danger-dim | danger |
| Info | info-dim | info |
### Form Inputs ### Form Inputs
@@ -239,14 +253,14 @@ Placeholder: text-muted
**Primary:** **Primary:**
``` ```
Background: accent (#f97316) Background: accent (#60a5fa dark / #2563eb light)
Color: #fff Color: #fff
Border: none Border: none
Border-radius: 5px Border-radius: 5px
Padding: 9px 16px Padding: 9px 16px
Font: 13px, 550 weight Font: 13px, 550 weight
Hover: accent-hover (#ea580c), box-shadow 0 2px 12px rgba(249,115,22,0.25), translateY(-1px) Hover: accent-hover (#3b82f6 dark / #1d4ed8 light), box-shadow 0 2px 12px accent-glow, translateY(-1px)
Active: translateY(0), box-shadow 0 0 4px rgba(249,115,22,0.15) Active: translateY(0), box-shadow 0 0 4px accent-glow
``` ```
**Ghost:** **Ghost:**
@@ -260,7 +274,7 @@ Hover: bg-elevated, text-primary, border-hover
### Code Blocks ### Code Blocks
``` ```
Background: bg-code (#0e1017) Background: bg-code (#12141a)
Border: 1px solid border-default Border: 1px solid border-default
Border-radius: 8px Border-radius: 8px
Padding: 18px 20px Padding: 18px 20px
@@ -275,7 +289,7 @@ Font: JetBrains Mono, 12px, line-height 1.7
| Keyword | #c792ea | | Keyword | #c792ea |
| Function/Cmdlet | #82aaff | | Function/Cmdlet | #82aaff |
| String | #c3e88d | | String | #c3e88d |
| Variable | #89ddff | | Variable | #93c5fd (accent-text) |
| Parameter | #8c93a4 | | Parameter | #8c93a4 |
| Number | #f78c6c | | Number | #f78c6c |
@@ -293,7 +307,7 @@ Color: accent-text
## Logo ## Logo
- **Mark:** 30-32px square, border-radius 8px, `linear-gradient(135deg, #ea580c, #f97316)`, white lightning bolt SVG - **Mark:** 30-32px square, border-radius 8px, `linear-gradient(135deg, #3b82f6, #60a5fa)`, white lightning bolt SVG
- **Wordmark:** "ResolutionFlow" in Bricolage Grotesque, 16-17px, weight 700, text-heading color - **Wordmark:** "ResolutionFlow" in Bricolage Grotesque, 16-17px, weight 700, text-heading color
- **Combined:** Mark + wordmark horizontally, 10px gap - **Combined:** Mark + wordmark horizontally, 10px gap
@@ -329,21 +343,21 @@ Shadows communicate **interaction state**, not decoration. On dark backgrounds,
**Resting state:** No shadows. Elements are flat with 1px borders. **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` / `#2e3140`) and optionally a very faint orange 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` / `#2a2d38` or `bg-raised` / `#303442`) and optionally a very faint blue glow. This creates perceived depth through contrast.
**Hover state (buttons):** Lift effect with accent glow. **Hover state (buttons):** Lift effect with accent glow.
- Primary button hover: `0 2px 12px rgba(249,115,22,0.25)` + `translateY(-1px)` — orange glow - Primary button hover: `0 2px 12px rgba(96,165,250,0.25)` + `translateY(-1px)` — blue glow
- Ghost button hover: brighter border (`border-hover`) + `translateY(-1px)`, no shadow - Ghost button hover: brighter border (`border-hover`) + `translateY(-1px)`, no shadow
- Active/click: glow fades, element "presses down" to `translateY(0)` - Active/click: glow fades, element "presses down" to `translateY(0)`
**Active/selected state (tabs, toggles):** Elevated surface + faint accent glow. **Active/selected state (tabs, toggles):** Elevated surface + faint accent glow.
- Active tab: `bg-elevated` + `box-shadow: 0 1px 4px rgba(249,115,22,0.08)` — class: `tab-active-shadow` - Active tab: `bg-elevated` + `box-shadow: 0 1px 4px rgba(96,165,250,0.08)` — class: `tab-active-shadow`
**Card hover lift (optional):** For clickable cards. **Card hover lift (optional):** For clickable cards.
- Hover: brighter border + `0 2px 8px rgba(249,115,22,0.06)` + `translateY(-2px)` — class: `card-lift` - Hover: brighter border + `0 2px 8px rgba(96,165,250,0.06)` + `translateY(-2px)` — class: `card-lift`
**Overlays:** Flyouts, dropdowns, modals get stronger shadows (they overlay lighter content). **Overlays:** Flyouts, dropdowns, modals get stronger shadows (they overlay lighter content).
@@ -356,7 +370,7 @@ Shadows communicate **interaction state**, not decoration. On dark backgrounds,
- No `rgba(0,0,0,...)` shadows on resting elements (invisible on dark bg) - No `rgba(0,0,0,...)` shadows on resting elements (invisible on dark bg)
- No permanent decorative shadows - No permanent decorative shadows
- No heavy glow effects — accent glow should be barely perceptible (≤ 0.1 opacity) - 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,...) - No orange glow effects — all accent glows use blue rgba(96,165,250,...)
--- ---
@@ -407,7 +421,8 @@ These files contain outdated design information and should be ignored:
- `REBRAND-IMPLEMENTATION-GUIDE.md` — Old purple rebrand from Patherly - `REBRAND-IMPLEMENTATION-GUIDE.md` — Old purple rebrand from Patherly
- `COMPONENT_EXAMPLES.md` — Old monochrome component patterns - `COMPONENT_EXAMPLES.md` — Old monochrome component patterns
- Any file referencing `glass-card`, `glass-stat`, `bg-gradient-brand`, or `text-gradient-brand` - 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 - Any code using ember orange accent values (`#f97316`, `#ea580c`, `#fdba74`, `rgba(249,115,22,...)`) — migrate to blue accent
- Any code using old cyan accent values (`#22d3ee`, `#06b6d4`) for accent purposes — cyan is now the info color only
--- ---
@@ -415,7 +430,11 @@ These files contain outdated design information and should be ignored:
| Date | Decision | Rationale | | 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 | Accent color changed from cyan (#22d3ee) to ember orange (#f97316) | Cyan caused contrast issues, felt generic "tech SaaS". Orange provides warmth against cold charcoal. |
| 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 | Warning color shifted from amber (#fbbf24) to yellow (#eab308) | Orange accent would clash with amber warning. |
| 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 — updated to match index.css. |
| 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). | | 2026-03-29 | Accent changed from ember orange (#f97316) to electric blue (#60a5fa/#2563eb) | Orange did not test well with users — read as "budget/cautionary." Blue conveys trust and technical confidence. Electric blue is brighter than the corporate blues used by NinjaOne/ConnectWise/Datto, maintaining differentiation. Works on both dark and light backgrounds. |
| 2026-03-29 | Info color set to cyan (#67e8f9/#0891b2) | Blue accent freed the info slot. Cyan is visually distinct from accent blue (cooler/lighter) and intuitive for informational contexts. |
| 2026-03-29 | Warning reclaimed as amber (#fbbf24/#d97706) | Yellow (#eab308) was only needed to avoid clashing with orange accent. With blue accent, amber is the natural warning color again. |
| 2026-03-29 | Surfaces deepened for better layer separation | Page: #1a1c23→#16181f, Card: #22252e→#1e2028, Sidebar: #10121a→#0e1016. Wider range gives 4+ clear visual depth layers instead of 2. Added surface-raised (#303442) for hover/active states. |
| 2026-03-29 | Full light mode semantic colors specified | All semantic colors get light-mode variants at Tailwind 600 level (dark uses 400). Ensures WCAG AA contrast on white/light surfaces. |