{% 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 burnt orange (`--accent`, `#b73f1e`) 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` | `#271b5b` | The page backdrop (`body`). | Put cards or inputs directly on it without a surface token. | | `--bg-secondary` | `#1a1736` | The top nav, dropdowns, the mobile panel, demo frames. | Use as a card body in the content area. | | `--bg-card` | `#13112a` | Cards, panels, the standard content surface. | Use for the page backdrop. | | `--bg-card-hover` | `#1a1736` | Hover state of cards, list rows, and ghost buttons. | Use as a resting background. | | `--bg-input` | `#1a1736` | Inputs, textareas, selects. | Use as a content card surface. | | `--bg-modal` | `#13112a` | 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` | `#b73f1e` | 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` | `#af3050` | 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). | | `--accent-rgb` | `255, 107, 53` | Composing any other accent tint: `rgba(var(--accent-rgb), 0.3)`. | Writing `rgba(255, 107, 53, ...)` literally anywhere. | ## Text A strict three-step hierarchy. Never introduce a fourth text shade. | Token | Value | Use it for | |-------|-------|-----------| | `--text-primary` | `#e9e4ff` | Headings and body content. | | `--text-secondary` | `#c8c3e5` | Supporting copy, labels, secondary buttons. | | `--text-muted` | `#9b93c9` | Timestamps, counts, hints, metadata. | ## Borders, radius, and shadow | Token | Value | Use it for | |-------|-------|-----------| | `--border` | `#11101f` | The default hairline on cards, inputs, dividers. | | `--border-light` | `#2f2a55` | 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` | `#34d399` | Success, healthy, online. | | `--warning` | `#fbbf24` | Caution; also the colour of a cast vote star. | | `--danger` | `#f87171` | Errors, destructive actions, the create-post button. | | `--info` | `#60a5fa` | 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: #c8c3e5`. If a value is missing, add a token to `variables.css` rather than inlining a hex. Accent tints at other alphas compose the channel token: `rgba(var(--accent-rgb), 0.3)`. 2. **Never give a global token a fallback.** Write `var(--accent)`, never `var(--accent, #hex)`. A fallback silently masks a dead or misspelled token: the page keeps rendering, but from a value nobody maintains. 3. **Feature palettes are file-scoped token blocks.** A page with its own semantic palette (the Devii terminal, the AI-usage grades) defines it once as custom properties at the top of its own stylesheet (`devii.css` scopes `--devii-*` on `devii-terminal`; `isslop.css` scopes `--isslop-*` on `:root`) and references only those below. Raw hex values may exist in exactly two places: `variables.css` and these file-scoped blocks. 4. **One accent per view.** Exactly one primary action should carry `--accent`. Everything else is `--btn-secondary`/ghost. 5. **Status and topic colours are semantic.** Do not use `--danger` for a non-destructive button or a topic colour as a background flourish. Status is always `--success`/`--warning`/`--danger`/`--info`; never repurpose a topic token for a status. 6. **Respect the text hierarchy.** Three shades only: primary, secondary, muted. 7. **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 %}