---
title: "Colors"
description: "Near-monochrome design tokens with a single blue accent. Full dark and light themes; dark is the default."
url: https://buenalabs.io/design/colors
---

# Colors

Near-monochrome with a single blue accent. Full dark and light themes; dark is the default. Tokens are CSS custom properties (`--c-*`) that flip with the theme.

| Token | Dark | Light | Role |
|-------|------|-------|------|
| bg-primary | #0A0A0A | #FFFFFF | Page background |
| bg-surface | #111111 | #FAFAFA | Cards, panels |
| bg-elevated | #1F1F1F | #F2F2F2 | Raised surfaces, hovers |
| text-primary | #EDEDED | #171717 | Headings, body |
| text-secondary | #A1A1A1 | #666666 | Supporting text |
| text-tertiary | #757575 | #8F8F8F | Captions, hints |
| accent | #52A8FF | #0070F3 | Links, accent text |
| accent-hover | #83C3FF | #0761D1 | Accent hover state |
| border | #2E2E2E | #E2E2E2 | Control borders |
| separator | #1C1C1C | #EFEFEF | Hairline dividers |
| success | #62C073 | #297A3B | Status: positive |
| warning | #F5A623 | #A35200 | Status: caution |
| error | #FF6166 | #CB2A2F | Status: failure |
| info | #BF7AF0 | #8E4EC6 | Status: neutral notice |

Rules: one accent — blue marks interaction, nothing else gets a hue. `accent` is the per-theme text/link blue; solid interactive fills use `--primary: #0070F3` in both themes. Status colors are for status, never decoration. Surfaces step bg-primary → bg-surface → bg-elevated; don't skip levels.