Let us know if there’s anything missed in this, but at a minimum, you want to turn off “Content training” in your Figma organisation’s admin area.

To reach the right section, from your organisation page in Figma, click Admin then the Settings tab. The AI settings are right at the bottom of the page.

button:hover {
  transition: background 200ms linear, color 200ms linear 200ms,
    transform 500ms cubic-bezier(0.4, 0, 0.7, 1.8) 300ms, border-color 300ms cubic-bezier(
        0.4,
        0,
        0,
        1.1
      ) 600ms;
}

The order looks like this:

/* With timing function */
transition: property duration timingFunction delay;
transition: color 200ms linear 200ms;

/* Without timing function */
transition: property duration delay;
transition: color 200ms 200ms;

You can make some pretty cool state changes by adding some space between each change.

See the Pen Demo: separate delays for each transitioned property by Andy Bell (@piccalilli) on CodePen.

.no-squish {
  flex: none;
}

This is really handy if you have a supporting icon because the default behaviour of a flex parent is to not wrap, which means elements will be forced to shrink as space runs out.

Setting flex to none gives you an inflexible item that can’t grow or shrink, based on the flex rules set on the parent, so it’s ideal for extrinsically sized elements, like icons.

See the Pen Flex none demo by Andy Bell (@piccalilli) on CodePen.

See the Pen Button with shadow-based focus that’s not accessible in high contrast mode by Andy Bell (@piccalilli) on CodePen.

Because outline doesn’t clip to the shape of your button if you use border-radius, it can be tempting to use a sharp box-shadow for focus styles.

button:focus {
  outline: none;
  box-shadow: 0px 0px 0px 3px #192a56;
}

With standard operating system and browser settings this looks fine. There’s plenty of contrast and the focus style is very clear. Job done, right? Unfortunately not because in Windows High Contrast Mode, both the background and focus styles probably won’t show up.

There is a solution to this: transparent borders and outlines! First, we add a transparent border to our button:

button {
  border: 1px solid transparent;
  /* all the other CSS */
}

This border is completely invisible and you probably won’t even notice it, but the difference in Windows High Contrast Mode is huge.

This doesn’t fix the focus style though. It’s best to provide genuine contrast with focus styles so when a keyboard user tabs to your element, they can see that it is focused. To improve the initial focus style, we need to tweak it a bit:

button:focus {
  outline: 2px solid transparent;
  outline-offset: 4px;
  box-shadow: 0px 0px 0px 3px #192a56;
}

See the Pen Button with shadow-based focus that’s still accessible in high contrast mode by Andy Bell (@piccalilli) on CodePen.

We first set a 2 pixel outline and then using the ever-handy outline-offset, push it out by another 4 pixels. Now, when a user focuses our button, it looks great both in a standard operating system and browser configuration and it looks great in Windows High Contrast Mode.

Here’s all the CSS for the button:

button {
  display: inline-block;
  padding: 0.5rem 2rem;
  font: inherit;
  font-weight: bold;
  border-radius: 2rem;
  border: 1px solid transparent;
  background: #3f25c4;
  color: #ffffff;
  min-width: 10rem;
  cursor: pointer;
}

button:hover,
button:focus {
  background: #8c7ae6;
  color: #000000;
}

button:focus {
  outline: 2px solid transparent;
  outline-offset: 4px;
  box-shadow: 0px 0px 0px 3px #192a56;
}

This is a quick win, for everyone: the visual design is left almost untouched and it’s accessible.

You can completely disable the client-side Javascript bundles with this little snippet:

export const config = {
  unstable_runtimeJS: false
};

This is an experimental/beta feature, it seems, but I can vouch for how effective it is because every single page on this site is powered by Next JS and has 0kb of client-side React code!

Here’s an entire page component with this snippet in context, that you can use as a template for pages that you want client-side JavaScript to be disabled on:

export const config = {
  unstable_runtimeJS: false
};

export default function MyLightweightPage({message}) {
  return (
    <article>
      <p>{message}</p>
    </article>
  );
}

export async function getStaticProps() {
  return {
    props: {
      message: 'Hello, world'
    }
  };
}