Slopless Design

About
Contact

Northfold

Start a project

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.

Start a project

Results

140+

launches shipped

years independent

9 of 10

clients return

Corvid Robotics

Fieldstack

Tidewater Labs

Arklow Valves

Mosswood Bio

Kind words

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

Hanna Lindqvist

Slopless Design · reference render

Everything above this panel is the design

Design code sd1.hZTBCsIwEET_xbMVqxbpUfodHtJUaVFJwCL4987sbkJEpAdB2CG73X0zFGruVFf3HIH5CpVV2x1P-07-9mHAXHSMIzFwUXntetOs64Y66WNPefeIDi4GAnF--9HWkaqJf4-d8DUb2srZw5IDXFz5Jf875C0nCbxz8eJciSgBQNdvihzoCDQemNDZRUxxD-HW45c9_StJhsU45KO8ZFYgTDXbOAOuaQUXY4BViTAPhFMsD6hwWB0bmSQ1GIOkXgH56suQWJ4L7VttT6RMAJjnCYBXbhiolRYEMW1YExmGfE109xmvlIzttofWOPsApXoD (Luxury Fashion), 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: monochrome, light · bg #FAF8F4 · text #1A1A1A · accent #111111
Type: Bodoni Moda / Jost · scale 1.5, base 15px
Grid: 12 columns, gutter 20px, max 1440px · section space 200px
Shape: radius 0px · border hairline 1px · 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.luxury-centered-crest Centred crest · nav, on every pageTiny caps links on 1–4, the wordmark centred on 5–8, a tiny caps text action right-aligned on 9–12; no rule.
content.luxury-editorial-spread Editorial spread · contentA 3:4 photograph on 1–5 spanning two rows; the text sits low on 7–11 in the second row: caps label, italic headline, a short paragraph, an underline link.
stats.luxury-heritage-dates Heritage dates · statsA caps label on 1–3; three dates on 5–12, each a large italic Didone year with a caps caption beneath.
logos.luxury-press-line Press line · logosBetween two hairlines, four to six publication names in tiny wide caps spread evenly on one line.
testimonial.luxury-press-quote Press quote · testimonialOne press quote centred in italic Didone at step 4, framed by a tiny caps label above and the publication name in caps below.
footer.luxury-wordmark-signature Wordmark signature · footer, on every pageCaps links on 1–6 and an underlined email signup on 8–12, then the house name in wide Didone capitals across the page and a centred caps legal line.

Spec bundle (JSON): DESIGN.md, tokens.json and layout.json for this code
Luxury Fashion 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.