Align GitchAlerts UI with brand color palette #33

New issue

Closed

opened 2026-06-03 20:07:55 -05:00 by Gitchegumi · 2 comments

Gitchegumi commented

2026-06-03 20:07:55 -05:00

(Migrated from github.com)

Problem

The current GitchAlerts interface does not closely follow the GitcheGumi/GitchAlerts brand palette. The app should feel like part of the same ecosystem as the rest of the GitcheGumi properties instead of looking like a generic dashboard.

Brand palette

Ultramarine Blue   #4166f5   Primary branding elements, logos
Golden Orange      #fca311   Secondary elements, call-to-action buttons
Dark Charcoal      #2c2c2c   Backgrounds, text, main interface elements
Tiffany Blue       #afe0ce   Accents, buttons, highlights
Soft White         #f0f0f0   Text, backgrounds, contrast areas
Platinum           #CCDBDC   Secondary accents, icons, subtle highlights

Desired behavior

Establish a consistent theme using CSS variables/design tokens.
Use Ultramarine Blue for primary brand moments and core actions.
Use Golden Orange for secondary CTAs or attention-grabbing highlights.
Use Dark Charcoal for the main dark UI base.
Use Soft White and Platinum for readable text, surfaces, borders, and subtle UI contrast.
Use Tiffany Blue for accents, focus states, highlights, and secondary interactive elements.
Ensure dashboard, auth pages, asset library, layout editor pages, buttons, cards, nav, alerts, and empty states all follow the same palette.

Acceptance criteria

A centralized theme/token layer exists for the brand colors.
Existing hardcoded colors are replaced where practical.
Buttons, links, tabs, cards, forms, and dashboard surfaces use the brand palette consistently.
Contrast remains readable in dark and light contexts.
The design should still feel practical and usable, not just colorful.
Screenshots or visual notes should be included in the PR for the main dashboard/auth/asset areas.

Notes

This is not asking for a total redesign of the app layout. It is a branding pass so the existing interface feels like GitchAlerts instead of a generic admin tool.

## Problem The current GitchAlerts interface does not closely follow the GitcheGumi/GitchAlerts brand palette. The app should feel like part of the same ecosystem as the rest of the GitcheGumi properties instead of looking like a generic dashboard. ## Brand palette ```text Ultramarine Blue #4166f5 Primary branding elements, logos Golden Orange #fca311 Secondary elements, call-to-action buttons Dark Charcoal #2c2c2c Backgrounds, text, main interface elements Tiffany Blue #afe0ce Accents, buttons, highlights Soft White #f0f0f0 Text, backgrounds, contrast areas Platinum #CCDBDC Secondary accents, icons, subtle highlights ``` ## Desired behavior - Establish a consistent theme using CSS variables/design tokens. - Use Ultramarine Blue for primary brand moments and core actions. - Use Golden Orange for secondary CTAs or attention-grabbing highlights. - Use Dark Charcoal for the main dark UI base. - Use Soft White and Platinum for readable text, surfaces, borders, and subtle UI contrast. - Use Tiffany Blue for accents, focus states, highlights, and secondary interactive elements. - Ensure dashboard, auth pages, asset library, layout editor pages, buttons, cards, nav, alerts, and empty states all follow the same palette. ## Acceptance criteria - A centralized theme/token layer exists for the brand colors. - Existing hardcoded colors are replaced where practical. - Buttons, links, tabs, cards, forms, and dashboard surfaces use the brand palette consistently. - Contrast remains readable in dark and light contexts. - The design should still feel practical and usable, not just colorful. - Screenshots or visual notes should be included in the PR for the main dashboard/auth/asset areas. ## Notes This is not asking for a total redesign of the app layout. It is a branding pass so the existing interface feels like GitchAlerts instead of a generic admin tool.

Gitchegumi commented

2026-06-04 21:34:15 -05:00

(Migrated from github.com)

These should be set to variables in the docker compose so that users can adjust their own branding. They should default to my branding. The README or some portion of the user's guide should discuss how to change the logo and favicon for anyone who wishes to do so.

Gitchegumi commented

2026-06-04 22:23:04 -05:00

(Migrated from github.com)

Expand scope: modernize UI/UX and clean up dashboard layout

This issue should cover more than just applying the brand palette. The current UI needs a broader modernization pass so the dashboard feels cleaner, more intentional, and less jumbled.

Problem areas

The overall UI feels cluttered and dated instead of modern and readable.
The Recent Alerts section is hard to scan and should be presented in a clearer, more understandable way.
The information cards at the top of the dashboard are poorly formatted and need a better layout hierarchy.
The NavBar needs spacing between the version number and the status badge.
The Deployment card does not belong in the primary dashboard view.
Invite code management should live in an admin-oriented area, not mixed into general dashboard/workflow UI.

Desired UX direction

Make the interface feel more modern, cleaner, and easier to visually parse.
Keep the brand palette work from this issue, but apply it through a proper design system approach rather than just recoloring the current layout.
Improve spacing, alignment, card density, typography, and visual hierarchy across the dashboard.
Reduce dashboard clutter by moving admin/configuration items out of the main workflow area.

Specific requirements

Recent Alerts

Redesign Recent Alerts so alerts are readable at a glance.
Show alert type, source/provider, relevant user/display name, amount/value when applicable, timestamp, and status in a structured layout.
Avoid cramming unrelated fields together.
Use clear empty, loading, and error states.
Make the list/table/card layout responsive.

Top dashboard info cards

Rework the top info cards so they have consistent spacing, typography, alignment, and content hierarchy.
Make the primary value obvious.
Move secondary metadata into subtler supporting text.
Avoid awkward wrapping, cramped badges, and uneven card heights where practical.

Add proper spacing between the version number and the status badge.
Make sure the version/status area looks intentional and does not visually run together.

Add an Admin menu/section for administrative functionality.
Move the Deployment card/page under Admin.
Move Invite Codes under Admin as well.
Keep general user workflow areas focused on alerts, canvases, assets, integrations, and settings.

Acceptance criteria additions

Dashboard uses a cleaner, more modern layout with improved spacing and visual hierarchy.
Recent Alerts is redesigned into a readable, understandable presentation.
Top dashboard info cards are reformatted and no longer look cramped or jumbled.
NavBar has clear spacing between version number and status badge.
Admin menu/section exists.
Deployment is moved under Admin.
Invite Codes are moved under Admin.
Brand palette/design tokens from this issue are still applied consistently.
Responsive behavior is checked for desktop and narrower layouts.
PR includes screenshots or visual notes showing the before/after dashboard changes.

## Expand scope: modernize UI/UX and clean up dashboard layout This issue should cover more than just applying the brand palette. The current UI needs a broader modernization pass so the dashboard feels cleaner, more intentional, and less jumbled. ### Problem areas - The overall UI feels cluttered and dated instead of modern and readable. - The **Recent Alerts** section is hard to scan and should be presented in a clearer, more understandable way. - The information cards at the top of the dashboard are poorly formatted and need a better layout hierarchy. - The NavBar needs spacing between the version number and the status badge. - The **Deployment** card does not belong in the primary dashboard view. - Invite code management should live in an admin-oriented area, not mixed into general dashboard/workflow UI. ### Desired UX direction - Make the interface feel more modern, cleaner, and easier to visually parse. - Keep the brand palette work from this issue, but apply it through a proper design system approach rather than just recoloring the current layout. - Improve spacing, alignment, card density, typography, and visual hierarchy across the dashboard. - Reduce dashboard clutter by moving admin/configuration items out of the main workflow area. ### Specific requirements #### Recent Alerts - Redesign **Recent Alerts** so alerts are readable at a glance. - Show alert type, source/provider, relevant user/display name, amount/value when applicable, timestamp, and status in a structured layout. - Avoid cramming unrelated fields together. - Use clear empty, loading, and error states. - Make the list/table/card layout responsive. #### Top dashboard info cards - Rework the top info cards so they have consistent spacing, typography, alignment, and content hierarchy. - Make the primary value obvious. - Move secondary metadata into subtler supporting text. - Avoid awkward wrapping, cramped badges, and uneven card heights where practical. #### NavBar - Add proper spacing between the version number and the status badge. - Make sure the version/status area looks intentional and does not visually run together. #### Admin menu - Add an **Admin** menu/section for administrative functionality. - Move the **Deployment** card/page under **Admin**. - Move **Invite Codes** under **Admin** as well. - Keep general user workflow areas focused on alerts, canvases, assets, integrations, and settings. ### Acceptance criteria additions - [ ] Dashboard uses a cleaner, more modern layout with improved spacing and visual hierarchy. - [ ] Recent Alerts is redesigned into a readable, understandable presentation. - [ ] Top dashboard info cards are reformatted and no longer look cramped or jumbled. - [ ] NavBar has clear spacing between version number and status badge. - [ ] Admin menu/section exists. - [ ] Deployment is moved under Admin. - [ ] Invite Codes are moved under Admin. - [ ] Brand palette/design tokens from this issue are still applied consistently. - [ ] Responsive behavior is checked for desktop and narrower layouts. - [ ] PR includes screenshots or visual notes showing the before/after dashboard changes.

No milestone

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

gitchegumi/GitchAlerts#33

No description provided.

Rows
Columns