Ciao!Hello!

Ti diamo il benvenuto nelle brand guidelines di YouDoToo. L'autonomia non sta mai ferma — e nemmeno noi. Queste linee guida tengono insieme tutto ciò che comunichiamo, ovunque: dall'app al post social, dalla brochure al video. Se non trovi quello che ti serve, scrivici. Welcome to the YouDoToo brand guidelines. Independence never stands still — and neither do we. These guidelines unify everything we communicate, everywhere: from the app to a social post, from a brochure to a video. If you can't find what you need, reach out.

L'autonomia si costruisce insiemeIndependence is built together

Chi siamo, da dove veniamo e cosa ci muove. È la base di ogni cosa che comunichiamo.Who we are, where we come from and what drives us. It's the foundation of everything we communicate.

La nostra storiaOur story

Tutto nasce da un'intuizione: un assistente basato sull'intelligenza artificiale capace di trasformare le difficoltà quotidiane in sfide accessibili, con un piccolo aiuto, insieme e un passo alla volta. L'idea prende forma a Padova dall'esperienza di Guido Marangoni, ingegnere informatico e papà di una ragazza con sindrome di Down, e ottiene riconoscimenti a livello mondiale, da Google fino alle Nazioni Unite. It all begins with an intuition: an assistant that, powered by artificial intelligence, can turn everyday difficulties into accessible challenges — with a small nudge, together and one step at a time. The idea takes shape in Padua from the experience of Guido Marangoni, software engineer and father of a young woman with Down syndrome, and earns worldwide recognition, from Google to the United Nations.

Quel prototipo evolve in YouDoToo — app e piattaforma completa — grazie alla forza di un incontro. Quello con Giacomo Sergio, ingegnere e papà di una bambina con sindrome di Down: due padri prima ancora che due tecnici, uniti da una motivazione che nasce dall'esperienza diretta di essere genitori e caregiver. A loro si affiancano Stefano Rognini, avvocato impegnato nel terzo settore, e il team di sviluppo di Wondersys. È il dialogo costante con enti nonprofit, associazioni e cooperative a dare al progetto radici concrete e a tenerlo ancorato ai bisogni reali delle persone. That prototype grows into YouDoToo — a complete app and platform — thanks to the power of an encounter: the meeting with Giacomo Sergio, engineer and father of a girl with Down syndrome — two fathers before being two technologists, driven by a motivation rooted in the direct experience of being parents and caregivers. They are joined by Stefano Rognini, a lawyer active in the third sector, and the Wondersys development team. It is the constant dialogue with nonprofit organizations, associations and cooperatives that gives the project real roots and keeps it anchored to people's real needs.

Grazie alla collaborazione di decine di associazioni, cooperative, scuole e aziende, YouDoToo cresce ed è in continua evoluzione per rispondere alle esigenze delle persone con disabilità intellettiva, dei caregiver e di tutte le persone e professioni che si prendono cura. Thanks to the collaboration of dozens of associations, cooperatives, schools and companies, YouDoToo grows and keeps evolving to meet the needs of people with intellectual disabilities, of caregivers, and of everyone and every profession that cares.

I tre pilastriThe three pillars

Il logoThe logo

Il wordmark "YouDoToo" con i tre puntini in diagonale a fianco e il payoff. È la nostra firma: come appare — minuscolo su uno schermo o enorme su un cartellone — è come le persone ci riconoscono e si fidano di noi.The "YouDoToo" wordmark with the three diagonal dots alongside it and the payoff. It's our signature: how it appears — tiny on a screen or huge on a billboard — is how people recognize and trust us.

• Posizione default: in basso a destra, dimensione piccola o media.Default position: bottom-right, small or medium size.
• Solo file ufficiali dalla cartella asset. Non ricreare il wordmark a mano.Official files only from the asset folder. Never recreate the wordmark by hand.
• Formati: PNG e SVG vettoriale (blu/bianco). Per stampa e grandi formati usa l'SVG.Formats: PNG and vector SVG (blue/white). For print and large sizes use the SVG.
• Puntini attaccati: i 3 puntini diagonali fanno parte del logo. Nella stessa pagina del wordmark non vanno mai staccati come elemento a sé.Dots stay attached: the 3 diagonal dots are part of the logo. On the same page as the wordmark they must never float as a separate element.
• Font: il wordmark è composto in Inter Bold.Font: the wordmark is set in Inter Bold.

Dimensione minimaMinimum size

28 px schermoscreen

18 mm stampaprint

Il logo deve restare sempre leggibile. Mai usarlo sotto queste misure.The logo must always stay legible. Never use it below these sizes.

• Posizione: in una composizione, metti il logo in basso a destra (default) o in uno dei quattro angoli. Lascialo respirare, non riempire tutto.Placement: in a composition, place the logo bottom-right (default) or in one of the four corners. Let it breathe, don't crowd it.
• Rotazione: sempre orizzontale, a 0°. Nessuna rotazione, nessuna inclinazione (l'inclinazione esiste solo nei 3 puntini, che sono già nel file).Rotation: always horizontal, at 0°. No rotation, no skew (the tilt lives only in the 3 dots, already baked into the file).

Lockup & IconaLockup & Icon

Come logo e DoT convivono, e come ci presentiamo dove ci ospitano gli altri: store, social, comunicati, spazi di partner.How the logo and DoT coexist, and how we show up where others host us: stores, social, press, partner spaces.

L'icona è i 3 pallini pieni con la stessa inclinazione del logo (~24°, pink→teal→yellow). È la nostra faccia su store e social: deve restare riconoscibile anche piccolissima. Export pronto per iOS, Android e favicon.The icon is the 3 solid dots at the same incline as the logo (~24°, pink→teal→yellow). It's our face on stores and social: it must stay recognizable even very small. Export ready for iOS, Android and favicon.

La versione ufficiale logo + DoT, da usare con terze parti (comunicati, conferenze, store), dove la riconoscibilità di DoT aiuta. Posa "saluto", DoT sempre a sinistra del wordmark.The official logo + DoT version, for use with third parties (press, conferences, stores), where DoT's recognizability helps. "Greeting" pose, DoT always to the left of the wordmark.

Versione impilata (DoT sopra, wordmark sotto) per spazi quadrati o verticali — store, profili, formati alti.Stacked version (DoT on top, wordmark below) for square or tall spaces — stores, profiles, vertical formats.

PNG con sfondo trasparente. Area di rispetto: almeno l'altezza di un puntino del logo su ogni lato.Transparent-background PNG. Clear space: at least one logo-dot height on every side.

Nei profili social usa sempre l'icona a 3 pallini, mai il wordmark o il lockup (illeggibili da piccoli). Su avatar quadrato i pallini possono arrivare quasi ai bordi; su avatar cerchio lascia più margine così non vengono tagliati.On social profiles always use the 3-dot icon, never the wordmark or the lockup (unreadable when small). On a square avatar the dots can reach close to the edges; on a circle avatar leave more margin so they aren't clipped.

PaletteColor palette

Sfondi chiari, accenti, testo sempre ad alto contrasto. Niente saturazioni eccessive.Light backgrounds, accents, always high-contrast text. No over-saturation.

I tre colori dei puntini. Si usano solo come cerchi decorativi, mai per altre forme.The three dot colors. Used only as decorative circles, never for other shapes.

CaratteriTypefaces

Due font Google Fonts gratuiti: Poppins per titoli, Inter per il testo. Il logo è composto in Inter Bold: Inter è quindi anche il font del wordmark.Two free Google Fonts: Poppins for headings, Inter for body. The logo is set in Inter Bold, so Inter is also the wordmark font.

ImmaginiImagery

La direzione visiva delle foto e delle scene: luce, contesto, emozione. La persona è sempre soggetto attivo, mai oggetto di un problema.The visual direction for photos and scenes: light, context, emotion. The person is always an active subject, never the object of a problem.

Brand Family

Come si chiamano e come si presentano i pezzi del mondo YouDoToo: l'app, la piattaforma, le feature e le collaborazioni con gli enti.How the pieces of the YouDoToo world are named and presented: the app, the platform, the features and the partnerships with organizations.

Voce & TonoVoice & Tone

Umano, calmo, non giudicante. Empatia senza pietismo, mai medicale.Human, calm, non-judgmental. Empathy without pity, never medical.

Grammatica & StileGrammar & Style

Le regole pratiche di scrittura: come scriviamo i nomi, i numeri, la punteggiatura, le emoji. Coerenza nei dettagli.The practical writing rules: how we write names, numbers, punctuation, emoji. Consistency in the details.

Copy & MessaggiCopy & Messaging

Frasi pronte all'uso, coerenti con la voce. Riutilizzale così come sono.Ready-to-use lines, consistent with the voice. Reuse them as they are.

DoT

Il nome si scrive DoT — maiuscola, minuscola, maiuscola.The name is written DoT — uppercase, lowercase, uppercase.

DoT è i tre puntini del logo che prendono vita: testa rosa, corpo teal, pancia gialla, gambe blu. Stile 3D morbido e texturizzato.DoT is the three logo dots brought to life: pink head, teal body, yellow belly, blue legs. Soft, textured 3D style.

Personalità: calmo, amichevole, incoraggiante. Mai giudicante, mai paternalistico.Personality: calm, friendly, encouraging. Never judgmental, never patronizing.

Generate a partire dalla reference ufficiale, identiche nei colori e nei tratti. PNG con sfondo trasparente, pronte per qualsiasi fondo.Generated from the official reference, identical in colors and traits. Transparent-background PNGs, ready for any background.

DoT Flat — variante UIUI variant

La versione piatta di DoT per l'interfaccia: stesso personaggio, stile flat, pensata per app, tutorial e aiuti. Deriva dalla 3D, non è un personaggio nuovo.The flat version of DoT for the interface: same character, flat style, made for app, tutorials and help. Derived from the 3D, not a new character.

Stesso personaggio, una posa per intento. PNG trasparente, pronte per qualsiasi fondo (chiaro o scuro).Same character, one pose per intent. Transparent PNG, ready for any background (light or dark).

Master vettoriale SVG (colori palette esatti) + PNG trasparenti, tutti nello zip.Vector SVG master (exact palette colors) + transparent PNGs, all in the zip.

Il mondo di DoTDoT's world

DoT non vive nel vuoto: ha un mondo coerente fatto di ambienti, oggetti e situazioni quotidiane. Qui definiamo dove e come vive DoT, con uno stile visivo coerente.DoT doesn't live in a void: it has a coherent world of environments, objects and everyday situations. Here we define where and how DoT lives, with a coherent visual style.

Persone & FotoPeople & Photography

La persona è sempre soggetto attivo, mai oggetto del problema.The person is always an active subject, never the object of a problem.

Illustrazioni & Immagini AIIllustration & AI imagery

Approccio composite: sfondo generato con AI, asset originali (DoT e logo) sovrapposti — mai ri-renderizzati.Composite approach: AI-generated background, original assets (DoT and logo) layered on top — never re-rendered.

• DoT e logo restano i PNG ufficiali, intattiDoT and logo stay the official PNGs, intact
• Mai più di un dispositivo per scena (uno smartphone oppure un laptop)Never more than one device per scene (one smartphone or one laptop)
• Sfondi chiari, niente saturazione eccessivaLight backgrounds, no over-saturation
• Niente loghi o brand di terziNo third-party logos or brands

Layout & formati socialLayout & social formats

Come comporre un contenuto: griglia, respiro, un messaggio alla volta. E i formati standard per ogni canale.How to compose a piece: grid, breathing room, one message at a time. Plus the standard formats for each channel.

• Un messaggio per visual. Una headline, una CTA, molto bianco.One message per visual. One headline, one CTA, lots of white.
• Logo in basso a destra; payoff agganciato al logo; DoT presente ma mai dominante.Logo bottom-right; payoff attached to the logo; DoT present but never dominant.
• Un solo accento colore per visual. Max un dispositivo.A single color accent per visual. Max one device.

Motion & AnimazioneMotion & Animation

Come si muovono DoT, le transizioni e i video. Il movimento deve essere calmo e prevedibile, mai brusco.How DoT, transitions and videos move. Motion should be calm and predictable, never abrupt.

SuonoSound

L'identità sonora: notifiche, conferme, eventuale firma audio. Gentile e non invadente, come la voce.The sonic identity: notifications, confirmations, a possible audio signature. Gentle and unobtrusive, like the voice.

UI / ProdottoProduct

Gli screen dell'app sono immutabili: usa solo gli screenshot ufficiali, dentro un mockup di smartphone neutro. Mai ridisegnare la UI.App screens are immutable: use official screenshots only, inside a neutral smartphone mockup. Never redesign the UI.

Iconografia & PuntiniIcons & Dots

L'elemento grafico firma del brand. Solo cerchi, mai altre forme. Solo i 3 colori del logo. Pochi e sobri.The brand's signature graphic element. Circles only, never other shapes. Only the 3 logo colors. Few and restrained.

Set ufficiale: linea arrotondata, stroke ~1.8px, terminazioni e angoli morbidi, griglia 24px, tinta Ink. Coerenti col logo e con Poppins.Official set: rounded line, ~1.8px stroke, soft caps and corners, 24px grid, Ink color. Consistent with the logo and Poppins.

Loader — Three DotsThree Dots Loader

L'animazione di caricamento ufficiale: tre punti che pulsano in sequenza, da sinistra a destra. È lo standard per segnalare caricamenti, query in tempo reale e passaggi asincroni in tutte le interfacce.The official loading animation: three dots pulsing in sequence, left to right. It's the standard for signaling loading, real-time queries and async steps across all interfaces.

<!-- HTML -->
<div class="ydt-loader-container">
  <div class="ydt-dot ydt-dot-1"></div>
  <div class="ydt-dot ydt-dot-2"></div>
  <div class="ydt-dot ydt-dot-3"></div>
</div>

<style>
.ydt-loader-container{
  display:flex; align-items:center; justify-content:center;
  gap:10px; padding:16px 0;
}
@keyframes ydtDotPulse{
  0%,100%{ transform:scale(0.7); opacity:0.35; }
  50%   { transform:scale(1.25); opacity:1; }
}
.ydt-dot{
  width:14px; height:14px; border-radius:50%;
  display:inline-block;
  animation:ydtDotPulse 1.2s infinite ease-in-out;
}
.ydt-dot-1{ background-color:#FB3D5E; animation-delay:0s;   } /* Pink */
.ydt-dot-2{ background-color:#27CDCC; animation-delay:0.2s; } /* Teal */
.ydt-dot-3{ background-color:#FBBA2D; animation-delay:0.4s; } /* Yellow */
</style>

Accessibilità: aggiungi role="status" e aria-label al contenitore; rispetta prefers-reduced-motion riducendo o fermando la pulsazione.Accessibility: add role="status" and aria-label to the container; respect prefers-reduced-motion by reducing or stopping the pulse.

AccessibilitàAccessibility

Per YouDoToo l'accessibilità cognitiva viene prima di tutto: i nostri utenti hanno disabilità intellettiva. Base di riferimento: W3C COGA, WCAG 2.1 AA e linee guida mobile.For YouDoToo, cognitive accessibility comes first: our users have intellectual disabilities. Baseline: W3C COGA, WCAG 2.1 AA and mobile guidelines.

Il framework W3C "Making Content Usable" per disabilità cognitive e dell'apprendimento. È la nostra bussola.The W3C "Making Content Usable" framework for cognitive and learning disabilities. This is our compass.

• Una cosa alla volta: una sola azione e un solo messaggio per schermata.One thing at a time: a single action and a single message per screen.
• Parole semplici: frasi brevi e concrete; ogni icona ha sempre un'etichetta di testo.Plain words: short, concrete sentences; every icon always has a text label.
• Passi visivi: checklist e passaggi numerati; mostra sempre a che punto sei.Visual steps: checklists and numbered steps; always show where you are.
• Niente memoria: ricorda tu i passaggi, non chiederli all'utente.No memory load: the app remembers the steps, it doesn't ask the user to.
• Errori gentili: previeni l'errore; se accade, spiega con parole calme cosa fare.Gentle errors: prevent mistakes; if one happens, calmly explain what to do.
• Prevedibilità: stessi posti, stessi nomi, stesse icone. Aiuto sempre raggiungibile (DoT può guidare).Predictability: same places, same names, same icons. Help always reachable (DoT can guide).
• Personalizzazione: testo, ritmo e complessità adattabili alla persona.Personalization: text, pace and complexity adaptable to the person.

Lo standard europeo di Inclusion Europe «Informazioni per tutti» per rendere l'informazione facile da leggere e capire per le persone con disabilità intellettiva. È il nostro riferimento per ogni testo rivolto agli utenti.Inclusion Europe's European standard "Information for all" for making information easy to read and understand for people with intellectual disabilities. It's our reference for any text aimed at users.

• Bersagli tap ≥ 44×44 px (~9 mm), con spazio tra loro.Tap targets ≥ 44×44 px (~9 mm), with space between them.
• Contrasto AA: testo ≥ 4.5:1 (≥ 3:1 per testo grande e icone).AA contrast: text ≥ 4.5:1 (≥ 3:1 for large text and icons).
• Testo ridimensionabile, corpo ≥ 16 px; niente testo dentro le immagini.Resizable text, body ≥ 16 px; no text inside images.
• Mai solo colore o solo gesto: sempre un'alternativa semplice (un tap).Never color- or gesture-only: always a simple alternative (a tap).
• Entrambi gli orientamenti, zoom non bloccato, compatibile con screen reader e impostazioni di accessibilità del sistema.Both orientations, zoom not blocked, compatible with screen readers and OS accessibility settings.

Molte persone — incluse persone autistiche, con epilessia fotosensibile o facili al sovraccarico sensoriale — possono essere disturbate da colori troppo accesi, movimento o stimoli intensi. La nostra estetica calma aiuta già; queste regole la rendono esplicita.Many people — including autistic people, those with photosensitive epilepsy or prone to sensory overload — can be disturbed by over-bright colors, motion or intense stimuli. Our calm aesthetic already helps; these rules make it explicit.

Verifica di contrasto (WCAG AA = 4.5:1 per il testo) e di saturazione dei nostri colori. In breve: il testo va solo in Ink, Text o Muted; gli altri colori sono per accenti, titoli grandi o chiaro-su-scuro. I 3 puntini sono molto saturi: solo piccoli accenti.Contrast (WCAG AA = 4.5:1 for text) and saturation check of our colors. In short: text only in Ink, Text or Muted; the others are for accents, large headings or light-on-dark. The 3 dots are highly saturated: small accents only.

• W3C COGA — Cognitive Accessibility: w3.org/WAI/cognitive
• W3C — Making Content Usable (COGA): w3.org/TR/coga-usable
• W3C — Mobile Accessibility: w3.org/WAI/standards-guidelines/mobile
• BBC — Mobile Accessibility Guidelines: bbc.co.uk/accessibility
• Inclusion Europe — Easy-to-Read: inclusion-europe.eu/easy-to-read
• Inclusion Europe — «Informazioni per tutti» (standard, PDF IT)"Information for all" (standard, IT PDF): IT_Information_for_all.pdf

Download & Press KitDownloads & Press Kit

Loghi, icone, asset di DoT e screen dell'app: tutti i file pronti all'uso, in un posto solo.Logos, icons, DoT assets and app screens: all ready-to-use files, in one place.

Legal & Safety

YouDoToo è uno strumento di supporto all'autonomia, non un dispositivo medico. Il copy descrive la funzione, non un effetto sulla persona.YouDoToo is a tool to support independence, not a medical device. Copy describes the function, not an effect on the person.

YouDoToo · Brand Guidelines · Documento di lavoro — v0.27 · 22 giugno 2026Working document — v0.27 · June 22, 2026