Design System
Manual de estilo web Ikaslan Bizkaia
Aa
TIPOGRAFÍA
La forma en que presentas el texto en tu página web para que sea fácil de leer y estéticamente agradable.
Titular 1 <h1>
- font-family: Raleway
- font-size: 38px
- line-height: 46px
- vertical-align: baseline
- letter-spacing: normal
- word-spacing: 0px
- font-weight: 400
- font-style: normal
- font-variant: normal
- text-transform: none
- text-align: start
- text-indent: 0px
Titular 2 <h2>
- font-family: Raleway
- font-size: 36px
- line-height: 46px
- vertical-align: baseline
- letter-spacing: 1px
- word-spacing: 0px
- font-weight: 400
- font-style: normal
- font-variant: normal
- text-transform: none
- text-align: center
- text-indent: 0px
Titular 3 <h3>
- font-family: Raleway
- font-size: 20px
- line-height: 30px
- vertical-align: baseline
- letter-spacing: normal
- word-spacing: 0px
- font-weight: 700
- font-style: normal
- font-variant: normal
- text-transform: none
- text-align: center
- text-indent: 0px
Párrafo <p>
- font-family: Raleway
- font-size: 16px
- line-height: 27px
- vertical-align: baseline
- letter-spacing: normal
- word-spacing: 0px
- font-weight: 400
- font-style: normal
- font-variant: normal
- text-transform: none
- text-align: center
- text-indent: 0px
Botón <a>
- font-family: Raleway
- font-size: 16px
- line-height: normal
- vertical-align: middle
- letter-spacing: normal
- word-spacing: 0px
- font-weight: 400
- font-style: normal
- font-variant: normal
- text-transform: none
- text-align: center
- text-indent: 0px
- font-family: Raleway
- font-size: 14px
- line-height: 60px
- vertical-align: baseline
- letter-spacing: normal
- word-spacing: 0px
- font-weight: 600
- font-style: normal
- font-variant: normal
- text-transform: uppercase
- text-align: right
- text-indent: 0px
- color: #2c4869
- background-color: #eeffd5
- font-family: ubuntu
- font-size: 16px
- line-height: 22px
- vertical-align: baseline
- letter-spacing: 0.5px
- word-spacing: 0px
- font-weight: 400
- font-style: normal
- font-variant: normal
- text-transform: none
- text-decoration: underline solid rgb(99, 115, 129)
- text-align: start
- text-indent: 0px
COLOR
Los colores que complementan la pagina web
Ikas
- HEX: #20558a
- RGBA: rgba(32, 85, 138, 1)
Ikaslan
- HEX: #029283
- RGBA: rgba(2, 146, 131, 1)
Ikasgida
- HEX: #f9b233
- RGBA: rgba(249, 178, 51, 1)
Ikasbizi
- HEX: #e61873
- RGBA: rgba(230, 24, 115, 1)
Ikasenplegu
- HEX: #c7d40c
- RGBA: rgba(199, 212, 12, 1)
Fondo 2
- HEX: #EFF1F2
- RGBA: rgba(239, 241, 242, 1)
Fondo Header
- HEX: #F0F0F2
- RGBA: rgba(240, 240, 242, 1)
Destacados 1
- HEX: #C7D408
- RGBA: rgba(199, 212, 8, 1)
Destacados 2
- HEX: #EDF7FA
- RGBA: rgba(237, 247, 250, 1)
Destacados 3
- HEX: #CCDDE8
- RGBA: rgba(204, 221, 232, 1)
Titulares H1
- HEX: #9EBAD2
- RGBA: rgba(158, 186, 210, 1)
Aula de Aprendizaje de Tareas
- HEX: #00ff7f
- RGBA: rgba(0, 255, 127, 1)
Reconocimiento de Competencias Profesionales
- HEX: #17E0C9
- RGBA: rgba(23, 224, 201, 1)
Dispone de oferta de Carnés Profesionales
- HEX: #0000CD
- RGBA: rgba(0, 0, 205, 1)
Servicio de Aprendizaje Permanente
- HEX: #ADFF30
- RGBA: rgba(173, 255, 48, 1)
Destacados IkasEnplegu
- HEX: #C7D433
- RGBA: rgba(199, 212, 51, 1)
Destacados IkasEnplegu 2
- HEX: #CCDCE9
- RGBA: rgba(204, 220, 233, 1)
Destacados IkasGida
- HEX: #FFF9EF
- RGBA: rgba(255, 249, 239, 1)
MARCA
Logos y favicons de la empresa
ICONOGRAFÍA
Representar acciones, conceptos o funciones específicas de una manera visualmente compacta y comprensible
Typicons
Font Awesome
Entypo
Typicons
Font Awesome
Entypo
COMPONENTES
Partes reutilizables de una página web que encapsulan funcionalidades específicas o contenido visual
CONTENIDO
Son elementos utilizados para mostrar y organizar diferentes tipos de contenido en una página web. Se utilizan para estructurar y presentar información de manera clara y comprensible para los usuarios.
Modal
Una ventana emergente que aparece encima del contenido principal de una página web
Formularios
Herramienta fundamental que permite a los usuarios ingresar y enviar información de manera interactiva en una página web.
Cards
Contenedor flexible y adaptable que se utiliza para presentar información de manera visualmente atractiva y organizada en una página web
Acordeon
Componente interactivo que se utiliza para mostrar y ocultar contenido de manera organizada en una página web
Tabs
Componente interactivo que organiza y muestra contenido en diferentes pestañas o secciones dentro de una misma área de la página web
Listado
Forma de presentar información de manera ordenada y estructurada utilizando diferentes tipos de listas
MULTIMEDIA
Son elementos utilizados para incorporar contenido multimedia, como audio, video y otros medios interactivos, en una página web.
Imagenes
Elemento utilizado para mejorar la apariencia visual de una página, transmitir información de manera rápida y efectiva, y aumentar la interactividad
Graficos
Una representación visual de datos que se muestra en una página web
Carousel
Componente interactivo que permite a los usuarios ver una serie de elementos, como imágenes, contenido textual o cualquier otro tipo de información, en un formato de presentación de diapositivas que se desplaza automáticamente o mediante controles de navegación
Elementos divisorios
Elementos utilizados para crear divisiones o separaciones visuales entre secciones de contenido
Slider
Componente interactivo que permite a los usuarios desplazarse horizontal o verticalmente a través de un conjunto de elementos, como imágenes, contenido textual o cualquier otro tipo de información
OTROS ELEMENTOS
laysssfgiasdlgfkufgñiofkkkkkkkkkkkkkkkulkbaosudfhj
Paginacion
Dividir y mostrar grandes cantidades de contenido en una serie de páginas más pequeñas y manejables
Indicador de progreso
Elemento que muestra visualmente el avance o el estado de una tarea en una página web
