(Wabi) Studio® is a creative studio specialized in branding, creative direction, illustration & merch design, based in Guadalajara, Mexico.
This reference defines how the studio looks, moves and speaks across web, social, print and merch. Every value on this page comes from one token file, which also generates the CSS, the exports and DESIGN.md.
logo-mark.svg is the studio icon: favicon, app icon, social avatar, merch tags and sign-offs. Black on light and orange grounds, white on black.
Keep the orange squares free of other type, edges and images. For the wordmark and short logo, x is half the logo height. For the icon, x is a quarter of its width.
One statement per surface, set in uppercase display at the largest size the layout holds. Everything else steps down to small text. Nothing in between.
Black, white and grey carry most of every surface. Orange is a full field or a single signal. It is never tinted, faded or mixed.
Rules, indices, parentheses and staggered lines do the work ornament does elsewhere. No gradients, no drop-shadow cards, no stock icons.
Motion blur, grain, ink spread and illustration keep the grid from feeling clinical. Every project gets one imperfect element on purpose.
Text on orange is always black. Orange #ff5807 is the accent everywhere, including text. Orange Deep is a contrast fallback for orange text under 16px on light grounds only. Click any swatch to copy its hex.
Helvetica Now Display carries statements in uppercase. Funnel Sans carries everything people read. IBM Plex Mono labels data, indices and metadata.
A 4px base with large jumps at the top so whitespace reads as a decision. Sections sit 96px apart; components use steps 1 to 6.
Surfaces, images and inputs keep hard corners. Anything you can press is a pill or a circle. The system is flat; depth comes from color and rules.
Interface motion is short and decisive. The smear, taken from the studio's motion-blur portraits, is reserved for hero type and imagery. Reduced-motion settings remove both.
Each family is shown in a fixed Light and a fixed Dark panel. The panels ignore the page toggle.
24px grid, 2px stroke, square ends, sharp joins, no fills. Stroke stays 2px at 16, 20, 24 and 32px. Click an icon to copy its SVG. Files live in assets/icons.
Four screens from wabistudio.com.mx built only from the tokens and components above. P3 and P4 are written in Spanish for Mexican clients.
Playera de algodón grueso, serigrafiada a mano en Guadalajara. Asterisco al frente, (Wabi) Studio® en la espalda.
One style per reference image. Each prompt is a subject sentence plus a fixed style block. Change the subject; never edit the style block.
Use for: {{ s.use }}
All four are generated from tokens.json, the same file that feeds this page and DESIGN.md. The CSS tab shows tokens/tokens.css as shipped.
{{ expCode }}
The studio talks like a designer at the end of a good crit: clear about what works, generous with the reasons, never selling.
Verbs first, one idea per line. Name the deliverable, the date and the price.
State what the studio does. No hedging, no superlatives, no "passionate".
"We" for the studio, "I" when Daniel signs. Spanish words stay in Spanish. Dry humor is allowed in captions.
Spanish (Mexico) comes first. Most clients, proposals and local posts are in Spanish; English is for the international portfolio.