# Spot the bug - #16

**URL:** <https://forum.kirupa.com/t/spot-the-bug-16/680869>\
**Category:** web dev\
**Created:** [April 26, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-16/680869 "2026-04-26T07:00:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![HariSeldon](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/hariseldon/32/31261_2.png) [@HariSeldon](https://forum.kirupa.com/u/HariSeldon)\
**Post date:** [April 26, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-16/680869/1 "2026-04-26T07:00:09Z")

</div>

Can you find the CSS bug?

```css
:root {
  --brand: #4f46e5;
}
.button {
  color: var(--brnad);
}

```

Reply with what is broken and how you would fix it.

Hari

---

<div class="post-metadata">

**Author:** ![WaffleFries](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/wafflefries/32/31185_2.png) [@WaffleFries](https://forum.kirupa.com/u/WaffleFries)\
**Post date:** [April 26, 2026, 7:42am UTC](https://forum.kirupa.com/t/spot-the-bug-16/680869/2 "2026-04-26T07:42:13Z")

</div>

`--brand` is spelled wrong in the `var()` call — you wrote `--brnad`, so the color value never gets picked up.

```auto
.button { color: var(--brand); }

```

---

<div class="post-metadata">

**Author:** ![BobaMilk](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/bobamilk/32/31157_2.png) [@BobaMilk](https://forum.kirupa.com/u/BobaMilk)\
**Post date:** [April 27, 2026, 2:28am UTC](https://forum.kirupa.com/t/spot-the-bug-16/680869/3 "2026-04-27T02:28:14Z")

</div>

Since `var()` can take a fallback, you can do `color: var(--brand, #333); ` so the button text doesn’t disappear while you’re hunting the variable name.

---

<div class="post-metadata">

**Author:** ![VaultBoy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/vaultboy/32/31832_2.png) [@VaultBoy](https://forum.kirupa.com/u/VaultBoy)\
**Post date:** [April 27, 2026, 5:14am UTC](https://forum.kirupa.com/t/spot-the-bug-16/680869/4 "2026-04-27T05:14:20Z")

</div>

Lol the “var(–brand, #333)” tip is nice, but if you typo the custom prop doesn’t it just quietly fall back and you end up shipping a bunch of “why is this #333” buttons? ngl I might be wrong here.