Slopless Design

Northfold

About
Contact

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

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.hZRLDoIwEIbv0jUYBWPC1ngNF2BQNGAboEFv7zctkokLXM97_ockdiIutsJ8RBgI3CRZYk7FIcuOhkTT1uXNA5rD0Uqi5oGYfuix2-R5Ts-EjmEmbb9dy9F2cJbD-sr3oVTeozIcvxa9ClniCSpYWSwd3G5BB_qu9RnL31Xa0OB1SBRPt9wUWBEx0Un4_Hv2N2HiDJPK6O4vMQl4E1kdIFNxfKVNezsR09jqGa6uLw0WYytZAoxVsCnbazr4p-DGP_-vuL4AdNGfQhCLgw4yoogjhE0aE0AWf5NPwj4VGSebemfOlGpOZdt9MfPqAwuW3M (Mid-Century Modern), 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: complementary, light · bg #F3E9D6 · text #2B231B · accent #C9552A
Type: League Spartan / Jost · scale 1.333, base 17px
Grid: 12 columns, gutter 24px, max 1240px · section space 112px
Shape: radius 20px · border rule 2px · shadow none · 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.midcentury-pill-bar Pill bar · nav, on every pageBoxed wordmark in 1–3, pill-shaped page links in 5–9, a primary CTA in 11–12.
content.midcentury-story-offset Story with boomerang · contentA rounded duotone photo on 1–6, an orange boomerang triangle in column 7 pointing at the text, the story on 8–12: label, h2, paragraph, underlined link.
stats.midcentury-dial-row Dial row · statsA full-bleed teal band: label in 1–3, then three or four figures in one row across 4–12, each a bold numeral over a short centred caption, all in onAccent2.
team.midcentury-arch-portraits Arch portraits · teamTitle on 1–6; portraits in arched frames three per row across 2–12, the name and role on one line under each.
footer.midcentury-boomerang-band Mustard band · footer, on every pageA mustard band: wordmark 1–3, links stacked 5–6, an inline newsletter form 8–12, legal under the wordmark.

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