Guía Imagen Corporativa
Logotipo Horizontal
Versión Base
Ruta:
logo/universidad-surcolombiana.png
Medida: 347 x 90 px
Ruta:
logo/universidad-surcolombiana-m.png
Medida: 235 x 60 px
Ruta:
logo/universidad-surcolombiana-p.png
Medida: 172 x 44 px
Versión Ocre
Ruta:
ocre/universidad-surcolombiana.png
Medida: 347 x 90 px
Ruta:
ocre/universidad-surcolombiana-m.png
Medida: 235 x 60 px
Ruta:
ocre/universidad-surcolombiana-p.png
Medida: 172 x 44 px
Versión Negro
Ruta:
negro/universidad-surcolombiana.png
Medida: 347 x 90 px
Ruta:
negro/universidad-surcolombiana-m.png
Medida: 235 x 60 px
Ruta:
negro/universidad-surcolombiana-p.png
Medida: 172 x 44 px
Versión Blanco
Ruta:
blanco/universidad-surcolombiana.png
Medida: 347 x 90 px
Ruta:
blanco/universidad-surcolombiana-m.png
Medida: 235 x 60 px
Ruta:
blanco/universidad-surcolombiana-p.png
Medida: 172 x 44 px
Logotipo Vertical
Versión Base
Ruta:
logo/universidad-surcolombiana-v.png
Medida: 210 x 120 px
Ruta:
logo/universidad-surcolombiana-vm.png
Medida: 175 x 100 px
Ruta:
logo/universidad-surcolombiana-vp.png
Medida: 140 x 80 px
Versión Ocre
Ruta:
ocre/universidad-surcolombiana-v.png
Medida: 210 x 120 px
Ruta:
ocre/universidad-surcolombiana-vm.png
Medida: 175 x 100 px
Ruta:
ocre/universidad-surcolombiana-vp.png
Medida: 140 x 80 px
Versión Negro
Ruta:
negro/universidad-surcolombiana-v.png
Medida: 210 x 120 px
Ruta:
negro/universidad-surcolombiana-vm.png
Medida: 175 x 100 px
Ruta:
negro/universidad-surcolombiana-vp.png
Medida: 140 x 80 px
Versión Blanco
Ruta:
blanco/universidad-surcolombiana-v.png
Medida: 210 x 120 px
Ruta:
blanco/universidad-surcolombiana-vm.png
Medida: 175 x 100 px
Ruta:
blanco/universidad-surcolombiana-vp.png
Medida: 140 x 80 px
Imagen precarga
Ruta:
logo/precarga-usco.gif
Medida: 80 x 90 px
Ruta:
logo/precarga-usco2.gif
Medida: 80 x 90 px
Colores
Principales
Vino tinto: #8F141B
Gris: #4D626C
Ocre: #DFD4A6
Facultades
Facultad de Ciencias Jurídicas y Políticas
Facultad de Ciencias Exactas y Naturales
Facultad de Ciencias Sociales y Humanas
Facultad de Economía y Administración
Facultad de Educación
Facultad de Ingeniería
Facultad de Salud
Facultades
Logos Base
Ruta:
facultades/ciencias-exactas-y-naturales.png
Ruta:
facultades/ciencias-juridicas-y-politicas.png
Ruta:
facultades/ciencias-sociales-y-humanas.png
Ruta:
facultades/economia-y-administracion.png
Ruta:
facultades/educacion.png
Ruta:
facultades/ingenieria.png
Ruta:
facultades/salud.png
Favicon
Agregar en <head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
Fuente Tipográfica para web
Open Sans
Invocación de fuente desde google font:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
CSS:
body{ font-family: 'Open Sans', Arial, Helvetica, sans-serif; }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a pretium orci, id placerat ipsum. Mauris et ex a nisl gravida viverra ac in mi. Proin eu ex sit amet purus consectetur molestie. Donec quis consectetur eros. Curabitur metus quam, fringilla vel varius id, accumsan ut magna. Curabitur placerat accumsan erat a elementum. Aenean sapien massa, porta vitae ex et, rhoncus cursus ligula. Vestibulum a tincidunt risus, non mollis enim. Donec posuere eros nec sapien viverra, at facilisis mauris tincidunt.
Texto de ejemplo bold.
Texto de ejemplo itálico.
Texto de ejemplo bold e itálico.
Sed pellentesque massa a cursus posuere. Sed pulvinar auctor tortor, et interdum arcu rutrum pulvinar. Morbi quis metus odio. Cras ligula dui, efficitur vel dapibus sed, rhoncus sed nisi. Vestibulum et iaculis eros, vitae eleifend magna. Duis iaculis sem consequat, placerat lectus at, pellentesque nisi. Nulla facilisi.
Open Sans Condensed
Invocación de fuente desde google font:
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700" rel="stylesheet">
CSS:
body{ font family: Open Sans Condensed', Arial, Helvetica, sans-serif; }
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a pretium orci, id placerat ipsum. Mauris et ex a nisl gravida viverra ac in mi. Proin eu ex sit amet purus consectetur molestie. Donec quis consectetur eros. Curabitur metus quam, fringilla vel varius id, accumsan ut magna. Curabitur placerat accumsan erat a elementum. Aenean sapien massa, porta vitae ex et, rhoncus cursus ligula. Vestibulum a tincidunt risus, non mollis enim. Donec posuere eros nec sapien viverra, at facilisis mauris tincidunt.
Texto de ejemplo bold.
Texto de ejemplo itálico.
Texto de ejemplo bold e itálico.
Sed pellentesque massa a cursus posuere. Sed pulvinar auctor tortor, et interdum arcu rutrum pulvinar. Morbi quis metus odio. Cras ligula dui, efficitur vel dapibus sed, rhoncus sed nisi. Vestibulum et iaculis eros, vitae eleifend magna. Duis iaculis sem consequat, placerat lectus at, pellentesque nisi. Nulla facilisi.