Fino Trato – Website with online booking, CRM and a brand system
Website for an upholstery cleaning company in Brasília: a landing page with an interactive before-and-after, quote requests and online booking, and an admin panel with Google sign-in where the team follows leads and bookings and edits services, testimonials, photos and SEO. The brand was also created from scratch.
At a glance
- Senior Design Engineer
- My role
- Apr–Oct 2026
- Timeline
- Solo, from design to deploy
- Team
- pages
- 9
- database tables
- 11
- API routes
- 5
- commits
- 58
Visual identity
Logo and identity designed by me
Logo created in 2020. With the new website, the brand gained a digital palette, typography, voice and usage rules, documented in a guide.
Logo
Light backgroundDark backgroundConcept
A hexagon in two halves, blue and purple, frames a sofa with water drops: the service explained in the symbol itself. The name in a classic serif sets the careful tone of “fino trato” (fine care), and the line of services in spaced capitals closes the set in the same two colors.
Designed by Estevão Marques · 2020
Palette · click to copy
Headings
Fino Trato
Playfair Display
Display and headings, with italics for accents.
Interface and body
Agendar agora
Inter
Buttons, forms and body text.
Logo variations
Horizontal 
Vertical 
Symbol
Where the brand is used
Favicon
The hexagon alone, in the browser tab.
Site header, admin panel and sign-in
Horizontal logo in the landing page header and on the admin sign-in page.
Brand guidelines
A page with the logo, palette, typography, voice and usage rules, published with the website.
Do
- Use blue #1565C0 as the accent color for CTAs
- Pair Playfair Display (headings) with Inter (body)
- Use the blue→purple gradient on banners and highlights
- Keep the clear space around the logo
- Respect the minimum size of 120px / 32mm
- Use real photos of the service with before/after
Don't
- Don't distort the logo or apply unapproved effects
- Don't use it on low-contrast backgrounds
- Don't mix in other fonts without approval
- Don't use generic stock images
- Don't overuse ALL CAPS
Brand voice
Fino Trato communicates care, expertise and closeness. The language blends professionalism and warmth, like a specialist the family trusts.
Personality
- Trustworthy
- Professional
- Sophisticated
- Careful
- Welcoming
- Transparent
Tone
- Direct and clear
- Educational
- Close, not intimate
- Aspirational
- No technical jargon
The challenge
Fino Trato needed a website that would earn the trust of families in Brasília, show the results of the service and turn visits into requests. The team also needed to track quotes and bookings without relying on scattered WhatsApp conversations, and the brand didn't exist yet.
The solution
I created the brand from scratch (logo, palette, typography and usage guide) and built the website in Next.js: an interactive before-and-after, quote requests and online booking with date and time of day, with an email notification for every request. In the admin panel, with Google sign-in, the team follows leads and bookings in a CRM and edits services, testimonials, photos and SEO without a developer.
Custom admin panel
Admin panel built for Fino Trato
The website sends every request to the admin panel, and the team follows up, replies and edits the website content without depending on anyone.
The needQuote requests came in through the website and got lost in WhatsApp chats.
What was builtA CRM with the quote requests from the website, Pending, Contacted and Done statuses, and WhatsApp, email or delete on every row.
Fictitious dataThe needConfirming each booking without opening another app.
What was builtA bookings tab with date, time and the customer's note, and the email written and sent from the admin panel itself.
Fictitious dataThe needThe best proof of the service is the before and after.
What was builtThe before and after photos of the slider at the top of the website are replaced in the admin panel, with drag-and-drop upload.
Fictitious dataThe needThe services on offer change with the season.
What was builtServices with highlight, icon, order and an on/off switch, edited in the admin panel and live on the website instantly.
Fictitious dataOn the phone
The needFollowing the day's requests from a phone.
What was builtAn overview with total quotes and bookings, today's new ones and how many are awaiting contact.
Fictitious dataFrom quote request to finished job
CRM
Quotes and bookings from the website with Pending, Contacted and Done statuses, plus WhatsApp and email on every row.
Email from the admin panel
The team writes and sends the confirmation email without leaving the admin panel.
Services
Website services with highlight, icon, order and an on/off switch.
Testimonials
Testimonials with an adjustable photo, rating, neighborhood and service, each of which can be taken offline.
Before and after
The photos of the before-and-after slider at the top of the website, replaced by drag and drop.
Access
Sign-in with the authorized Google account, no password to keep.
Design in Figma
From design system to prototype
Technology
The tech stack
Next.js
High-performance framework with URLs that Google can index (SEO), server-side rendering and near-instant load times.
React
Component-based architecture for a smooth, interactive user experience without page reloads.
TypeScript
Strict static typing that catches errors before they reach production and keeps the application stable.
Tailwind CSS
A custom-built design system: a distinctive look, a consistent interface and small files for speed.
Prisma
Fast, safe database access that prevents injection vulnerabilities and protects the integrity of business data.
PostgreSQL
Database
Auth.js
Auth
Google Auth
Auth
Resend
Media / Email
Framer Motion
Micro-interaction engine that adds fluid, polished motion to every user interaction.
Vercel
Global edge cloud infrastructure, so the site loads in milliseconds wherever the visitor is.
Engineering
Technical highlights
Interactive before-and-after
Visitors drag the handle and see the same piece of upholstery before and after cleaning.
Online booking
Service, preferred date and time of day (morning, afternoon or evening) chosen on the website, with confirmation on WhatsApp and an email to the team for every request.
Lead and booking CRM
Every request enters the admin panel with a status, from first contact to service completed.
Admin panel with Google sign-in
Access restricted to the team, with no new password to remember.
Editable content
Services, testimonials, hero photos and SEO change through the admin panel, without a developer.
Brand created from scratch
Logo, palette, typography, tokens and usage guide documented and applied to the website.
The impact
Fino Trato now has a consistent brand across every channel and a website that takes requests and bookings at any time, with everything recorded in an admin panel the team runs on its own.
Next step
Want a brand and a website that bring in requests?
We create the brand, the website and the admin panel so your team can follow every request.