Colors
The palette is defined once, as CSS custom properties on :root in static/css/variables.css. Every stylesheet references those tokens; no file hardcodes a hex value, so changing the theme means editing one file.
The vision
DevPlace is kept open for hours, often at night. The theme is therefore dark, low-glare, and deliberately quiet: deep violet-black backgrounds, soft lavender text, and a single warm accent.
- One accent, used sparingly. A single orange (
--accent,#ff6b35) marks what matters: the primary action, the active navigation item, links, and the current vote. Because nothing else competes for it, the accent always means "act on this". A second strong colour used decoratively breaks it. - Backgrounds layer by elevation. A near-black page sits behind slightly lighter cards, behind a lighter hover state. Depth comes from these few background steps plus a soft shadow, not from borders alone.
- Text is a three-step hierarchy. Primary for content, secondary for supporting text, muted for metadata. There is no fourth shade.
- Colour with meaning is reserved. Status colours (success, warning, danger, info) and topic colours carry semantics. They never "brighten up" a layout.
Background and surface
Layered from the page backdrop up to interactive surfaces.
| Token | Value | Use it for | Do not |
|---|---|---|---|
--bg-primary |
#0f0a1a |
The page backdrop (body). |
Put cards or inputs directly on it without a surface token. |
--bg-secondary |
#1a1028 |
The top nav, dropdowns, the mobile panel, demo frames. | Use as a card body in the content area. |
--bg-card |
#221436 |
Cards, panels, the standard content surface. | Use for the page backdrop. |
--bg-card-hover |
#2a1a42 |
Hover state of cards, list rows, and ghost buttons. | Use as a resting background. |
--bg-input |
#1a1028 |
Inputs, textareas, selects. | Use as a content card surface. |
--bg-modal |
#1a1028 |
Modal card body. | Use outside modals. |
--bg-gradient |
violet gradient | Large hero / landing surfaces only. | Apply to small components. |
Accent
| Token | Value | Use it for | Do not |
|---|---|---|---|
--accent |
#ff6b35 |
The single primary action, active nav link, links, the voted star, focus border. | A second decorative colour, large fills, or more than one primary action per view. |
--accent-hover |
#e55a2b |
Hover state of accent surfaces and links. | Resting state. |
--accent-light |
rgba(255,107,53,.1) |
The tinted background behind an active nav item or self-highlight row. | Body text (too low contrast). |
Text
A strict three-step hierarchy. Never introduce a fourth text shade.
| Token | Value | Use it for |
|---|---|---|
--text-primary |
#f0e8f8 |
Headings and body content. |
--text-secondary |
#b8a8d0 |
Supporting copy, labels, secondary buttons. |
--text-muted |
#7a6a90 |
Timestamps, counts, hints, metadata. |
Borders, radius, and shadow
| Token | Value | Use it for |
|---|---|---|
--border |
#2e2040 |
The default hairline on cards, inputs, dividers. |
--border-light |
#3a2a50 |
Hover/emphasis borders. |
--radius |
8px |
Buttons, inputs, small controls. |
--radius-lg |
12px |
Cards and panels. |
--radius-xl |
16px |
Large feature surfaces. |
--shadow-sm / --shadow / --shadow-lg |
(shadows) | Card hover, raised panels, modals respectively. |
Status colours (semantic only)
These encode meaning and must only be used to convey it.
| Token | Value | Means |
|---|---|---|
--success |
#4caf50 |
Success, healthy, online. |
--warning |
#ff9800 |
Caution; also the colour of a cast vote star. |
--danger |
#e53935 |
Errors, destructive actions, the create-post button. |
--info |
#42a5f5 |
Neutral information. |
Topic colours (badges only)
Used exclusively for topic badges (.badge-devlog, .badge-showcase, …) and the matching sidebar accents. Do not reuse them as general UI colours.
| Token | Value | Topic |
|---|---|---|
--topic-devlog |
#7c4dff |
Devlog |
--topic-showcase |
#00bfa5 |
Showcase |
--topic-question |
#448aff |
Question |
--topic-rant |
#ff5252 |
Rant |
--topic-fun |
#ffab00 |
Fun |
--topic-signals |
#00bcd4 |
Signals |
Rules
- Never hardcode a colour. Use the token:
color: var(--text-secondary), nevercolor: #b8a8d0. If a value is missing, add a token tovariables.cssrather than inlining a hex. - One accent per view. Exactly one primary action should carry
--accent. Everything else is--btn-secondary/ghost. - Status and topic colours are semantic. Do not use
--dangerfor a non-destructive button or a topic colour as a background flourish. - Respect the text hierarchy. Three shades only: primary, secondary, muted.
- Surfaces step up, never sideways. Page → card → card-hover. Do not place a card on
--bg-primarywithout a surface token, and do not use--bg-secondaryas a content card.
The reference below is rendered live from the tokens, so it always reflects the current theme.
Live palette
--bg-primary#0f0a1a
--bg-secondary#1a1028
--bg-card#221436
--bg-card-hover#2a1a42
--accent#ff6b35
--accent-hover#e55a2b
--text-primary#f0e8f8
--text-secondary#b8a8d0
--text-muted#7a6a90
--border#2e2040
--success#4caf50
--warning#ff9800
--danger#e53935
--info#42a5f5
Topic badges (the only place topic colours appear)
Devlog
Showcase
Question
Rant
Fun
Signals
One accent per view: correct vs misuse
Correct: a single accent-filled primary action, with supporting actions de-emphasised.
Misuse: three accent buttons compete, so none reads as the primary action.