Card links: border style

nhsuk / nhsapp-frontend

NHS App specific styles on top of nhsuk-frontend

https://design-system.nhsapp.service.nhs.uk/

MIT License

6 stars 0 forks source link

Card links: border style #173

Open davidhunter08 opened 1 month ago

davidhunter08 commented 1 month ago

Description

The current colour contrast of the page background and card links surrounding border is 1.24:1. As it does not meet the non-text contrast ratio of 3:1 it makes the border somewhat redundant.

Blog post on non-text contrast of UI elements

https://iknowdavehouse.medium.com/why-debate-non-text-contrast-of-ui-elements-1be4313c9e12

Every time you design or build something, take 10 minutes to review it with all the parts of the interactive UI elements that do not meet 3:1 contrast ratio removed.

So if your button background does not meet 3:1 remove it, if your interactive card borders do not meet 3:1 remove them…

Then ask yourself:

Is the interface still understandable?

Is the interface still as usable?

Could I do more?

davidhunter08 commented 1 month ago

https://github.com/nhsuk/nhsapp-frontend/issues/11#issuecomment-2063462496

davidhunter08 commented 1 month ago

Button v Card link comparison

Something to consider is the visual alignment between buttons and card links (spacing, text size, border width etc).

Current sizes:

Secondary button border 2px v Card link border 1px
Button text size (mobile) 16px v Card link text size (mobile) 19px

Note: We're currently in the explorative stage of the secondary button and secondary card links.

Also the example above has the divider line connected to the right of the card link, but that still needs to be decided (see this issue).

michaelgallagher commented 4 weeks ago

@davidhunter08 re: the above note "Something to consider is the visual alignment between buttons and card links (spacing, text size, border width etc).", i made a little doodle...

the point here =

we have a proposal for a secondary button style with an outline that is 2px thick with round corners
cards are basically buttons
should button-y things be more visually aligned? (same type size, same vertical padding, same outline style, add a beard to card link sets)

davidhunter08 commented 1 week ago

Some exploration of border styles, font sizes, spacing on card links:

card-link-border-style-exploration

Screenshots on Mural

cc @michaelgallagher