design: bring Mado into the marut.network visual language #9

Merged

exler merged 5 commits from camila/marut-editorial-redesign into main 2026-09-26 08:12:07 +02:00

Conversation 1 Commits 5 Files changed 33 +2670 -1280

camila commented 2026-09-25 22:55:03 +02:00

Collaborator

Copy link

Summary

• Redesign the full Mado interface—login, app shell, project list and event lists/details, forms, status controls and settings—in the warm dark editorial language of marut.network, without copying its composition or adding external branding.
• Adapt the existing MADO wordmark to warm white/orange and provide a dark-letter version for light mode. Recolor installable icons and incorporate the transparent browser favicon from the earlier mistaken icon-only PR (#8).
• Add self-hosted Manrope and JetBrains Mono, responsive spacing, accessible focus states, restrained texture, and a documented visual system in DESIGN.md. Preserve the existing light-mode toggle and semantic issue-level colors.

Verification

• npm run compile passes; collectstatic --noinput and Django check pass.
• All 62 Django tests pass. djlint --check passes for all 13 changed templates, Ruff passes on the changed Python module, and git diff --check passes.
• Browser QA: login logo is centered in both desktop dark and mobile light modes; theme toggle switches, both wordmarks are legible, and there is no horizontal overflow at 390px.
• Authenticated browser QA is complete with a local-only demo account, two synthetic projects, and five synthetic issues. Desktop and 390px mobile project lists, event lists, and issue detail were screenshot-reviewed; light-mode event list was checked too. Seven captures are attached in the authenticated QA comment. Mobile table and tab overflow were fixed during review. Project selection now opens the events list directly, and its former overview is removed; DSN setup remains available under Settings.

Scope / risk

Presentation and static assets, plus direct project-to-events navigation, an owner-checked redirect for old project links, and a DSN moved to project settings. Existing form routes, HTMX targets, and Alpine interactions remain in place. Authenticated layouts were reviewed with synthetic data on desktop and mobile. Replaces/supersedes the icon-only PR #8.

Verified login screenshots

Desktop, dark mode:

Mobile, light mode:

## Summary - Redesign the full Mado interface—login, app shell, project list and event lists/details, forms, status controls and settings—in the warm dark editorial language of marut.network, without copying its composition or adding external branding. - Adapt the existing MADO wordmark to warm white/orange and provide a dark-letter version for light mode. Recolor installable icons and incorporate the transparent browser favicon from the earlier mistaken icon-only PR (#8). - Add self-hosted Manrope and JetBrains Mono, responsive spacing, accessible focus states, restrained texture, and a documented visual system in `DESIGN.md`. Preserve the existing light-mode toggle and semantic issue-level colors. ## Verification - `npm run compile` passes; `collectstatic --noinput` and Django `check` pass. - All 62 Django tests pass. `djlint --check` passes for all 13 changed templates, Ruff passes on the changed Python module, and `git diff --check` passes. - Browser QA: login logo is centered in both desktop dark and mobile light modes; theme toggle switches, both wordmarks are legible, and there is no horizontal overflow at 390px. - Authenticated browser QA is complete with a local-only demo account, two synthetic projects, and five synthetic issues. Desktop and 390px mobile project lists, event lists, and issue detail were screenshot-reviewed; light-mode event list was checked too. Seven captures are attached in the authenticated QA comment. Mobile table and tab overflow were fixed during review. Project selection now opens the events list directly, and its former overview is removed; DSN setup remains available under Settings. ## Scope / risk Presentation and static assets, plus direct project-to-events navigation, an owner-checked redirect for old project links, and a DSN moved to project settings. Existing form routes, HTMX targets, and Alpine interactions remain in place. Authenticated layouts were reviewed with synthetic data on desktop and mobile. Replaces/supersedes the icon-only PR #8. ### Verified login screenshots Desktop, dark mode:  Mobile, light mode: 

mado-projects-desktop.png

37 KiB

mado-projects-mobile.png

23 KiB

mado-events-v2-desktop.png

59 KiB

mado-events-v2-mobile.png

41 KiB

mado-event-detail-v2-desktop.png

79 KiB

mado-event-detail-v2-mobile.png

62 KiB

mado-events-v2-light-desktop.png

59 KiB

mado-login-centered-dark-desktop.png

40 KiB

mado-login-centered-light-mobile.png

28 KiB

camila added 2 commits 2026-09-25 22:55:03 +02:00

design: make Mado browser favicon transparent 80495c1ba4

design: give Mado a warm editorial visual system 6b520d71b3

camila added 1 commit 2026-09-26 07:28:17 +02:00

fix: keep authenticated tables and tabs usable on mobile 490900828c

camila commented 2026-09-26 07:29:16 +02:00

Author

Collaborator

Copy link

Authenticated visual QA

Local-only demo account with two synthetic projects and five synthetic issues. Clicking a project opens its events immediately; project settings retain the DSN. Captured at 1280px desktop and 390px mobile. No production data or credentials are included.

Projects, desktop / dark:

Projects, mobile / dark:

Events, desktop / dark:

Events, mobile / dark:

Event detail, desktop / dark:

Event detail, mobile / dark:

Events, desktop / light:

The mobile project table and issue-detail tabs were adjusted after screenshot review. CSS compilation, 62 Django tests, djlint, and diff checks pass.

<!-- authenticated-visual-qa --> ### Authenticated visual QA Local-only demo account with two synthetic projects and five synthetic issues. Clicking a project opens its events immediately; project settings retain the DSN. Captured at 1280px desktop and 390px mobile. No production data or credentials are included. Projects, desktop / dark:  Projects, mobile / dark:  Events, desktop / dark:  Events, mobile / dark:  Event detail, desktop / dark:  Event detail, mobile / dark:  Events, desktop / light:  The mobile project table and issue-detail tabs were adjusted after screenshot review. CSS compilation, 62 Django tests, djlint, and diff checks pass.

camila added 1 commit 2026-09-26 08:04:33 +02:00

feat: open project events directly from project list ae90398b9f

camila added 1 commit 2026-09-26 08:10:34 +02:00

fix: center the login wordmark f161ac8f23

exler merged commit 834ccab6b1 into main 2026-09-26 08:12:07 +02:00

exler deleted branch camila/marut-editorial-redesign 2026-09-26 08:12:07 +02:00

exler referenced this pull request from a commit 2026-09-26 08:12:07 +02:00

design: bring Mado into the marut.network visual language (#9)

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

Bug

There's a problem with the software.

  

Enhancement

Request to improve an existing feature.

  

Feature

Request to create a new feature.

  

Performance

Optimization possible or software too slow.

No labels

Bug

Enhancement

Feature

Performance

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

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

exler/mado!9

No description provided.