The design system behind nuvaire.co.uk and its admin dashboard. Square edges, muted neutral palette, Manrope throughout. Use this page when building new sections or admin screens so new work stays consistent — swatches and samples below are the real CSS, not a redraw.
Colour palette
One accent used sparingly (links, focus states, small highlights) — never as a large fill. Status colours are muted, never saturated.
Background
#F6F4EF
--bg
Surface
#EFEBE3
--surface
Ink
#1B1A18
--ink
Muted
#726E66
--muted
Rule
#DAD6CD
--rule
Accent
#8B5A3C
--accent
Success
#3F5E3A
--success
Danger
#A23B2E
--danger
Warning
#9C7A2E
--warning
Info
#4B6B7A
--info
Typography
Manrope only, weights 300–700. Sizes stay deliberately small and restrained — no oversized display type.
Underline style, not boxed. Focus state switches the rule to the accent colour.
Admin dashboard components
The admin keeps Bootstrap structurally (cards, tables, Summernote editor) but every component is reskinned with these tokens: square corners, thin 1px rule borders, no shadows, no gradients.
Status badges
PublishedDraftPendingSpam
Alerts
Post published successfully.
Error: could not delete this item.
Card
Recent Comments
Cards use a 1px solid var(--rule) border, var(--surface) header fill, no box-shadow, no rounded corners.
Layout rules
Square corners everywhere. No border-radius on buttons, cards, inputs, images, or badges. The only circles allowed are status dots and loading spinners.
One accent, used sparingly. Terracotta (var(--accent)) appears only on hover states, focus rings, and small highlights — never as a large background fill.
Full-screen snap panels on the homepage. Each marketing section (.panel) is min-height: 100vh with scroll-snap-align: start on the page; the nav is position: sticky and overlays panels as they scroll past. This pattern is specific to the homepage — inner pages like blog posts and admin flow normally.
Generous, consistent spacing. Section padding is 96–140px top/bottom on desktop; grid gaps are 40px (cards) or 80px (two-column layouts). Nothing sits closer than 24px to another element.
Small type scale. Nothing above 42px anywhere on the site. Labels and nav are 11px uppercase tracked; body copy is 13.5–15px.
No shadows, no gradients, no blur. Depth comes from thin 1px borders (var(--rule)) and flat surface colour changes (var(--surface)), not box-shadow or backdrop-filter (the nav's blur is the one intentional exception).
CSS tokens
Defined once in style.css (public site) and mirrored into admin/css/admin.css for the dashboard. Copy this block when starting a new stylesheet for the same brand.