Web3 DAO | Ethereum Foundation Logo

Secondary buttons styling does not correctly reflect design system

Organization

Ethereum Foundation

Deadline

N/A

Status

LIVE


INSTRUCTIONS

Describe the bug

Across the website, we are using the primary outline variant of the button instead of the secondary variant of the button.

E.g., in the design system, we use a secondary button (black outline) for the secondary button.

<img width="1269" alt="Screenshot 2023-07-20 at 10 00 54" src="https://github.com/ethereum/ethereum-org-website/assets/62268199/c0ab6728-232c-4b52-a826-1d8aee743f05">

Here is the difference:

<img width="345" alt="Screenshot 2023-07-20 at 09 57 44 1" src="https://github.com/ethereum/ethereum-org-website/assets/62268199/aab0bc09-3f24-482a-bb0b-9a84f23ff472">

However, on production, we use the primary 'outline' variant (see Layer 2 page) also everywhere.

<img width="1435" alt="Screenshot 2023-07-20 at 10 02 49" src="https://github.com/ethereum/ethereum-org-website/assets/62268199/569ce763-486f-4553-b631-f2377a0ed2e8">

We accidentally do the same on the homepage:

<img width="1494" alt="Screenshot 2023-07-20 at 10 08 33" src="https://github.com/ethereum/ethereum-org-website/assets/62268199/d72e0fcd-6341-4107-90f7-e537c3bd67ac">

And on the docs:

<img width="1080" alt="Screenshot 2023-07-20 at 10 08 40" src="https://github.com/ethereum/ethereum-org-website/assets/62268199/bce9dae3-f1cf-49f9-bfcc-ca14cab24d6e">

To reproduce

  1. Go to 'https://ethereum.org/en/layer-2/'
  2. See error

Expected behavior

I'm currently unsure about the correct button designs. It appears that around 90% of our buttons should feature black outlines (secondary outline).

To avoid inconsistencies, I suggest we standardize all outline button variants to secondary outline buttons. We can revise this as needed once we establish clearer design rules or exceptions.