Manual de Estilo

Guía de diseño, componentes y modelos de datos del Atlas de Bolsillo

Visual

Simbología

Componentes

Modelos

Diagramación

Paleta de Colores

Colores Base

#f8f4e8
Papel

#e8e0d0
Papel oscuro

#2c2416
Fondo oscuro

#8b7355
Borde/Acento

#d4c4a8
Texto claro

#333333
Texto

Colores Metro de Santiago

Línea 1 - #E42313
San Pablo ↔ Los Dominicos

Línea 2 - #FFBB00
Vespucio Norte ↔ La Cisterna

Línea 3 - #AC7C00
Los Libertadores ↔ Fernando Castillo Velasco

Línea 4 - #0066B3
Tobalaba ↔ Plaza de Puente Alto

L4A

Línea 4A - #00A0E1
Vicuña Mackenna ↔ La Cisterna

Línea 5 - #009E60
Plaza de Maipú ↔ Vicente Valdés

Línea 6 - #7B2B82
Cerrillos ↔ Los Leones

Tipografía

FONT-FAMILY

Courier Prime

The quick brown fox jumps over the lazy dog

ABCDEFGHIJKLMNOPQRSTUVWXYZ

0123456789

font-family: 'Courier Prime', 'Courier New', monospace;
letter-spacing: 1-2px para títulos
text-transform: uppercase para headers

Simbología del Mapa

Referencia visual de todos los símbolos utilizados en los mapas del Atlas

🚇 Transporte

Elemento	Color	Estilo
Línea de Metro	Color de línea (L1:#E42313, L2:#FFBB00, etc.)	Línea sólida, 3px
Estación de Metro	Color de línea con borde blanco	Círculo, 8px radio
Bus RED	#FF6B35 (naranja)	Línea sólida, 2px
Ciclovía	#32CD32 (verde)	Línea punteada, 2px

🛣️ Vialidad

Elemento	Color	Estilo
Autopista	#333 (gris oscuro)	Línea sólida, 3.5px
Avenida principal	#555 (gris medio)	Línea sólida, 2px
Calle	#888 (gris claro)	Línea sólida, 1px

🏔️ Naturaleza

Elemento	Color	Estilo
Río / Curso de agua	#6b9ac4 (azul)	Línea sólida, 2px
Parque / Área verde	#c8e0c8 (verde claro)	Polígono, opacidad 50%
Cerro (área)	#a0937d (café)	Polígono circular, opacidad 70%

🏢 Edificios y Uso de Suelo

Elemento	Color	Ejemplo
Aeropuerto	#e0e0e0 (gris claro)	Base Aérea El Bosque
Zona militar	#e8dcc8 (tan)	Escuela Militar
Zona industrial	#d8d8d8 (gris)	Plantas, fábricas
Hospital	#ffe8e8 (rosa claro)	Hospital Barros Luco
Universidad	#e8f0e8 (verde pálido)	Universidad de Chile
Comercio/Mall	#f0e8d8 (beige)	Costanera Center

📍 Delimitaciones

Elemento	Color	Estilo
Límite de comuna	Color del sector (variable)	Fill 15%, stroke 2.5px
Sector Oriente	#0066B3 (azul)	Fill 20%, stroke 2px
Sector Sur	#009E60 (verde)	Fill 20%, stroke 2px
Sector Norte	#E42313 (rojo)	Fill 20%, stroke 2px
Sector Poniente	#7B2B82 (morado)	Fill 20%, stroke 2px
Sector Centro	#8b7355 (marrón)	Fill 20%, stroke 2px

Estadísticas de Datos

4,897

Vías principales

2,552

Edificios/áreas

543

POIs

136

Estaciones metro

Líneas de metro

Comunas atlas

Componentes UI

Botones

Cards

Card Básica

Descripción corta →

Card Oscura

Variante oscura

Badges Metro

L1 L2 L4 L5

Hacer / No Hacer

✓ HACER

Usar tipografía monospace
Mantener paleta de colores sepia
Bordes sólidos de 2-3px
Texto en uppercase para headers
Espaciado consistente de letras
Iconos simples y pixelados

✗ NO HACER

Usar fuentes sans-serif modernas
Colores brillantes o neón
Sombras suaves o blur
Bordes redondeados excesivos
Gradientes complejos
Animaciones innecesarias

Modelos de Datos

Comuna

Campo	Tipo	Descripción	Ejemplo
id	string	Identificador único (código INE)	"13123"
codigo	string	Código oficial	"13123"
nombre	string	Nombre de la comuna	"Providencia"
region_id	string	ID de la región	"13"
region_nombre	string	Nombre de la región	"Metropolitana de Santiago"
center	float[]	Coordenadas del centroide [lng, lat]	[-70.61, -33.43]
bounds	float[]	Bounding box [minLng, minLat, maxLng, maxLat]	[-70.65, -33.46, ...]

Región

Campo	Tipo	Descripción	Ejemplo
id	string	Identificador único	"13"
codigo	string	Código oficial	"13"
nombre	string	Nombre de la región	"Metropolitana de Santiago"
center	float[]	Coordenadas del centroide	[-70.64, -33.45]
bounds	float[]	Bounding box	[...]

Línea Metro

Campo	Tipo	Descripción	Ejemplo
id	string	Identificador de línea	"L1"
nombre	string	Nombre completo	"Línea 1"
color	string	Color hexadecimal	"#E42313"
estaciones	int	Número de estaciones	27
terminales	string[]	Estaciones terminales	["San Pablo", "Los Dominicos"]

Estación Metro

Campo	Tipo	Descripción	Ejemplo
id	string	Identificador GTFS	"PE123"
nombre	string	Nombre de la estación	"Baquedano"
lineas	string[]	Líneas que pasan	["L1", "L5"]
lat	float	Latitud	-33.4372
lng	float	Longitud	-70.6349
combinacion	bool	¿Es estación de combinación?	true

Ruta de Bus

Campo	Tipo	Descripción	Ejemplo
id	string	Identificador GTFS	"101"
codigo	string	Código del servicio	"101"
nombre	string	Nombre descriptivo	"Maipú - La Florida"
tipo	string	Tipo de servicio	"troncal" \| "alimentador" \| "local"
color	string	Color asignado	"#00A0E1"
frecuencia_punta	int	Frecuencia hora punta (min)	5
frecuencia_valle	int	Frecuencia hora valle (min)	12

Paradero

Campo	Tipo	Descripción	Ejemplo
id	string	Código del paradero	"PA001"
nombre	string	Nombre o referencia	"Av. Providencia / Lyon"
lat	float	Latitud	-33.4312
lng	float	Longitud	-70.6123
rutas	string[]	Rutas que pasan	["101", "210", "D03"]
comuna_id	string	ID de la comuna	"13123"

GeoJSON Feature

Campo	Tipo	Descripción
type	string	Siempre "Feature"
geometry	object	Geometría (Point, LineString, Polygon)
properties	object	Propiedades del feature
properties.id	string	ID del objeto
properties.nombre	string	Nombre
properties.center	float[]	Centroide [lng, lat]
properties.bounds	float[]	Bounding box

Diagramación del Libro

Formato de Página

9 × 14 cm

Dimensiones: 9 × 14 cm

Margen: 1.5 cm

Resolución PDF: 150 DPI

Formato digital: ~340 × 529 px

Estructura del Libro

PORTADA

Atlas de
Bolsillo
2026

ÍNDICE

1. Comuna A
2. Comuna B
...

PÁG 1

Providencia
[Mapa]

PÁG 2

Santiago
[Mapa]

PÁG 3

Ñuñoa
[Mapa]

...

32 páginas
total

Anatomía de Página de Comuna

Título

Subtítulo región

Área del mapa

Stat 1

Stat 2

Nº página

1. Título: Nombre de comuna, uppercase, 16px

2. Subtítulo: Nombre de región, 10px, gris

3. Área de mapa: ~65% de la página

4. Estadísticas: Grid 2x1, iconos + datos

5. Número de página: Esquina inferior

Contenido del mapa:
- Límite de la comuna
- Líneas de metro (colores oficiales)
- Estaciones (puntos)
- Calles principales (futuro)
- Río Mapocho (futuro)
- Referencias geográficas (futuro)

Orden de Comunas

#	Código	Comuna	Zona
1	13123	Providencia	Oriente
2	13101	Santiago	Centro
3	13120	Ñuñoa	Oriente
4	13114	Las Condes	Oriente
5	13132	Vitacura	Oriente
... 32 comunas total