Design system
DevPlace has one visual language: hand-written vanilla CSS driven by design tokens, with no preprocessor, no CSS-in-JS, and no utility framework. This section is the canonical reference for how the interface looks and is structured, and states the rules every page must follow.
The feed / posts page is the reference implementation. When two pages disagree, the feed page wins and the other gets fixed. The pages below describe the system; the Consistency rules page turns it into hard requirements.
The four pages
| Page | What it covers |
|---|---|
| Colors | The palette, every token and what it is for, what not to do, and the vision behind a dark, single-accent theme. |
| Layout | The page shell, the canonical multi-column and single-column layouts, and which compositions are acceptable. |
| Responsiveness | The goal, the standard breakpoint ladder, and the exact techniques used to reach it. |
| Consistency rules | Hard, non-negotiable structural rules for the header, footer, breadcrumb, and content root, taken from the posts page. |
Principles
- Tokens over literals. Every colour, space, radius, and shadow is a CSS custom property defined once in
variables.css. Stylesheets reference the token, never a raw hex or pixel value. - One layout per page. A page has a single top-level layout container inside the shared content root; it never nests competing wrappers or re-declares the maximum width.
- Mobile is not an afterthought. Multi-column layouts collapse to one fluid column, touch targets grow, and nothing scrolls horizontally by accident.
- Structure is shared, content is per page. The header, breadcrumb, content root, and footer come from
base.html. A page supplies only its own content and its own stylesheet.