Novi Kvadrat Design System

Novi Kvadrat runs on one design system. The marketplaces, the business portal, the admin console and the studios share it, in five languages, in light and dark. I designed it and built it, from the brand mark to the tokens.

The press kit at novikvadrat.rs/en/press is generated from the same files the site is built from: the logos, their rules, the colours, the typefaces and the design tokens.

The logo and the mark each come in colour, reversed, black and white; a portal logo for partners comes in colour and reversed. The file is chosen by what sits behind it: colour on white and light grey, reversed on plain dark colour, white on NK Blue and on photos, black for one-colour print.

Clear space on every side equals the blue square, x. Nothing enters it. The logo is never shorter than 24 px on screen, the mark never smaller than 16 px.

The files are used exactly as supplied: never stretched, recoloured, rotated, shadowed, outlined, boxed or reset in another font, and never the retired 2025 artwork.

The name is two words, Novi Kvadrat, with a capital N and K in every language. It is never translated, never run together and never shortened in public copy.

NK Blue, #0058E3, and Slate, #34405C, belong to the logo only. The interface has its own interactive blue: #1A57DB in light, #3C83F6 in dark.

On white, NK Blue reaches 5.99 : 1 and Slate 10.32 : 1. On the dark ink, NK Blue drops to 3.21 : 1, for large text only, and Slate to 1.86 : 1, never for text.

187 colour roles carry the rest, each with a light and a dark value. A role is named for its job, not its colour: canvas, surface, ink, line, primary, danger.

Three free typefaces, all on Google Fonts. Bricolage Grotesque sets public headings and big numbers, and never appears in the console. Inter sets the text and every interface label. IBM Plex Mono sets data and labels, always with tabular figures.

Bricolage Grotesque has no Cyrillic, so Russian pages fall back to Inter. 21 type steps cover every size the product uses.

The tokens are the values the product is built from. They are exported from the live system as W3C Design Tokens, in the DTCG 2025.10 format, in light and dark, and as CSS variables. The press kit and the site are generated from the same source.

Beside the colours: 11 spacing steps, 7 radii, 3 control heights, 3 shadows with the focus ring, 3 durations and 6 z-index layers.

The system was built twice: first as a 19-board, mobile-first library on canvas, then as a code layer of about 350 files. Lint rules ban any colour or icon from outside it, so the marketplaces, the portal and the admin console share one visual language. One icon library, Phosphor, covers every surface.

Every page ships in both themes. The dark theme is not an inversion: each of the 187 roles has its own dark value.

Screenshots pin every screen in both themes, on a desktop and on a phone, so drift is caught before it ships.

The kit holds 10 logo files in vector and transparent PNG, the logo and the mark also with their clear space built in, the design tokens, and 18 product screenshots: desktop light, desktop dark and phone. Each logo file is named for its use, never “light” or “dark”, which brands use for opposite things. It was generated from source on 8 October 2026.