Slopless Design

Northfold

About
Contact

Start a project

Contact

Start a conversation

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.

hello@northfold.com

Name

Your name

you@example.com

Message

Tell us a little about your project…

Send message

Working together

How big are your projects?

Most run 8–16 weeks with a team of three to five people.

Do you work with startups?

Yes, from Series A onwards, when there's a product and paying customers.

Do you build the website too?

We design and build, then train your team to run it.

Where are you based?

Lisbon and London, working with clients across Europe and North America.

Can we hire you for a single deliverable?

Occasionally — a naming project or a sales deck. Ask us.

Slopless Design · reference render

Everything above this panel is the design

Design code sd1.jZXBDoIwEET_xbMYQr1w9cB_UGPQxFhTQfh837Q0LvHiidBuZ7czs1sFMpKqPDZ3e37r-uS6bkfA5j4vmOPzHl3jiDs450DQgZThC1KF6Nf7m8UnZKoh5YZco9mcL9D6GGzFP3j57mY5tQ2mj2EWaOHYRPjJq0fH2z1Zr7BtIkqrJuVRxBaMdbXGllXHHr7245pD8JJpU14f_RQBgHtYKtKbkB52mWW8Giogy76hbGGInFEAupThnzpI1uZk8oaJGiZO-xDUYjKT2WIIwm7lwyIAEKxRmvrYrmb5AA6yMN (Y2K Chrome), 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 #F6FBFF · text #192028 · accent #00B0FB
Type: Unbounded / Sora · scale 1.333, base 17px
Grid: 12 columns, gutter 24px, max 1280px · section space 112px
Shape: radius 28px · border thick 2px · shadow glow · motion expressive

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

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

nav.y2k-chrome-pill-bar Pill bar · nav, on every pageA floating capsule on the surface colour with a glow: wordmark left, pill links in the middle, a small primary pill button right.
contact.y2k-chrome-guestbook Guestbook · contactA 'sign the guestbook' window on 3–10: accent title bar with a pixel label, then a centred chrome title, a line of text, the email in pixel font and the form.
faq.y2k-chrome-dialog-boxes Dialog boxes · faqEach question is a system dialog on 2–11: an accent2 title bar holding the question in the pixel font, the answer in the body below.
footer.y2k-chrome-webring Webring · footer, on every pageCentred: star · wordmark · star, pill links in a row, a pixel-font 'best viewed' line and the legal line.

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