El producte
A la web, als documents i a la premsa. En el text s’escriu Urbaner, amb majúscula inicial; el logotip va en minúscula.
Manual de marca
Urbaner, la marca.
Com es fan servir el logotip, els colors, la lletra, les icones, les fotos i les paraules d’Urbaner. Per a dissenyadors, ajuntaments i premsa.
Primera versió, d’octubre de 2026. El símbol encara pot evolucionar: fes servir sempre els fitxers de les descàrregues d’aquesta pàgina.
01 · Introducció
Urbaner és el producte. L’app és del poble.
Urbaner és l’app que Zeba adapta a cada municipi. Cada Ajuntament posa a la seva app el nom que vol, el seu escut i el seu color; Urbaner és el nom del producte i la marca que el signa.
L’app de cada municipi
urbanerVilaclaraFontserena al dia
«Urbaner Vilaclara» o «Fontserena al dia»: el nom el tria l’Ajuntament, sense cap patró obligat. Tots dos municipis són ficticis.
El claim
Tot el municipi, a la teva butxaca.
- Escriu «Urbaner», no «URBANER», «UrBaner» ni «l’Urbaner».
- Quan parlis de l’app d’un poble, fes servir el nom que ha triat l’Ajuntament.
02 · Logotip
El símbol i el nom, sempre junts.
Tres cercles i «urbaner» en Manrope ExtraBold, en minúscula. El símbol manté sempre els seus tres colors; el nom va en tinta sobre fons clars i en el color del fons sobre la tinta.
Usos incorrectes
No el deformis.
No canviïs els colors del símbol.
No hi afegeixis ombres ni contorns.
No el posis sobre una foto atapeïda.
No escriguis el nom amb una altra lletra.
No el giris.
03 · Símbol i icona
Tres cercles, sempre en el mateix ordre.
Groc a dalt, jade a sota i un burdeus petit a la dreta. Es dibuixen sobre una quadrícula de 100: dos cercles de radi 25 i un de radi 14. L’ordre i les mides no canvien mai.
04 · Color
Cada color té una feina.
El jade per actuar, el groc per al que és d’avui, el burdeus només per a l’atenció. La tinta i el fons fan la resta. Cap estat no es distingeix només pel color: sempre hi ha una icona o un text.
- JadeAa · 4,94:1
- HEX
- #00805F
- RGB
- 0 128 95
Actuar i saber on ets: botons, enllaços, interruptors, la pestanya activa i «confirmat».
- GrocAa · 7,87:1
- HEX
- #FABD3F
- RGB
- 250 189 63
Crear i el que és d’avui: el botó +, avui, nou, en curs. Sempre amb text fosc; mai com a text.
- BurdeusAa · 5,39:1
- HEX
- #B74438
- RGB
- 183 68 56
Només l’atenció: avisos importants, sense llegir, errors. Mai decoratiu.
- TintaAa · 12,23:1
- HEX
- #0D371A
- RGB
- 13 55 26
El text, els títols i els blocs foscos.
- FonsAa · 12,23:1
- HEX
- #F2F7ED
- RGB
- 242 247 237
El fons de les pàgines i de l’app.
Tons suaus
Fons d’icones i franges. Mai per al text.
- Jade suau#CFF1E4
- Groc suau#FFF0C9
- Burdeus suau#FBE3DF
De suport
- Text secundari #4E6354
Dates, ajudes i textos de suport. - Ocre #855400
Text i icones de la família groga, sobre el groc suau. - Vores #E1E8DA
Línies d’1 px i separadors.
Parelles de color i contrast
Calculat amb la fórmula de les WCAG 2.2: el text normal demana 4,5:1 i el text gran o els gràfics, 3:1.
| Mostra | Parella | Contrast | AA |
|---|---|---|---|
| Blanc sobre jade: botons | 4,94:1 | AA | |
| Jade sobre el fons: enllaços | 4,54:1 | AA | |
| Tinta sobre groc: el botó + | 7,87:1 | AA | |
| Blanc sobre burdeus: «Important» | 5,39:1 | AA | |
| Tinta sobre el fons: text | 12,23:1 | AA | |
| Text secundari sobre el fons | 5,96:1 | AA | |
| Ocre sobre groc suau: icones i etiquetes | 5,68:1 | AA | |
| Fons sobre tinta: blocs foscos | 12,23:1 | AA | |
| Groc com a text: no | 1,69:1 | No | |
| Jade i burdeus: no es distingeixen pel color | 1,09:1 | No |
05 · Tipografia
Una sola lletra: Manrope.
Manrope, per als títols i per al text, de 200 a 800 de gruix. És de llicència oberta (SIL OFL) i la fan servir l’app i aquesta pàgina. La jerarquia la donen els rètols petits en majúscules, l’espai i les línies d’1 px, més que no pas les mides grans.
A B C Ç D E F G H I J K L L·L M N O P Q R S T U V W X Y Z
a b c ç d e f g h i j k l l·l m n o p q r s t u v w x y z
à é è í ï ò ó ú ü · 0 1 2 3 4 5 6 7 8 9 € « » ’
- Urbaner400
- Urbaner500
- Urbaner600
- Urbaner700
- Urbaner800
Bon dia, Marta
Reserva de pista de pàdel
Tall d’aigua demà al Barri de la Font
La col·lecció de fotos de la Festa Major ja és a l’ajuntament: passa-hi quan vulguis.
Avui · Divendres 16 d’octubre
06 · Iconografia
Icones de línia, del color de la seva feina.
Les icones són de Lucide: de línia, de 2 px, sobre una quadrícula de 24, i mai plenes. Van dins d’un cercle suau del color de la seva feina. Més endavant n’hi haurà de pròpies, fetes per a l’app.
- Inici
- Explora
- Avisos
- Perfil
- Què vols fer?
- Reserves
- Agenda
- Incidències
- Enllumenat
- Residus
- Bus a demanda
- Avís
- Emergència
- Fàcil de llegir
- La pestanya activa es marca amb el color, no amb una icona plena.
- Una icona sempre va amb un text o amb una etiqueta per als lectors de pantalla.
07 · Fotografia
Llocs del poble, amb llum natural.
Fotos càlides i properes de la plaça, els serveis i la vida de cada dia. Com a molt una foto per pantalla, de mida moderada i sense text a sobre.
La plaça de Vilaclara: la foto de l’inici. 
Fontserena: cada poble, la seva foto. 
Un servei: la pista de pàdel. 
Una activitat: el dinar de Festa Major. 
Una incidència: la foto que fa la veïna.
Aquestes fotos s’han generat amb IA per a la demostració: són llocs que no existeixen. Cada municipi hi posa les seves.
08 · To i veu
Parlem com un veí que t’ho explica.
Urbaner parla en català, clar i proper. Diu què passa i què pots fer, sense paraules d’oficina ni crits.
Català clar
Paraules de cada dia. Si una cosa té un nom tècnic i un de normal, el normal.
Frases curtes
Una idea per frase. Primer el que importa: què passa i què pots fer.
De tu
L’app parla de tu a cada veí i veïna. La pàgina per als ajuntaments, de vosaltres.
Verbs als botons
«Reservar», «Enviar la incidència», «Trucar a l’Ajuntament». Mai «D’acord» si es pot dir què fa.
| Així | Així no |
|---|---|
| Tall d’aigua demà al Barri de la Font | AVÍS IMPORTANT!!! Interrupció programada del subministrament |
| Reserva la pista en tres tocs | Procediment de sol·licitud de reserva d’instal·lacions esportives |
| No s’ha pogut enviar. Torna-ho a provar. | Error 500. Operació no completada. |
| Ja tens la reserva feta. La pots consultar al teu panell. | La seva sol·licitud ha estat processada correctament. |
09 · Endós de Zeba
Un producte de Zeba.
Urbaner porta la signatura de Zeba: «un producte de zeba», amb el logotip de Zeba, més petit que el d’Urbaner i a la dreta o a sota.
- L’endós sempre és més petit que el logotip d’Urbaner i en minúscula: «un producte de».
- El vermell de Zeba només és al logotip de Zeba; no entra mai a la paleta d’Urbaner.
10 · Descàrregues
Descàrregues.
Els fitxers originals. Fes servir el SVG sempre que puguis.
