Volver al inicio
Style sheet · brand foundations

La paleta y tipografíade P&D Quilmes.

Hoja de diseño construida a partir del logotipo institucional. Define los tokens de color, tipografía, espaciado, radios y sombras que conforman el sistema visual.

Ver paletaTipografíaComponentes
Logo P&D Quilmes

Navy 900

#00004C

Brand 500

#1EBBFF

Scroll
01 · Color

Colores de marca

Dos colores extraídos directamente del logo. Definen identidad, jerarquía e interacción a lo largo del sistema.

Primary

Navy 900

#00004C

Color institucional. Fondo de superficies oscuras, textos sobre claro, bordes de énfasis y elementos primarios.

HEX
#00004C
RGB
0 0 76
CMYK
100 100 0 70

Accent

Brand 500

#1EBBFF

Acento vivo del logo. Llamadas a la acción, focos, gráficos y momentos de energía visual.

HEX
#1EBBFF
RGB
30 187 255
CMYK
88 27 0 0

Navy · escala

50 → 950
50#ECECF3
rgb(236 236 243)
100#C9C9DD
rgb(201 201 221)
200#9A9AC0
rgb(154 154 192)
300#6C6CA3
rgb(108 108 163)
400#3E3E85
rgb(62 62 133)
500#1F1F6A
rgb(31 31 106)
600#131358
rgb(19 19 88)
700#0A0A4F
rgb(10 10 79)
800#03034D
rgb(3 3 77)
900#00004C
rgb(0 0 76)
950#000033
rgb(0 0 51)

Brand · escala

50 → 950
50#E5F7FF
rgb(229 247 255)
100#C2ECFF
rgb(194 236 255)
200#95DEFF
rgb(149 222 255)
300#6CD1FF
rgb(108 209 255)
400#46C4FF
rgb(70 196 255)
500#1EBBFF
rgb(30 187 255)
600#00A3E6
rgb(0 163 230)
700#007FB3
rgb(0 127 179)
800#005C82
rgb(0 92 130)
900#003C55
rgb(0 60 85)
950#00263A
rgb(0 38 58)

Neutros

0 → 900
0#FFFFFF
rgb(255 255 255)
50#FAFAFB
rgb(250 250 251)
100#F3F3F6
rgb(243 243 246)
200#E5E5EC
rgb(229 229 236)
300#CDCDD6
rgb(205 205 214)
400#9999A6
rgb(153 153 166)
500#6E6E80
rgb(110 110 128)
600#4D4D5C
rgb(77 77 92)
700#34343F
rgb(52 52 63)
800#1F1F28
rgb(31 31 40)
900#0B0B14
rgb(11 11 20)

Semánticos

Success

#16A34A

Confirmaciones y estados positivos.

Warning

#F59E0B

Advertencias, atención requerida.

Danger

#EF4444

Errores y acciones destructivas.

Info

#1EBBFF

Mensajes informativos y enlaces.

02 · Tipografía

Tipografías

Tres familias de Google Fonts conviven en el sistema: una display para titulares, una sans para lectura y una mono para datos.

DisplayManrope

Aa

Geométrica, abierta, con personalidad. Para titulares, hero y números destacados.

300500600700800
BodyInter

Aa

Neutra, legible, optimizada para pantallas. Para párrafos, formularios e interfaz.

400500600700
MonoJetBrains Mono

Aa

Para datos tabulares, códigos, etiquetas y referencias técnicas.

400500700
DisplayQuilmes para todos.72px / 1
H1Programas y desarrollo48px / 1.1
H2Áreas estratégicas36px / 1.15
H3Trabajo conjunto con el municipio24px / 1.2
Body lgEl sistema visual se construye sobre identidad, claridad y consistencia.18px / 1.6
BodyTexto base para párrafos, descripciones y contenido de interfaz.16px / 1.6
CaptionEtiquetas, metadata y pies de información secundaria.13px / 1.5
03 · Espaciado

Escala de espaciado

Sistema basado en múltiplos de 4 px. Mantiene proporciones consistentes entre componentes.

space-14 px
space-28 px
space-312 px
space-416 px
space-624 px
space-832 px
space-1248 px
space-1664 px
space-2496 px
04 · Radios

Bordes redondeados

Suavidad consistente en superficies, controles y contenedores.

sm

6px

md

8px

lg

10px

xl

14px

2xl

18px

3xl

22px

full

full

05 · Sombras

Elevación

Capas de profundidad pensadas con el matiz navy para mantener coherencia con la marca.

shadow-xs

0 1px 2px rgba(0,0,76,0.06)

shadow-sm

0 2px 6px rgba(0,0,76,0.08)

shadow-md

0 8px 24px -8px rgba(0,0,76,0.18)

shadow-lg

0 20px 48px -16px rgba(0,0,76,0.25)

shadow-glow

0 0 0 6px rgba(30,187,255,0.18)

06 · Iconografía

Iconos

Familia Lucide. Geometría consistente, trazo de 1.5px y caja de 24px. Importados desde lucide-react para uso directo en JSX.

Estilo institucional

Iconos de marca sobre fondo navy con acento brand.

Tamaños

16 · 20 · 24 · 32 · 48
16px
20px
24px
32px
48px

Trazo (strokeWidth)

1
1.5
2
2.5

Biblioteca

48 iconos · ~5.800 disponibles
Navegación8
Home
Menu
Search
ChevronRight
ArrowRight
ArrowUpRight
LayoutGrid
Filter
Acción8
Plus
Pencil
Trash2
Copy
Download
Upload
Share2
Link2
Estado8
Check
X
CircleCheck
CircleAlert
TriangleAlert
Info
CircleHelp
Eye
Contenido8
File
Folder
Image
Calendar
Clock
Bookmark
Bell
Star
Personas y contacto8
User
Users
Settings
LogOut
Mail
Phone
Send
MessageCircle
Marca8
Sparkles
Zap
Shield
Globe
Building2
Briefcase
MapPin
Layers
Sólido

Icono blanco sobre fondo navy. Para acciones primarias y branding.

Acento

Tinta brand sobre fondo claro. Para destacar funcionalidades.

Sutil

Gris neutro con borde. Para acciones secundarias o utilitarias.

07 · Movimiento

Lenis + GSAP

Scroll suave global con Lenis y animaciones con GSAP / ScrollTrigger. Los dos van sincronizados a través del ticker de GSAP — patrón recomendado por la documentación oficial de Lenis.

A

Lenis · scroll suave global

lenis · scrollTo

El scroll del sitio entero usa Lenis con easing custom y duración 1.2s. Los botones invocan lenis.scrollTo() en el provider global.

B

Split text reveal

gsap · stagger

Diseñamosloquelaciudadnecesita.

gsap.from · ScrollTrigger · stagger 0.06

C

Proximity dock

quickTo · falloff

quickTo · distance falloff · power3.out

D

Botón magnético

quickTo · elastic

gsap.quickTo · elastic.out(1, 0.4)

E

Contadores animados

tween · power2.out
0

Vecinos alcanzados

0

Programas activos

0%

Cobertura barrial

F

Progreso scrub

ScrollTrigger · scrub
Progreso al hacer scrollscrub: true

La barra se vincula al scroll de la sección. Cuanto más bajás, más se llena.

H

Velocity skew

velocity · skewY
Identidad
Color
Tipografía
Iconos
Movimiento

ScrollTrigger.getVelocity · quickSetter skewY

I

Cursor preview

hover · quickTo
  • Programa Vecinalhover →
  • Plan de Desarrollohover →
  • Cultura y Deportehover →
  • Salud Cercanahover →
  • Obras y Espacioshover →

quickTo x/y/rotate · enter/leave fade

G

Marquee infinito

loop · ease none
IdentidadTipografíaColorIconosMovimientoComponentesEspaciadoSombrasIdentidadTipografíaColorIconosMovimientoComponentesEspaciadoSombrasIdentidadTipografíaColorIconosMovimientoComponentesEspaciadoSombrasIdentidadTipografíaColorIconosMovimientoComponentesEspaciadoSombras
08 · Componentes

Aplicaciones

Pequeñas piezas del sistema en acción. Usan los tokens previos sin variaciones ad-hoc.

Botones

primary / accent / outline / ghost
icon buttons

Badges

estado y categoría
ActivoNuevoCompletadoEn revisiónBloqueadoBorrador

Formulario

input + focus

Tarjeta

content card
Programa

Plan de Desarrollo Local

Iniciativa conjunta para fortalecer la economía y los servicios del distrito durante el ciclo 2026.

Estado · ActivoVer detalle