Slopless Design

Northfold

About
Contact

About

How we think

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.

Start a project

Twelve years in numbers

140+

launches shipped

years independent

9 of 10

clients return

31%

average lift in demo requests

The studio

Rita Carvalho

Founder, strategy

Owen Blake

Design director

Sana Qureshi

Lead developer

Mateus Lima

Copy and naming

Slopless Design · reference render

Everything above this panel is the design

Design code sd1.jZVNDoIwFITvwtoYMGpk6UIPAqIlNtS0FsPtnXkFWmWha6bv93sDha7pUVOLO3y4oVbNBWDV2QpfTvn-WJwzaDOnbHvHrqQ138EJv_Ao1rtVceAryTiRW_un8Vwn5xEzOd_ZFic63QIhCaUnGvIOVDxsCRFiN4vY84DjYxyt44nLaZKmcdRJs_AQZXjD2tMaIErX8FFr5S1YFHti27KgKKh8RS8Y3UxAC2uOkqs2Lzpc8ENKsNT4-WbxBxKSQ7NYFwb5R5ifpQgraSJj-mH2T8dMZchElqJQNVobKUfBZThjALiIE9IhCsKkdG3ybTkS9gYJX6e (Seventies Psychedelic), 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: analogous, light · bg #F7E8C6 · text #3A1D0C · accent #D2561E
Type: Shrikhand / Nunito · scale 1.5, base 18px
Grid: 12 columns, gutter 24px, max 1240px · section space 120px
Shape: radius 32px · border none 0px · shadow long · motion expressive

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.seventies-sunrise-centered Sunrise centred · nav, on every pageA centred wordmark over pill links, with a thin four-colour stripe band (accent, accent2, surfaceAlt, heading) under the bar.
content.seventies-flowing-column Flowing column · contentA rounded surface panel on 2–11, padded 64 px, with 64 px section padding: centred label, a step-5 title, a thick wavy rule, the opening paragraph at step 1 (max 50 ch), a body paragraph and a large primary button.
stats.seventies-bubble-figures Bubble figures · statsA centred step-5 title, then four rounded surface capsules two by two across 1–12 (wide cells, padded 32 px): a step-5 figure in the link colour over a body-size caption; one per row on phone.
team.seventies-groovy-portraits Groovy portraits · teamA centred step-5 title, then portraits in four columns across 1–12 (four or eight): a rounded 4:5 duotone photo, the step-2 name and the role, centred.
footer.seventies-stripe-sunset Stripe sunset · footer, on every pageFour full-width stripes (accent, accent2, surfaceAlt, heading), then one row: wordmark 1–4, pill links 5–9, legal 10–12.

Spec bundle (JSON): DESIGN.md, tokens.json and layout.json for this code
Seventies Psychedelic style page: principles, do and don't, every pattern live
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.