diff --git a/README.md b/README.md
index 9912ea2..44d88b8 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,35 @@
-<h1>my site</h1> 
+# Contador (Tema Marrom e Branco)
 
-<p>não estilisa e não aparece a imagem
-mais é pra ser assim</p>
+Um contador simples, responsivo e acessível com paleta marrom e branco.
 
-https://www.canva.com/design/DAGTM361VcI/oW0VIRT4JWtolufyGCGSNQ/edit
\ No newline at end of file
+## Como usar
+
+- Abra o arquivo `index.html` diretamente no navegador (clique duas vezes ou use um servidor estático).
+- Use os botões para aumentar, diminuir e redefinir.
+- Ajuste o campo "Passo" para definir de quanto em quanto o valor muda.
+
+## Atalhos de teclado
+
+- `↑`, `+` ou `=`: aumenta o valor
+- `↓`, `-` ou `_`: diminui o valor
+- `R` ou `0`: redefine para 0
+
+## Acessibilidade
+
+- Leitura do valor com `aria-live` e rótulos claros.
+- Foco visível nos botões e campos.
+- Link de pular para o conteúdo.
+
+## Estrutura do projeto
+
+- `index.html` — marcação e estrutura
+- `styles.css` — tema marrom e branco
+- `script.js` — lógica do contador e atalhos
+
+## Personalização
+
+As cores principais estão em variáveis CSS no `:root` do `styles.css` (por exemplo, `--brown-800`, `--offwhite`). Ajuste-as para variar o tom do tema.
+
+## Referência de design
+
+Inspirado neste design: [Canva](https://www.canva.com/design/DAGTM361VcI/oW0VIRT4JWtolufyGCGSNQ/edit)
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..c1c907b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Contador — Marrom & Branco</title>
+  <meta name="description" content="Um contador simples com tema marrom e branco." />
+  <link rel="stylesheet" href="./styles.css" />
+  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='0.9em' font-size='90'%3E%2B%3C/text%3E%3C/svg%3E">
+</head>
+<body>
+  <a class="skip-link" href="#main">Pular para o conteúdo</a>
+
+  <header class="site-header">
+    <h1 class="site-title">Contador</h1>
+  </header>
+
+  <main id="main" class="container" role="main">
+    <section class="counter" aria-labelledby="counter-heading">
+      <h2 id="counter-heading" class="visually-hidden">Controles do contador</h2>
+
+      <div class="display" role="status" aria-live="polite" aria-atomic="true" aria-label="Valor atual do contador">
+        <span id="value" class="value" data-testid="value">0</span>
+      </div>
+
+      <form class="controls" autocomplete="off" onsubmit="return false;">
+        <div class="step-field">
+          <label for="step">Passo</label>
+          <input id="step" name="step" type="number" inputmode="numeric" min="1" step="1" value="1" aria-describedby="step-help" />
+          <small id="step-help" class="help">Quantia adicionada ou subtraída a cada clique.</small>
+        </div>
+
+        <div class="buttons">
+          <button type="button" id="decrement" class="btn btn-secondary" aria-label="Diminuir">−</button>
+          <button type="button" id="reset" class="btn btn-ghost" aria-label="Redefinir">Redefinir</button>
+          <button type="button" id="increment" class="btn btn-primary" aria-label="Aumentar">+</button>
+        </div>
+      </form>
+
+      <div class="shortcuts" aria-live="polite">
+        <p class="hint">Atalhos: ↑/+/= aumenta, ↓/− diminui, R ou 0 redefine.</p>
+      </div>
+    </section>
+  </main>
+
+  <footer class="site-footer">
+    <p>Feito com tema marrom e branco.</p>
+  </footer>
+
+  <script src="./script.js" defer></script>
+</body>
+</html>
+
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..1fd7b40
--- /dev/null
+++ b/script.js
@@ -0,0 +1,102 @@
+(function () {
+  "use strict";
+
+  /** @type {HTMLElement | null} */
+  const valueElement = document.getElementById("value");
+  /** @type {HTMLInputElement | null} */
+  const stepInput = /** @type {HTMLInputElement | null} */ (document.getElementById("step"));
+  /** @type {HTMLButtonElement | null} */
+  const incrementButton = /** @type {HTMLButtonElement | null} */ (document.getElementById("increment"));
+  /** @type {HTMLButtonElement | null} */
+  const decrementButton = /** @type {HTMLButtonElement | null} */ (document.getElementById("decrement"));
+  /** @type {HTMLButtonElement | null} */
+  const resetButton = /** @type {HTMLButtonElement | null} */ (document.getElementById("reset"));
+
+  if (!valueElement || !stepInput || !incrementButton || !decrementButton || !resetButton) {
+    return;
+  }
+
+  /** @type {number} */
+  let currentValue = 0;
+
+  function coerceStep(value) {
+    const parsed = parseInt(String(value), 10);
+    if (Number.isNaN(parsed) || parsed < 1) return 1;
+    return parsed;
+  }
+
+  function getStep() {
+    return coerceStep(stepInput.value);
+  }
+
+  function announce(value) {
+    const parent = valueElement.parentElement;
+    if (parent) {
+      parent.setAttribute("aria-label", `Valor atual do contador: ${value}`);
+    }
+  }
+
+  function render(value) {
+    valueElement.textContent = String(value);
+    announce(value);
+  }
+
+  function setValue(next) {
+    currentValue = next;
+    render(currentValue);
+  }
+
+  function increment() {
+    setValue(currentValue + getStep());
+  }
+
+  function decrement() {
+    setValue(currentValue - getStep());
+  }
+
+  function reset() {
+    setValue(0);
+  }
+
+  // Button interactions
+  incrementButton.addEventListener("click", increment);
+  decrementButton.addEventListener("click", decrement);
+  resetButton.addEventListener("click", reset);
+
+  // Normalize step input
+  stepInput.addEventListener("change", function () {
+    const normalized = getStep();
+    stepInput.value = String(normalized);
+  });
+
+  // Keyboard shortcuts (global)
+  document.addEventListener("keydown", function (event) {
+    // Avoid interfering when typing in inputs other than the body
+    const target = /** @type {HTMLElement} */ (event.target);
+    const isTypingInNumberInput = target instanceof HTMLInputElement && target.type === "number";
+    if (isTypingInNumberInput) {
+      return;
+    }
+
+    const key = event.key;
+    if (key === "ArrowUp" || key === "+" || key === "=") {
+      event.preventDefault();
+      increment();
+      return;
+    }
+    if (key === "ArrowDown" || key === "-" || key === "_") {
+      event.preventDefault();
+      decrement();
+      return;
+    }
+    if (key === "r" || key === "R" || key === "0") {
+      event.preventDefault();
+      reset();
+      return;
+    }
+  });
+
+  // Initial render
+  render(currentValue);
+})();
+
diff --git a/styles.css b/styles.css
new file mode 100644
index 0000000..7162ed3
--- /dev/null
+++ b/styles.css
@@ -0,0 +1,206 @@
+:root {
+  --brown-800: #4e342e;
+  --brown-700: #5d4037;
+  --brown-600: #6d4c41;
+  --brown-500: #795548;
+  --brown-300: #a1887f;
+  --offwhite: #faf9f7;
+  --white: #ffffff;
+  --text-strong: #2d241f;
+  --text-muted: #6b5e57;
+  --radius: 14px;
+  --shadow: 0 10px 30px rgba(45, 36, 31, 0.15);
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+  color: var(--text-strong);
+  background: linear-gradient(180deg, var(--white) 0%, var(--offwhite) 100%);
+}
+
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+}
+
+.skip-link:focus {
+  left: 12px;
+  top: 12px;
+  background: var(--brown-700);
+  color: var(--white);
+  padding: 8px 12px;
+  border-radius: 8px;
+}
+
+.site-header, .site-footer {
+  text-align: center;
+  padding: 24px 16px;
+}
+
+.site-title {
+  margin: 0;
+  font-weight: 800;
+  letter-spacing: 0.4px;
+  color: var(--brown-800);
+}
+
+.container {
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 0 16px 40px;
+}
+
+.counter {
+  background: var(--white);
+  border: 1px solid rgba(93, 64, 55, 0.12);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  padding: 28px;
+}
+
+.display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(180deg, var(--offwhite) 0%, var(--white) 100%);
+  border: 1px solid rgba(93, 64, 55, 0.18);
+  border-radius: 20px;
+  padding: 24px;
+  margin-bottom: 20px;
+}
+
+.value {
+  font-variant-numeric: tabular-nums;
+  font-weight: 800;
+  font-size: clamp(48px, 10vw, 92px);
+  line-height: 1;
+  color: var(--brown-800);
+  text-shadow: 0 1px 0 rgba(255,255,255,0.6), 0 10px 30px rgba(93,64,55,0.14);
+}
+
+.controls {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 16px;
+}
+
+@media (min-width: 560px) {
+  .controls {
+    grid-template-columns: 1fr auto;
+    align-items: end;
+  }
+}
+
+.step-field label {
+  display: block;
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+
+.step-field input[type="number"] {
+  width: 100%;
+  appearance: textfield;
+  -moz-appearance: textfield;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid rgba(93, 64, 55, 0.28);
+  outline: none;
+  background: var(--offwhite);
+  color: var(--text-strong);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
+}
+
+.step-field input[type="number"]:focus {
+  border-color: var(--brown-600);
+  box-shadow: 0 0 0 4px rgba(125, 86, 68, 0.18);
+}
+
+.help {
+  display: block;
+  color: var(--text-muted);
+  margin-top: 6px;
+}
+
+.buttons {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 12px;
+}
+
+.btn {
+  cursor: pointer;
+  font-weight: 700;
+  padding: 14px 16px;
+  border-radius: 12px;
+  border: 2px solid transparent;
+  transition: transform 120ms ease, box-shadow 120ms ease, background 120ms ease, color 120ms ease;
+}
+
+.btn:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(125, 86, 68, 0.22);
+}
+
+.btn:hover {
+  transform: translateY(-1px);
+}
+
+.btn:active {
+  transform: translateY(0);
+}
+
+.btn-primary {
+  background: linear-gradient(180deg, var(--brown-600), var(--brown-700));
+  color: var(--white);
+  border-color: var(--brown-700);
+}
+
+.btn-primary:hover {
+  background: linear-gradient(180deg, var(--brown-500), var(--brown-700));
+}
+
+.btn-secondary {
+  background: linear-gradient(180deg, var(--brown-300), var(--brown-500));
+  color: var(--white);
+  border-color: var(--brown-600);
+}
+
+.btn-secondary:hover {
+  background: linear-gradient(180deg, var(--brown-300), var(--brown-600));
+}
+
+.btn-ghost {
+  background: var(--white);
+  color: var(--brown-700);
+  border-color: rgba(93, 64, 55, 0.28);
+}
+
+.btn-ghost:hover {
+  background: var(--offwhite);
+}
+
+.shortcuts .hint {
+  margin: 0;
+  margin-top: 8px;
+  color: var(--text-muted);
+  text-align: center;
+}
+
+.visually-hidden {
+  position: absolute !important;
+  height: 1px; width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+}
+
