Estúdio de tatuagem Demonstration project
Tinta Crua — tattoo studio with an original flash wall
A brutal editorial one-pager for a Porto tattoo studio: bone paper, absolute ink black and a single oxblood red, poster-size Archivo 900 type and CSS grain. The centrepiece is a filterable flash wall of ten original SVG line-art tattoo designs, each opening a detail sheet with size, placement and price range that feeds a working booking request.
feitura.pt/demo/tinta-crua — Live
A three-artist tattoo studio in Bonfim, Porto wants a site as uncompromising as its linework — but one a client's mother would still trust. It has to show the weekly flash wall with real drawings and honest price ranges, introduce the three residents and their styles, put hygiene front and centre (single-use needles, logged autoclave, REACH-compliant inks, licensed premises), take quote requests from a phone, and explain aftercare properly. No stock photos, no skulls-for-the-sake-of-skulls.
What's inside
- Bone paper, absolute ink black and a single oxblood red — a design system built entirely in scoped CSS with layered-gradient grain
- Brutal editorial type: Archivo 900 at poster sizes, tight leading, mono labels and a rotated coordinates tag
- Flash wall of ten original SVG line-art tattoo designs — fine-line botanical, traditional, geometric and lettering — drawn stroke by stroke
- Working style filter chips with a live design count and pinned, tilted cards that straighten on touch
- Flash detail sheet with size and placement pickers and a live EUR price range per design tier
- "Reserve this flash" carries the chosen design, size and artist straight into the booking request
- Three resident artist profiles with distinct SVG marks that pre-select the artist in the form
- Hygiene and ethics section: single-use needles, logged autoclave, REACH inks, licence, free consultation, 18+ policy
- Aftercare accordion, scroll-triggered reveals and a marquee ticker — all collapsing gracefully under prefers-reduced-motion
- Fully bilingual PT/EN with a native toggle, AA contrast on every tinted background and 44 px touch targets
Build log
- Art direction and tokens — bone/ink/oxblood palette, Archivo 900 poster scale, CSS grain studies, hero and ticker composition
- Drawing day — ten original SVG flash designs across four styles, plus the three artist marks, all as genuine stroke illustrations
- Flash wall — filter chips with live count, tilted pinned cards, detail sheet with size/placement pickers and tiered EUR price ranges
- Booking request wired to the flash sheet, artist profiles with pre-selection, hygiene section and aftercare accordion with full PT-PT copy
- EN locale pass, scroll reveals with reduced-motion fallbacks, contrast and touch-target audit, tablet and desktop recomposition
Stack
- Laravel
- Vue.js
- Inertia
- Tailwind CSS
- TypeScript
Lighthouse
94
Performance
95
Accessibility
100
Best practices
100
SEO