[Experiment] Added 4px corner radius to all buttons

[mia-allers-gds]

Important

Just an experiment/ do not merge

As part of Scope brand related design work the team has decided to explore the idea of adding rounded corners to buttons.

Deployment

https://govuk-frontend-pr-6315.herokuapp.com/

Design considerations

I've used 4px as a starting point to explore this idea. Anything rounder begins to look cartoonish in my opinion, and we also need to remember that the more rounded the corner, the more padding around the text will be needed to prevent the text looking squeezed.

The aim here is to make the buttons look more distinctive to improve their affordance, not to completely restyle them.

Why rounded corners?

Differentiation
They provide a point of visual differentiation from the other blocky elements on the Design System, such as banners. The rest of the Design System uses sharp corners so by using rounded corners on one thing, we draw attention to that thing.

Affordance
They specifically provide extra affordance to things like buttons, by aligning more closely with button styles used across the web and digital devices. At the moment our buttons rely on colour and a shadow to make them explicit.

This is especially true when buttons have very long text, making the button appear more like a banner (and making it more likely to be ignored)

Visual consistency
They create a visual link between the typeface, New Transport, and the layout elements. New Transport uses rounded tails on the ‘T’, ‘L’ and ‘A’ letters, and rounded corners would echo these distinctive elements

Space saving
On tight layouts where space is at a premium, rounded corners allow users to gauge the gaps between blocks of content that would otherwise need to be spaced further apart

Friendliness
Rounded corners are seen as being friendlier and could support the GOV.UK brand's aim of appealing to users who were intimidated by the previous branding.

Where we could use rounded corners

It was decided by the squad that we would only add rounded corners to buttons for now.

This is to

• Ensure maximum differentiation from other elements in the Design System
• Minimise impact on our users
• Allow us to engage the community on a tightly scoped change

---

Before
Buttons are square edged and do not stand out against elements such as the file upload

After
Buttons are clearly differentiated from the file upload component

[github-actions]

Stylesheets changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
index 357097803..b6a7d8651 100644
--- a/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
+++ b/packages/govuk-frontend/dist/govuk/govuk-frontend.min.css
@@ -1925,7 +1925,8 @@
 @media (min-width:40.0625em) {
     .govuk-button {
         margin-bottom: 32px;
-        width: auto
+        width: auto;
+        border-radius: 4px
     }
 }
 

---

Action run for 279f2d6

[github-actions]

Other changes to npm package

diff --git a/packages/govuk-frontend/dist/govuk/components/button/_index.scss b/packages/govuk-frontend/dist/govuk/components/button/_index.scss
index 6da0312ca..5b0b6ab9a 100644
--- a/packages/govuk-frontend/dist/govuk/components/button/_index.scss
+++ b/packages/govuk-frontend/dist/govuk/components/button/_index.scss
@@ -84,6 +84,8 @@ $govuk-inverse-button-text-colour: $govuk-brand-colour !default;
 
     @media #{govuk-from-breakpoint(tablet)} {
       width: auto;
+
+      border-radius: 4px;
     }
 
     // Ensure that any global link styles are overridden

---

Action run for 279f2d6

[github-actions]

📋 Stats

File sizes

File	Size	Percentage change
dist/govuk-frontend-development.min.css	128.66 KiB	-0.1%
packages/govuk-frontend/dist/govuk/govuk-frontend.min.css	128.65 KiB	-0.1%

No changes to module sizes.

---

Action run for 279f2d6

[owenatgov]

My tech perspective: I don't see any issues. Rounded corners don't have any programatic impact on web pages so the impact on the tech or accessibility or performance or whatever is going ot be minimal. At most it's an extra line of CSS.

There's a few things on how we organise it. Firstly it would at least be sensible to have a sass variable like $govuk-border-radius to store it and distribute it. We could potentially also have a mixin like govuk-rounded-corners that applies the border-radius but that might not be necessary since it's only one attribute. Both these things can also be private ie: only useable interally by us rather than by people using our stuff so that they can only be used by us for buttons and then if we decide to apply this more widely then we can make it public.

On the precise value, @mia-allers-gds do you think there's any value in trying to tie the radius value to a value within the element like its padding or is the think that the 'house style' for rounded corners would be 4px? I woulded if we could be more intentional with the value itself and do some maths to get to it or something but if 4 is the right value then it's the right value. That's also making some assumptions about us using rounded corners outside button in the future which might not happen.

[36degrees]

Is it intentional that we're only rounding corners on tablet and above? So on mobile we'd still have non-rounded corners?

If so, it'd be good to capture the rationale for that decision somewhere.

[mia-allers-gds]

Is it intentional that we're only rounding corners on tablet and above? So on mobile we'd still have non-rounded corners?

If so, it'd be good to capture the rationale for that decision somewhere.

Ha no! They should be rounded always. That's probably me putting my code in the wrong place @36degrees