Template system / 01
styleGuide
A lean Client-First system for editing OBVIA without losing its brutalist editorial character.
01
Colors
Four values carry the whole site. One accent, used sparingly, is the point of the palette — not a limitation of it. Each panel names the Webflow variable to change.
Black
Background Color / Invert
#0A0A0A
Acid lime
Accent Color / Primary
#DBFF00
Paper
Background Color / Primary
#FFFFFF
Concrete
Surface / Placeholder
#0A0A0A0F
02
Typography
Three faces, one scale. Every row names the Webflow variable behind it, so re-cutting the system is one edit per step rather than one per section.
Families
Honest before pretty
Clear, robust copy for project stories, descriptions and interface instructions.
IST — AMS — NYC / EST. 2019
Heading scale
Honest before pretty
Strip it to the idea
Then build it properly
Section heading
Sub-heading
Mono-tracked eyebrow
Text elements
Styled at tag level, so copy inherits the system without a class. Each one is used on this site: paragraphs throughout, the quote in Voices on the home page, the ordered list on Instructions.
A paragraph sets the reading rhythm: 17px Public Sans at a 1.55 line height, capped near 60 characters so a line never outruns the eye.
- Ordered list item — numerals share the body face
- A second item, to show the gap between them
03
Components
Both variants on both grounds they actually meet — paper across the utility pages, acid lime in the closing CTA. Hover each one: the fill inverts rather than moving, which is the single gesture every component on this site is allowed.
On paper — Background Color / Primary
On accent — Accent Color / Primary
Keyboard focus draws a 2px accent outline at a 2px offset, on every ground. Tab to the buttons above to see it — it is never removed, only restyled.
Square is the default and the pill is the exception. One radius token carries every card, button and media plate on the site.
04
Layout
The third variable collection. Spacing is a t-shirt ladder, so a value can be re-cut without any name becoming a lie — bar width below is drawn to the real measure.
Spacing scale
Frame
The desktop frame every section sits inside. Full-bleed bands — the opening band above, the colour strip, the two grounds — deliberately break out of it.
One gutter token, re-cut per breakpoint through the Layout collection's responsive modes rather than per section.
The WCAG 2.2 AA floor, held by every interactive element including the nav toggle and the footer links.