[FR] UI/UX: Improve Color Contrast & Visual Harmony Between Sidebar, Side Page, and Main Workspace · Issue #9081 · AppFlowy-IO/AppFlowy · GitHub
Skip to content

[FR] UI/UX: Improve Color Contrast & Visual Harmony Between Sidebar, Side Page, and Main Workspace #9081

Open

Description

@DevAbdallahAbdelrahim

Description

I would like to request improvements to AppFlowy's color scheme, specifically focusing on the visual relationship between the Sidebar, the Main Workspace, and the Side Page (Side Peek).

First, I want to emphasize that I really appreciate AppFlowy's unique cyan/sky-blue accent color. It gives the app a modern and distinct identity that I prefer over Notion's neutral gray palette. I am NOT asking to copy Notion's colors. I want AppFlowy to refine and improve its own blue id…e comfortably readable.


💡 The Goal (Design Philosophy)

The goal is to achieve "Unified Blue Identity with Smart Contrast".

The interface should guide the user's eye naturally without forcing it to work hard. This can be achieved by focusing on lightness variation (making panels subtly lighter or darker than each other) rather than introducing new hues, and by toning down aggressive colors in structural elements (like borders) so that the content remains the true focus.

Impact

  • Eye Strain & Physical Fatigue: Prolonged use of the application causes physical discomfort due to low text contrast and overly bright structural borders, especially in low-light environments.
  • Increased Cognitive Load: The lack of clear visual hierarchy forces the user's brain to work harder to distinguish between the main workspace and the side panels, breaking the flow state.
  • Reduced Productivity: Distracting UI elements and visual "noise" pull attention away from the actual data, which is critical for users managing complex databases for hours daily.
  • Professional Polish: Refining these contrast issues will significantly elevate AppFlowy's perceived quality, making it a truly comfortable and viable alternative to established tools for power users.

Additional Context

Reference Images

Image 1: Notion (For hierarchy reference ONLY)

Image

Note: I am including this solely to demonstrate the concept of good visual hierarchy and panel separation. I do NOT want AppFlowy to look like this. AppFlowy's blue identity is superior and should be preserved, just refined for better contrast.

Image 2: AppFlowy Current State (Showing the issues)

Image

Notice how the Sidebar, Workspace, and Side Page blend together with no clear separation. The cyan borders are overly bright, and the text contrast in secondary areas is too low.


Environment

  • AppFlowy Version: 0.14.9
  • OS: (Arch Linux Kernel CachyOS)
  • Device: HP EliteBook G8 (AMD Ryzen 7)
  • Deployment: Self-Hosted Server v0.19.1 (via Podman)

Why This Matters

As a user who relies on AppFlowy for hours daily to manage complex databases, eye comfort and clear visual focus are critical. Refining these contrast issues will make AppFlowy not only more beautiful but significantly more comfortable and professional for long-term productivity.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions