Em meu código HTML eu criei dois botões, uma para mostrar a lista de tintas e outra para esconder. Além disso, coloquei um título.

<h1>Tintas Alura</h1>

  <button class="mostrar">Mostrar estoque</button>

  <ul class="lista">
    <li cor="laranja" tipo="tinta-exterior" class="item">Tinta laranja</li>
    <li cor="vermelho" tipo="tinta-interior" class="item">Tinta vermelha</li>
    <li cor="branco" tipo="tinta-interior" class="item">Tinta branca</li>
    <li cor="amarelo" tipo="tinta-exterior" class="item">Tinta amarela</li>
    <li cor="rosa" tipo="tinta-exterior" class="item">Tinta rosa</li>
    <li cor="preto" tipo="tinta-exterior" class="item">Tinta preta</li>
  </ul>

  <button class="esconder">Esconder estoque</button>

Já no CSS, eu deixei ".lista" com display "none", para que a lista de tintas aparecesse apenas quando o usuário clicasse no botão. Além disso, eu deixei o meu título com "padding", para que o mesmo não ficasse muito grudado com o topo da página e com o botão ou a lista abaixo.

h1 {
  padding: 80px 0px 20px 0px;
}

.lista {
  display: none;
  padding: 20px;
  list-style-type: none;
  border: 4mm ridge rgba(234, 122, 11, 0.992);
}

E abaixo, está a solução que encontrei no arquivo main.js, sinto que poderia ser muito melhor, mas foi a solução que encontrei:

const btnMostrar = document.querySelector('.mostrar');
const btnEsconder = document.querySelector('.esconder');
const lista = document.querySelector('.lista');

btnEsconder.addEventListener('click', () => {
    lista.style.display = 'none';
    btnEsconder.style.display = 'none';
    btnMostrar.style.display = 'block';
});

btnMostrar.addEventListener('click', () => {
    lista.style.display = 'block';
    btnEsconder.style.display = 'block';
    btnMostrar.style.display = 'none';
});

if(lista.display === 'block') {
    btnEsconder.style.display = 'block';
    btnMostrar.style.display = 'none';
} else {
    btnEsconder.style.display = 'none';
    btnMostrar.style.display = 'block';
}

Segue agora, o resultado: