Create FIgma design for login "page"

a22erigr commented

2026-05-11 08:01:29 +00:00

Collaborator

Description

In the parent issue #843 the general design of the website is created. In this issue we should create a design for our login "page"
Please follow material designs when creating the design. A plugin to give you material designs components can be found here https://www.figma.com/community/make
General vibe (Ai mockup)

What should be done

Design in figma using Material designa philosophy login page
- Dark mode
- Light mode
How should we use theam colors, or should we even use them in the login "page"
How should the buttons look
If possible how should the hover/klicks look

## Description In the parent issue #843 the general design of the website is created. In this issue we should create a design for our login "page" Please follow material designs when creating the design. A plugin to give you material designs components can be found here https://www.figma.com/community/make General vibe (Ai mockup) ![bild](/attachments/ef9665ef-4679-421a-b123-9e114b39c73c) ## What should be done + Design in figma using Material designa philosophy login page + Dark mode + Light mode + How should we use theam colors, or should we even use them in the login "page" + How should the buttons look + If possible how should the hover/klicks look

bild.png

43 KiB

a22erigr added the

design

label

2026-05-11 08:05:47 +00:00

b24jonel was assigned by a24julot

2026-05-11 10:10:39 +00:00

b24erika commented

2026-05-11 11:12:58 +00:00

Collaborator

Here is a visual representation of the login "page" with figma using material design.

bild.png

284 KiB

bild.png

255 KiB

a22erigr commented

2026-05-11 11:15:24 +00:00

Author

Collaborator

https://webaim.org/resources/contrastchecker/
May be problematic in dark mode

![bild](/attachments/12218592-57ab-4ca2-aae8-a72f005acc02) https://webaim.org/resources/contrastchecker/ May be problematic in dark mode

bild.png

106 KiB

a22erigr commented

2026-05-11 11:33:00 +00:00

Author

Collaborator

[data-style='ruby'] {
--color1: #3e1d40;
--color2: #69165e;
--color3: #b1236e;
--color4: #e9d5e4;

[data-style='ruby'] { --color1: #3e1d40; --color2: #69165e; --color3: #b1236e; --color4: #e9d5e4;

a22erigr commented

2026-05-11 11:33:16 +00:00

Author

Collaborator

![bild](/attachments/6b897fad-6d96-4524-b938-924bb1948492)

bild.png

46 KiB

a22erigr commented

2026-05-11 11:39:18 +00:00

Author

Collaborator

Light mode looks great. I have some concerns regarding contrast in dark mode. If possible can you come with a new exampel focusing on accessibility for dark mode. If possible make i have the same "look" as in light-mode

a22erigr commented

2026-05-11 11:40:08 +00:00

Author

Collaborator

What i am trying to say is just change the colors / logo so i has a greater contrast

b24jonel was unassigned by a22erigr

2026-05-11 11:41:07 +00:00

b24erika was assigned by a22erigr

2026-05-11 11:41:13 +00:00

a22erigr commented

2026-05-11 11:42:42 +00:00

Author

Collaborator

If possible add a new button for guests . It should be possible to sign in to the website as a guest

a22erigr referenced this issue

2026-05-11 11:47:56 +00:00

Implement new login "page" #885

b24erika commented

2026-05-11 12:08:33 +00:00

Collaborator

Hex value that passes the tests based on accesability is #E9D5E4 (color4), the guest button is added.

Hex value that passes the [tests](https://webaim.org/resources/contrastchecker/) based on accesability is #E9D5E4 (color4), the guest button is added.

bild.png

166 KiB

bild.png

135 KiB