SERÁWeb studio
Client project · Brand identity & website

Miosotis Collazo

Social Work Services. Peace, unity and hope.

A licensed social worker’s brand and bilingual website: botanical symbol, palette, UI direction, logo entrance and a five-step session request.

Role
Brand, UX/UI design and development
Year
2026
Format
15 slides
01Project Brief

A calm, credible home for emotional care.

Read this slide as text

The client: Miosotis Collazo, a licensed social worker with a master’s degree and more than 15 years of experience, much of it with complex cases. She offers confidential emotional counseling by Zoom, Teams, Google Meet or phone. The challenge: feel warm without feeling soft, and professional without feeling clinical. Scope: strategy, moodboard, palette and type, symbol and logo system, social banners and a bilingual one-page website with a session request questionnaire. Success: someone who is struggling can ask for a session in about three minutes, on a phone, without sharing sensitive details.

02Brand Strategy

Calm, warm, professional and hopeful.

Read this slide as text

Positioning: for people carrying something heavy, a safe, confidential space with the experience to handle what is complex and the calm to make it feel possible. Personality: calm not clinical, warm not sugary, professional not cold, hopeful not naive. Voice in Spanish first.

03Moodboard

Botanical calm.

Read this slide as text

Leaves that open, morning light on linen, the words paz, unión y esperanza, the palette, a forget-me-not pattern, the seal, keywords (refugio, raíz, calma, florecer, escucha, confianza) and UI fragments. Built from shapes, color and type rather than stock photography.

04Color Palette

Baby green and baby pink, grounded in ink.

Read this slide as text

Hoja #8FBF8A, Pétalo #EEA8B4, Brote #BFDDB8, Rubor #F9D6DC, Tinta botánica #2F4639 (9.6:1 on cream), Salvia #47744F (5.1:1 on cream), Crema #FBF8F3, Menta #EEF5EC. The leaf colors are decorative and never carry text.

05Typography

A literary serif, a quiet geometric sans.

Read this slide as text

Cormorant Garamond for display and the name; Jost for text and tracked labels. H1 78/1.02, H2 58/1.06, body 17/1.65, labels 12 tracked.

06Symbol

Two leaves, one stem, and her name in bloom.

Read this slide as text

A 2D plant: green leaf on the left and pink leaf on the right, growing from one node like open arms (unity). The stem ends in a five-petal forget-me-not, called Miosotis in Spanish, so the symbol carries her name (hope). A ground line keeps it rooted.

07Logo System

One mark, five lockups.

Read this slide as text

Horizontal (primary), vertical, reverse on ink, seal for avatars and the symbol alone, delivered in Spanish and English.

08Applications

Ready for the places people meet her.

Read this slide as text

Website and social banner, Facebook cover, LinkedIn banner and a profile photo seal.

09UI Design Direction

Soft shapes, slow motion, clear next steps.

Read this slide as text

Breathing room, rounded not bubbly, motion that reassures, help always visible. Components: pill buttons, platform chips, option cards, selection pills and a crisis note.

10Logo Entrance

The plant grows before the name appears.

Read this slide as text

Ground line at 0.5 s, stem at 0.9 s, leaves open at 1.3 s, the flower blooms at 1.8 s, the name wipes in at 2.5 s, then a gentle sway. CSS only, about three seconds, reduced motion respected.

11Website

One page, from trust to a request.

Read this slide as text

Hero with the growing logo, credentials, peace unity and hope, emotional services, how it works with Zoom, Teams, Google Meet and phone, about, confidentiality, questions and a final call to action with crisis lines.

12Session Request UX

Five short steps, no sensitive details.

Read this slide as text

Who it is for, what to work on (optional), how and when, contact and consent, review and thank you. Nothing is stored in the browser; requests go by email or WhatsApp once connected.

13Mobile & Bilingual

Built for a phone, in Spanish first.

Read this slide as text

The seal leads on mobile, the form becomes a bottom sheet, and an ES/EN switch translates everything, including the form and crisis lines.

14Care, Accessibility & Credits

Designed with the same care as the service.

Read this slide as text

Text contrast 5.1:1 or higher, focus kept inside the form, labeled fields, reduced motion. Confidentiality stated within the limits of law and ethics; crisis lines 911, 988 and Línea PAS on every path. Brand, UX/UI design and development by Soelys Muñoz, SERÁ AI Services. Client: Miosotis Collazo, Trabajadora Social Licenciada.