{% raw %} # 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](/docs/styles-consistency.html) page turns it into hard requirements. ## The four pages | Page | What it covers | |------|----------------| | [Colors](/docs/styles-colors.html) | The palette, every token and what it is for, what not to do, and the vision behind a dark, single-accent theme. | | [Layout](/docs/styles-layout.html) | The page shell, the canonical multi-column and single-column layouts, and which compositions are acceptable. | | [Responsiveness](/docs/styles-responsiveness.html) | The goal, the standard breakpoint ladder, and the exact techniques used to reach it. | | [Consistency rules](/docs/styles-consistency.html) | 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. {% endraw %}