Slopless Design

Northfold

About
Contact

Most rebrands fail because they start with a logo. Ours start with a sales call recording and a spreadsheet of lost deals.

Each engagement starts with a two-week audit: interviews with customers, sales and the people who build the product. The brief writes itself after that.

We hand over everything — source files, a living brand system and a website your team can edit without calling us.

Twelve years in numbers

140+

launches shipped

years independent

9 of 10

clients return

The studio

Rita Carvalho

Founder, strategy

Owen Blake

Design director

Sana Qureshi

Lead developer

Mateus Lima

Copy and naming

“They understood our product faster than our own sales team did.”

Hanna Lindqvist

CEO, Corvid Robotics

Slopless Design · reference render

Everything above this panel is the design

Design code sd1.jVXLCsIwEPyXnKsYiWKvgp_hQUKN1aqY0v93ZpOtUVB7KnSfzM5MmJh9z1SuMna3Wm83BlFzhmDIkfQpmWDnzjqUVyiW9rkDyAt_ggL6EwyFVyAIGpSf1CQJkdb8rCPNy7W_9lUcNQHXbo_AkFce0X4ffGnIREVcY6HBawFd-Rk4ek0MFfg1AbBC2tmoEC0vpTnJtsSvuBvOpRE-LbcgPtF1PAIQ-7X7v9m4uwZ9Gz0aqxNO2Q3z6zSfvNEMcVgZRfBAsxG3x3CAGMTfzR7FEFVI5ueH2N8jGr4ItVy4OpPqCQj7Yr (Bauhaus), drawn by the Slopless preview renderer with sample copy. Use it as a visual guide while building: design/DESIGN.md and design/tokens.json are the source of truth. Every section root carries data-pattern with its pattern id.

Viewport

Without ?viewport= the render follows the window width once scripts run. Screenshot at 1440 px with ?viewport=desktop and at 375 px with ?viewport=phone.

Tokens at a glance

Palette: triadic, light · bg #FDF9F4 · text #241E16 · accent #0050CC
Type: Jost / Jost · scale 1.414, base 17px
Grid: 12 columns, gutter 24px, max 1360px · section space 112px
Shape: radius 0px · border thick 4px · shadow none · motion subtle

Sections on the about page (/about), top to bottom

Each link shows that pattern alone with these tokens, beside its rule, grid areas, slots, notes and layout tree.

nav.bauhaus-shape-bar Shape bar · nav, on every pageThree small primary shapes (circle, square, triangle) precede the lowercase wordmark in 1–4; links start at column 7; a 4 px bar closes the nav.
content.bauhaus-manifesto Manifesto · contentA giant accent2 index numeral in 1–3; the statement in lowercase at step 5 across 4–12, an accent bar beneath, then two body columns 4–8 and 9–12.
stats.bauhaus-block-figures Block figures · statsA lowercase title at step 5 beside an accent circle, then two to four figures in a row; each number (step 7) sits in its own solid square block (accent, accent2, yellow in turn) with a lowercase label beneath.
team.bauhaus-circle-portraits Circle portraits · teamPortraits cropped to circles, four per row; name lowercase and role beneath, flush left; a red bar opens the section.
testimonial.bauhaus-quote-field Quote field · testimonialA full accent2 field: a yellow circle on 1–4, the quote lowercase at step 4 on 5–12 in onAccent2, attribution under it.
footer.bauhaus-primary-band Primary band · footer, on every pageThree equal colour blocks with no gap: wordmark on accent (1–4), links on yellow (5–8), address and legal on accent2 (9–12).

Spec bundle (JSON): DESIGN.md, tokens.json and layout.json for this code
Bauhaus style page: principles, do and don't, every pattern live
Magnetic buttons: signature look demo and reduced-motion fallback
Open this design in the picker

To see the user's own copy, append the #b=… part of their picker link to this URL. It is read in the browser only and never sent to the server.