code-anything.com
Log inStart free

Portfolio

Atelier

Atelier is a portfolio template for design studios and creative teams who want their work to do the talking. It pairs a near-black canvas with one electric lime accent and a clean grotesque/sans pairing, then frames selected projects in a two-column case-study grid with oversized imagery and tidy client/category labels. A numbered services list, a quiet text-wordmark client wall and a loud "start a project" band round out a page built to win the brief.

Confident, crafted and unmistakably studio — dark room, one bright light.

studio-portfolio.code-anything.app
Atelier°
[ Independent design studio — Berlin ]

We design brands that refuse to blend in.

Atelier is a small studio for identity, digital and art direction. We partner with founders and culture-makers to build brands with a point of view — and the craft to back it up.

Studio Index / EST. 2017
LocationBerlin, 52.52° N
DisciplinesIdentity · Digital · Motion
Team9 people, one room
AvailabilityQ4 2026 — 2 slots
48
Shipped
9
Years
11
Awards

Selected Work

Index 01 — 22 · Showing 4
[ 01 ]
Brand Identity

Foldwell

A full rebrand for a circular-furniture maker — wordmark, a modular type system and a tactile, take-apart packaging suite that ships flat.

IDX 01 · Circular furniture · 2025
[ 02 ]

Northway Rail

Web & Motion
IDX 02 · Regional transit · 2025
[ 03 ]

Saunter

Packaging
IDX 03 · Coffee roaster · 2024
[ 04 ] Art Direction

Halden & Co

● In production — 2024

What we make, and how.

Four practices, one team. Most projects start with strategy and end somewhere we did not expect — in the best way.

[01]

Brand & Identity

Strategy, naming, marks and the type systems that hold a brand together as it grows.Strategy / Naming / Systems

→
[02]

Digital & Web

Sites, products and design systems built hand-in-hand with engineers, shipped to last.UX / Design systems / Build

→
[03]

Art Direction

Campaign concepts, photography direction and the editorial logic behind a body of work.Campaign / Photo / Editorial

→
[04]

Motion & Sound

Title sequences, product film and the small animations that make an interface feel alive.Film / Motion / Sound

→
[ Trusted by teams who sweat the details ]
FOLDWELL°NORTHWAY°SAUNTER°HALDEN & CO°MERIDIAN°KESTREL°OUTPOST°BRØD°FOLDWELL°NORTHWAY°SAUNTER°HALDEN & CO°MERIDIAN°KESTREL°OUTPOST°BRØD°
[ Booking projects for Q4 2026 ]

Got a brief worth fighting for?

studio@atelier.example+49 30 555 0142

Tell us about the work, the timeline and what winning looks like. We read every message and reply within two working days.

Design rules

The system, applied to any site

Every rule below travels with the template — describe your tweaks and the agent keeps the system intact.

What it decides for you

  • Build on a near-black canvas (#0E0E10) with off-white text and reserve a single electric accent (acid lime) for emphasis, links, numerals and one or two hero words — never paint with it.
  • Pair a geometric grotesque for headings with a neutral sans for body; set statement headlines large (clamp ~3.5–7em) at 0.95 line-height with -0.02em tracking, and keep body at a calm 1.6 line-height.
  • Show selected work as a two-column case-study grid with oversized imagery (roughly 4:3), and label each tile with a small uppercase client name and a category line — let the images carry the page.
  • Number everything that is a list: services and process steps lead with monospaced index numerals (01, 02…) in the accent colour to signal a catalogued, deliberate studio.
  • Use generous vertical rhythm (sections padded ~6em), hairline borders in a low-contrast grey, and rounded-but-restrained corners (~14px); fill any image gaps with flat tinted blocks rather than stock photos.
  • Keep a quiet text-only client wall — set partner names as plain wordmarks in a single weight — so credibility reads as confidence, not clutter.

Ships with

Sticky navStatement heroSelected work case-study gridNumbered services listClient wordmark wallStart-a-project contact bandFooter

Design tokens

Palette

bg
surface
text
muted
accent
accent2
border

Headings

Space Grotesk

Body

Inter

Radius

14px

Explore palettes

Keep looking

More from the library

AuroraMarketing
Warm ArtisanMarketing
Sharp FadeBooking
CockpitDashboard

Make it yours in minutes.

Start from this template and describe your tweaks — content, sections, colours. The backend and deploy are handled.