Pittahaya · brand and design studio
We don't just talk about it. We leave it open.
Anyone can claim to have a design system. We give you the switch to audit ours — and five brand worlds, built and running, so you can see exactly what grows from it.
--t-display · Fraunces 300 · tracking −.045em
Five worlds. None is a mockup.
Each card is rendered with its world's real tokens: its exact palette, typography, and grid. These are not screenshots — it is the same system, rendered here. And every card opens the fully working demo.
.semilla · custom properties --m-* per world
All-intra codec · 2.6 ms seek Luxury real estate 2026 Aurelia Villa Mare Alta. A first-person journey from the entrance to the infinity pool, driven by your scroll. Fraunces · Cormorant Open the world → Sector-based architecture
Navigable institutional archive Private capital 2026 Atlas An operating group spanning energy, mining, maritime, and infrastructure. Institutional restraint without a single decorative concession. Cormorant Garamond · Inter Open the world → Real commerce · 5 pages
Cart that persists across navigation Luxury commerce 2026 Origen 0° Zero-latitude Ecuadorian chocolate. A tasting-box configurator and a cart that persists across pages. Cormorant Garamond · Inter Open the world → Live constellation
Keplerian propagation · real eclipses Orbital infrastructure 2026 Orbital Low-Earth-orbit computing. The telemetry is calculated, not invented: altitudes and speeds match the launch manifest. Space Grotesk · JetBrains Mono Open the world → Draggable turntable
Gesture-driven image sequence Automotive 2026 Veloce The launch of a hyper-GT. A silhouette you rotate with a finger and an exploded view that opens in motion. Sora · JetBrains Mono Open the world → This very page
Press X and look inside The studio Now Pittahaya The sixth card is you looking at it. This page also runs on the system — and lets you open it. Fraunces · Space Grotesk View the system →
What holds the five worlds together.
None of those worlds started from scratch. They all emerge from the same decisions: a type scale, spacing rhythm, grid, and color rule. Here it is, live — and X-Ray lets you see it over every part of the page.
One axis: editorial serif for what moves, grotesque for what informs, and monospaced for what measures.
Black and ivory do 95% of the work. Fruit and lime appear only where attention belongs. An accent used too often stops being an accent.
Every spacing value is a multiple of eight. It sounds rigid; that is exactly what makes five different worlds feel made by the same hand.
--ritmo: 8px · 8 · 16 · 24 · 40 · 56 · 72 · 88 · 96
Twelve columns because they divide cleanly into 2, 3, 4, and 6. The margin breathes with the viewport; the gutter does not. Turn on X-Ray and you will see the grid fall across everything else.
--col: 12 · --gutter: clamp(12,1.6vw,24) · --margen: clamp(20,5vw,72) · --maxw: 1460
The grid is not portfolio decoration: it is why a client can request a new page two years later and have it fit without debate.
The letter
Nearly all brand work is judged by a beautiful presentation no one opens again. We prefer to deliver something that works, can be measured, and can be audited. If the system is good, it holds up when you look inside.— The studio · Pittahaya, Ecuador
Brand & Design
One idea. A system that supports it.
Strategy, identity, design, and technology in complete brand worlds — built to outlast the presentation.