Work

Case study · Rebranding and website · 2026

A Swiss precast concrete maker founded in 1930, rebranded around one shape, the stair step, then given a website that moves like it.

Client
Leva Corbières SA, Gruyère, Switzerland
Our part
Identity, icons, website, motion, CMS
Built with
Next.js 16, Payload CMS, Motion
Status
Proposed to the client

01 · Brand · The idea

The step is the unit of measure.

We built the new identity on a single shape: a stair step. A solid block for the riser, and above it a second block cut at 45°, the same colour at half strength. Leva casts 3,000 staircases a year, so the mark is not a badge. It became the grid, the rhythm and the motion of everything that followed.

  • 45°the axis every slide and wipe travels on
  • 12 pxthe mark's rounded corner, carried onto every card and photo
  • 50 %one colour per mark: the upper block is the same ink at half strength

02 · Brand · The lockup

Every stroke has its own line.

The wordmark sits on the mark's centre line, and each letter is cut from construction lines you can measure: the stems of the L and the E, the four diagonals of the V and the A. The same lines set the clear space and every lockup that ships.

  • Leva lockup in white on Racing blueWhite on Racing
  • Leva lockup in Racing blue on SandRacing on Sand
  • Leva lockup in white on SapphireWhite on Sapphire
  • Leva lockup in Charcoal on whiteCharcoal on White

03 · Brand · Colour and type

Five colours, one typeface, every section a stair.

We built it from Leva's brand guidelines and kept it strict: one accent, one weight of Switzer, and a rule that no two sections meet on a straight line.

  • Racing#001E55Hero, process, footer
  • Sapphire#104EBAThe single accent
  • Charcoal#282828Materials, history
  • Sand#FBF9F7Concrete, warmed up
  • White#FFFFFFReading grounds
Switzer 500Tight tracking, from 112 px titles down to 14 px buttons. One weight, so hierarchy comes from size and space.

Votre préfabricant pour des chantiers plus courts et mieux maîtrisés.

01 · Sand
02 · White
03 · Racing
04 · White
05 · Sapphire

Scroll, and each band rises out of the one above: the riser grows from 0 to 36 px as the section comes in.

04 · Brand · Icons

24 icons, cast in the same white concrete.

Stairs, landings, façades, the truck, the plant, the crane: every product family and service has its own 3D icon, lit the same way from the same isometric angle. The guidelines include the prompting recipe, so the next icon Leva needs stays in the family.

    05 · Brand · In the world

    The identity, applied.

    Lettering for the building in Corbières, the fleet, and a photography direction made of raking light on raw concrete, cranes at the blue hour and the history of the place.

    • The Leva building in Corbières at dusk, its lettering litSignage · Corbières, at dusk
    • A Leva truck in profile on an alpine roadFleet
    • A symmetrical stairwell rising to a skylightPhotography · raking light
    • Construction cranes at the blue hourPhotography · the blue hour
    • A Leva truck on the motorway at sunsetFleet · on the road
    • A concrete staircase under low lightPhotography · the product as architecture
    • An old postcard of the Corbières bridgeHeritage · the Corbières bridge
    • The Leva building in Corbières by daySignage · by day

    06 · Web · The homepage, in motion

    Then the website. Ten sections, one moment of motion in each.

    Our rule for Leva: one spectacular moment per screen, never two. Recorded straight from the build, at full speed.

      07 · Web · Between pages

      Pages hand over to each other.

      The card becomes the page.

      Click an element and its render grows into the hero of the next page. Six pairs work this way: project, element, finish, compétence, job title and the elements used on a project. Built on the browser's View Transitions, through React 19, with a short fade under reduced motion.

      A menu that floats.

      We kept the mega menu Leva's team knew and detached it: a rounded shell with a margin on every side, the colour flooding down inside it, the page blurred behind. It hides on the way down and returns the moment you scroll up.

      08 · Web · On site, on the phone

      Built for the foreman, not only the architect.

      Designed for someone checking a part from a building site as much as for the architect at a desk. Every page was checked at 390 px: no clipped digit, no overflow, and the hero poster paints before any script runs.

      • Opening and figures
      • Menu
      • Card to page

      09 · Web · Try it

      45 concrete recipes you can almost touch.

      The material library, rebuilt here so you can play with it. Move over a sample to bring it up close, filter by finish. These are Leva's real samples, photographed in Corbières.

      10 · Web · Under the hood

      A site Leva's team can run on its own.

      The Payload CMS admin in French, editing the Corniches element: title, render, gallery, public address and compétence The admin dashboard, grouped into Catalogue, Contenu, Entreprise and Messages

      Next.js 16 and Payload CMS run in one app. Every word, photo and page is editable in a French admin, and a save updates the live page in about two seconds, without a deploy.

      • Catalogue as data. 4 compétences, 27 elements and 45 finishes, linked to each other, so a new finish shows up on every element that uses it.
      • Native forms. The quote request and the job application left Fillout: four steps, plans and CVs uploaded to Vercel Blob, the element pre-filled from the page you came from.
      • Nothing lost in the move. All 100 old addresses answer, in one redirect at most, accents kept.
      • 111pages generated at build, refreshed from the CMS
      • 100/100original URLs kept, checked in 166 route tests
      • 45finishes, each with its own page
      • 0layout shift on desktop and mobile (CLS)
      Next case study Hills Real wood interior trim for Tesla, built from scratch