{% raw %} # 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` | `#080413` | The page backdrop (`body`). | Put cards or inputs directly on it without a surface token. | | `--bg-secondary` | `#120821` | The top nav, dropdowns, the mobile panel, demo frames. | Use as a card body in the content area. | | `--bg-card` | `#1a1030` | Cards, panels, the standard content surface. | Use for the page backdrop. | | `--bg-card-hover` | `#241640` | Hover state of cards, list rows, and ghost buttons. | Use as a resting background. | | `--bg-input` | `#140b26` | Inputs, textareas, selects. | Use as a content card surface. | | `--bg-modal` | `#1a1030` | 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` | `#ff7d4d` | Hover state of accent surfaces and links. | Resting state. | | `--accent-light` | `rgba(255,107,53,.12)` | 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` | `#f4eefb` | 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` | `rgba(255,255,255,.08)` | The default hairline on cards, inputs, dividers. | | `--border-light` | `rgba(255,255,255,.14)` | Hover/emphasis borders. | | `--radius` | `12px` | Buttons, inputs, small controls. | | `--radius-lg` | `18px` | Cards and panels. | | `--radius-xl` | `24px` | 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-politics` | `#00bcd4` | Politics | ## Rules 1. **Never hardcode a colour.** Use the token: `color: var(--text-secondary)`, never `color: #b8a8d0`. If a value is missing, add a token to `variables.css` rather than inlining a hex. 2. **One accent per view.** Exactly one primary action should carry `--accent`. Everything else is `--btn-secondary`/ghost. 3. **Status and topic colours are semantic.** Do not use `--danger` for a non-destructive button or a topic colour as a background flourish. 4. **Respect the text hierarchy.** Three shades only: primary, secondary, muted. 5. **Surfaces step up, never sideways.** Page → card → card-hover. Do not place a card on `--bg-primary` without a surface token, and do not use `--bg-secondary` as a content card. The reference below is rendered live from the tokens, so it always reflects the current theme. {% endraw %}