Study 05 / Lama Lama
A Brand With Room to Play
Pixels, compact controls and personal surprises turn an agency identity into a shared way of behaving.
Enter the story Five chapters, about ten minutes. Press J and K to move between them.Let’s follow it.
- Style
- Swiss agency system, pixel graphics, cinematic presentation
- The idea
- An expressive agency identity applied to every interface layer
- Borrow it for
- Coherent brand behavior and layered portfolio exploration
- Watch for
- Many modes and controls increase the learning effort
- Interaction evidence
- 1Observed3Observed + source1Source-confirmedResearched September 15–16, 2026
Chapter 01 / Idea
One identity, many little invitations.
Lama Lama's pixel logo is only the beginning. The same character appears in image treatments, mono text reveals, contextual messages and compact controls. The result feels like an agency with a way of doing things, extending its personality from the hero into the smallest interaction.
Personality becomes stronger when its interactions belong together.
A header that’s an object
The menu is a compact floating panel, at most 438px wide, with the pixel logo and a phrase that changes with context.
Observed + source: Seen in the browser and supported by public source code for the same behavior.A declaration in one block
72px uppercase on 57.6px leading (0.8) packs the headline into a single dense shape.
Observed: I inspected the live page or exercised the control, at a recorded viewport.Floating utilities
Get in touch and a portrait card float on the right. Neither appears in the first mobile view.
Observed: I inspected the live page or exercised the control, at a recorded viewport.10px labels
Mono labels measure 10px on desktop and on mobile: consistent, and very small on a phone.
Observed: I inspected the live page or exercised the control, at a recorded viewport.
A centered menu floats as a small object over cinematic media. Below, compact work rows give way to broad images and offset culture photographs, changing the pace without losing the shared visual language.
The work index makes that personality useful. Names, categories and image strips support quick scanning, with more narrative and media available once a project catches the visitor's interest.
Choose a small set of brand behaviors that can travel across the interface.
Chapter 02 / Type
A declaration and its small print.
The headline arrives as a dense uppercase shape. The explanation uses more open sentence spacing. Around them, small mono labels name categories and actions. This contrast gives Lama Lama its mix of confidence and precision, with careful distinctions needed where metadata becomes a control.
.8 leading creates a dense, emphatic uppercase shape.
Hero headline: desktop 72px → mobile 40px. Recorded source family: Suisse BP Intl 700.
Measured at 1440 × 1000 desktop and 390 × 844 mobile, September 15–16, 2026. Specimens use this library’s PP Neue Montréal at the recorded size and leading, not the source typeface; wide words are cropped at the frame’s edge.
The hero measured 72px with 57.6px leading on desktop and 40px with 32px leading on mobile. Body copy has more breathing room, and both its width and position change for the narrow layout.
Mono action labels remain 10px on both measured viewports. Brackets, outlines and arrows help separate roles, but important mobile actions may need a more comfortable size to make that distinction clear.
Let expressive headlines and practical reading text use different rules.
Chapter 03 / Motion
The interface has a playful streak.
A work row opens into a preview. A team name brings up a portrait and a personal caption. A compact hub can become a presentation or an inquiry flow. These discoveries share a visual character, making the surprises feel like parts of the same place.
- A visible close button, not found yet
- The Escape key, not found yet
- A click outside the layer, not found yet
0 of 3 exits found. Open a case, then leave the layer.
Original illustration with invented cases. On a touch screen, two of the three exits apply.
The explicit X closed the ten-slide deck; Escape did not close it in the tested desktop state.
ArrowDown advanced the desktop deck. Source defines swipe and tap zones below 1000px; touch navigation on a physical device was not fully verified.
Recorded September 15–16, 2026.The desktop Neurons Lab preview and draggable gallery were exercised, along with team portrait changes. The pitch deck was a functioning ten-slide presentation, and its explicit close control worked.
The contact camera treatment was confirmed in public code but never activated. The review also found that Escape did not close the desktop deck in its tested state: more modes bring more conventions to keep consistent.
Make discovery rewarding, and make leaving each discovered layer obvious.
Chapter 04 / Mobile
Same character. A different gesture.
Lama Lama gives touch its own interactions. Service columns become a horizontal strip, and the tested mobile work row opens a dedicated case. Awards use a persistent disclosure that stays open for reading, preserving the discovery without asking the visitor to keep holding.
- Navigation
- The compact menu expands to nearly the full width.
- Composition
- The hero stacks, work rows grow, services become horizontal cards.
- Interaction
- The inline case preview becomes a direct case page.
- Watch for
- Very small labels, and different exits for each layer.
Captured September 15–16, 2026. Sizes describe the saved image files; mobile research used a 390 × 844 CSS-pixel viewport. Each frame records one moment, not the complete animation.
The review verified the mobile service drag and awards expansion. Desktop awards use a temporary press-and-hold reveal in the inspected implementation; that sustained desktop gesture was not fully exercised live.
The deck also has mobile-specific swipe and tap-zone behavior in source, with incomplete physical-device testing. The broader lesson is to choose a suitable gesture per surface and verify its entry, exit and reading state.
Translate the intent of an interaction into a gesture that suits the device.
Chapter 05 / Takeaways
Give the play a dependable frame.
The strongest thing to borrow is the relationship between Lama Lama's effects. The pixels, labels, previews and presentation mode reinforce one character. Keep that coherence, then make the practical frame equally dependable: clear controls, readable labels and predictable ways back to the page.
Keep. Repeat a few distinctive behaviors until they become a recognizable language.
Question. Can someone discover, use and leave every layer without a hint?
- 01 · Idea
Choose a small set of brand behaviors that can travel across the interface.
- 02 · Type
Let expressive headlines and practical reading text use different rules.
- 03 · Motion
Make discovery rewarding, and make leaving each discovered layer obvious.
- 04 · Mobile
Translate the intent of an interaction into a gesture that suits the device.
- 05 · Takeaways
A playful system earns its freedom through dependable controls.
The persistent work filter is a useful example: selecting E-commerce updated the URL, count and matching rows. Personality and a shareable, understandable state can live in the same component.
The September 2026 review prioritizes consistent modal exits, clearer field errors and incomplete content, including the sparse AI page and placeholder Cubby narrative. Its source coverage does not certify every interaction or device.
A playful system earns its freedom through dependable controls.
The reading room
Stay curious.
Go deeper.
Keep the surprises. Give them a consistent way in and out.
Based on research captured September 15–16, 2026. Interactive illustrations explain design principles; the linked reports contain the observations, screenshots, and source evidence.