The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
Built the StupidFish Design System from the ground up and covering everything from color, typography, spacing, and components to comprehensive documentation.
Designed and documented for both web and mobile, creating a consistent, scalable foundation that makes product design and development faster and more cohesive.
Check out the full case study here →
Amazing work
This is Fire 🔥
Showing the same system across a laptop and tablet makes it feel properly built out. Clean work.
Great work 🔥
Building a complete design system from scratch is no small feat! Solid documentation and consistent component tokens make developer handoff so much smoother. Great execution.
A design system documented for both web and mobile is the part most people skip. The component docs are what make the system survive handoff, and it is good to see that effort turned into a case study.
Amazing!
great work
Really strong design system work. 👏 The consistency across web and mobile makes the whole product feel much more scalable and polished.
Can I see actual documentation/guide?
Fantastic
Creativity
Covering documentation alongside the components is a useful part of this system. For reusable website templates, keeping typography and spacing consistent in the implementation matters just as much as the Figma file. How do you keep your design tokens aligned between Figma and code as the system evolves?
Excellent Work, Divan. 👏
Really thorough system, nice job
Amazing 👏
how do you keep the spacing scale consistent across mobile and web versions?
beautifull presentation.
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
firendev: brand identity and website.
firendev is a video studio, and the name carries the whole brand. Fire, for the spark that starts every piece. Firenze, for a craft measured with proportion and geometry. Develop, in its two senses: developing film and developing software. One line holds it together: developed like software, finished like film.
Everything else grows from that. The spark is the dot of the i. The floor is the herringbone brick of Florence's Duomo. The mark is a camera frame waiting for its spark.
I'd love your honest take on the mark and the hero.
Full case study: https://contra.com/p/bWEMrvZW-firendev-brand-identity-and-website
It's a great design 🔥
I liked the animation in Hero; I'm curious which library you used.
From tattoo enquiry to confirmed appointment.
UNTITLED is a fictional independent tattoo studio in Amsterdam, built around a very real problem: tattoo bookings often live in DMs.
Clients ask about prices, availability, placement, references and custom ideas, while artists spend time managing the same back-and-forth manually.
UNTITLED brings that entire process into one connected experience.
The product has two sides:
CLIENT VIEW
Clients can browse available flash, place tattoos on a 3D body model, choose a date and time, complete a demo checkout, or submit a custom tattoo request with references, placement, size, budget and preferred availability.
ARTIST VIEW
The artist dashboard brings together bookings, payments, calendar availability, flash management, custom enquiries, quotes and activity in one place.
Both views are connected, creating a fully working end-to-end demo.
A flash booking updates the artist calendar and design availability, while a custom request appears in the dashboard for the artist to review, quote and turn into a confirmed appointment.
3D PLACEMENT
The booking flow includes an interactive 3D tattoo placement system, allowing clients to choose body type, skin tone and body area, then position, scale and rotate the selected tattoo before booking.
This replaces part of the placement conversation that would normally happen through messages.
CUSTOM REQUESTS
Not every tattoo starts from an existing design.
Clients can switch from FLASH to CUSTOM and send a structured enquiry with reference images and project details.
The artist can then review the request, create a quote and propose an appointment directly from the dashboard.
Custom request → quote → approval → booking.
FULLY RESPONSIVE
The complete experience is responsive across desktop, tablet and mobile, including the website, booking flow, 3D placement interface and artist dashboard.
DEMO
UNTITLED is a functional demo built for the Lovable Challenge.
Payments are simulated and the data is session-based so the full experience can be tested repeatedly, but the core product logic is fully interactive across both Client and Artist views.
BUILT WITH LOVABLE
I built UNTITLED entirely in Lovable, from the client-facing website to the booking logic, 3D placement experience and artist dashboard.
I also applied to the Lovable Partner Program during the challenge and I’m now officially a Lovable Partner!
Live website: https://untitledamsterdam.lovable.app/
X Post
Walkthrough video (for product and process) below.
Looks amazing, pretty clean, but a product menu in a tattoo studio feels kind of odd. But it looks nice..
My first time ever using Loveable and actually really loved the experience! Here is my submission:
Bent Brim Co. - Booking a hat shaping takes a dozen DMs a day; this turns it into a confirmed appointment in 7 steps, with no account needed.
Sol runs a one-person hat bar on South Congress in Austin. Every booking used to start with "can you fix my hat?" and then turn into a long back-and-forth. What's wrong with it? Felt or straw? What size? What crease? Can it be done by Saturday? Then there's the deposit, the reminder, and the no-shows. Things get way to complicated especially starting off as a mom and pop shop. With Tecova's right next store, this place has to stand out and be able to meet the demand!
Before: inquiries came in through texts, DMs and phone calls, and Sol pieced each booking together by hand.
After: the customer picks a service, shapes the crown with a drag handle or picks one of five classic creases, sets the brim and any branding, picks a time, enters a name and mobile number, and pays a $15 deposit. A Claim Ticket fills in live the whole way through, so they can see exactly what they're booking.
The shop's own rules do the scheduling. Felt needs a full day to dry, so any time that can't be ready by the customer's deadline never shows up. The $25 rush fee only appears when drying time actually allows it. Each booking lands on Sol's bench with a ticket number and pickup code. The customer gets a confirmation text, a calendar invite, and the option to reschedule or cancel without calling.
It works end to end on mobile and desktop, and it's built entirely in Lovable.