Guía de estilo de Webflow

Darkbit X es nuestra última plantilla de flujo web en modo oscuro creada para las empresas tecnológicas modernas que buscan un estilo de diseño impresionante en modo oscuro. Ha sido diseñada y desarrollada por nuestros expertos en flujos web de BRIX.

Colores

Colores principales

Color 1
Color 1
#2C85FF
Color 2
Color 2
#7B35FC
Color 3
Color 3
#F8569E
Color 4
Color 4
#FFCB46
Color 5
Color 5
#27A4FF
Color 6
Color 6
#3354FF
Color 7
Color 7
#7433FF
Color 8
Color 8
#F64ABB
Color 9
Color 9
#FF7C33

Colores neutros

800
Neutral 800
#15151E
700
Neutral 700
#2B2B3B
600
Neutral 600
#4D4D63
500
Neutral 500
#8F8FA5
400
Neutral 400
#C3C3D0
300
Neutral 300
#E4E4ED
200
Neutral 200
#F6F6FA
100
Neutral 100
#FFFFFF

Colores del sistema

400
Azul 400
#086CD9
300
Azul 300
#1D88FE
200
Azul 200
#8FC3FF
100
Azul 100
#EAF4FF
400
Verde 400
#11845B
300
Verde 300
#05C168
200
Verde 200
#7FDCA4
100
Verde 100
#DEF2E6
400
Rojo 400
#DC2B2B
300
Rojo 300
#FF5A65
200
Rojo 200
#FFBEC2
100
Rojo 100
#FFEFF0
400
Naranja 400
#D5691B
300
Naranja 300
#FF9E2C
200
Naranja 200
#FFD19B
100
Naranja 100
#FFF3E4

Tipografía

Rúbricas especiales

Pantalla 1

Inter Seminegra
86px / 1.093em

Donec etdolr odio pelle ntesqu.

Pantalla 2

Inter Seminegra
54px / 1.222em

Donec et odio lom pellen tesqu diam.

Pantalla 3

Inter Seminegra
32px / 1.438em

Donec et odio pellen tesqu diam lorem ipsum dolor.

Pantalla 4

Inter Seminegra
22px / 1.727em

Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

Rúbricas

Rúbrica H1

Inter Seminegra
54px / 1.296em

Donec et odio dolor pelle ntesqu.

Donec et odio dolor pelle ntesqu.

Rúbrica H2

Inter Seminegra
38px / 1.316em

Donec et odio pellen tesqu diam lorem ipsum dolor consectur

Donec et odio pellen tesqu diam lorem ipsum dolor consectur

Rúbrica H3

Inter Seminegra
24px / 1.417em

Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong dolor sit amet consec.

Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong dolor sit amet consec.

Rúbrica H4

Inter Seminegra
22px / 1.364em

Donec et odio pellentesqu diam lorem ipsum dolor

Donec et odio pellentesqu diam lorem ipsum dolor

Rúbrica H5

Inter Seminegra
18px / 1.444em
Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.
Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

Rúbrica H6

Inter Seminegra
16px / 1.375em
Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.
Donec et odio pellentesqu diam lorem ipsum dolor consectur drakong.

Cuerpo

Cuerpo grande

Intermedio
24px / 1.583em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursu.

Cuerpo por defecto

Intermedio
18px / 30px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Cuerpo pequeño

Intermedio
16px / 1.750em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et.

Texto único

400

Intermedio
Inter Seminegra
Inter Bold
24px / 1.083em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

300

Intermedio
Inter Seminegra
Inter Bold
20px / 1.100em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

200

Intermedio
Inter Seminegra
Inter Bold
18px / 1.111em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

100

Intermedio
Inter Seminegra
Inter Bold
16px / 1.125em
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur
Lorem ipsum dolor sit amet consectetur

Texto enriquecido

Texto en negrita

Inter
Lorem ipsum dolor sit amet consectetur

Lista de balas

Inter
  • Lorem ipsum dolor sit amet consectetur
  • Posuere enim mi pharetra neque proin dic
  • Mauris aliquet faucibus iaculis dui vitae ullamco

Lista numerada

Inter
  1. Lorem ipsum dolor sit amet consectetur
  2. Posuere enim mi pharetra neque proin dic
  3. Mauris aliquet faucibus iaculis dui vitae ullamco

Blockquote

Inter
18px / 1.667em
"Nisi quis eleifend quam adipiscing vitae aliquet bibendum enim facilisis gravida neque velit euismod in pellentesque"

Imagen y pie de foto

Odio facilisis mauris sit amet massa vitae tortor.

Texto en mayúsculas

Inter
Lorem ipsum dolor sit amet consectetur

Texto tachado

Inter
Lorem ipsum dolor sit amet consectetur

Texto subrayado

Inter
Lorem ipsum dolor sit amet consectetur

Sombras

Sombras generales

Sombra 01
Sombra 02
Sombra 03
Sombra 04
Sombra 05
Sombra 06

Sombras de botones

Color del botón 01
Color del botón 02
Color del botón 03
Botón blanco 01
Botón blanco 02
Botón blanco 03

Botones

Botones primarios

Pequeño
Botón Pequeño
Por defecto
Botón por defecto
Grande
Botón por defecto
Pequeño
Botón Pequeño
Por defecto
Botón por defecto
Grande
Botón por defecto

Botones secundarios

Pequeño
Botón Pequeño
Por defecto
Botón por defecto
Grande
Botón por defecto
Pequeño
Botón Pequeño
Por defecto
Botón por defecto
Grande
Botón por defecto

Botones circulares primarios

Botones circulares secundarios

Insignias

Insignias primarias

Pequeño
Insignia pequeña
Por defecto
Insignia por defecto
Grande
Insignia grande
Pequeño
Insignia pequeña
Por defecto
Insignia por defecto
Grande
Insignia grande
Pequeño
Insignia pequeña
Por defecto
Insignia por defecto
Grande
Insignia grande

Insignias secundarias

Pequeño
Insignia pequeña
Por defecto
Insignia por defecto
Grande
Insignia grande
Pequeño
Insignia pequeña
Por defecto
Insignia por defecto
Grande
Insignia grande
Pequeño
Insignia pequeña
Por defecto
Insignia por defecto
Grande
Insignia grande

Entradas

Texto de entrada

Gracias. Hemos recibido su envío.
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Hemos recibido su envío.
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Hemos recibido su envío.
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Hemos recibido su envío.
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Hemos recibido su envío.
¡Ups! Algo salió mal al enviar el formulario.

Área de texto

Gracias. Hemos recibido su envío.
¡Ups! Algo salió mal al enviar el formulario.
Gracias. Hemos recibido su envío.
¡Ups! Algo salió mal al enviar el formulario.

Casillas de verificación

Gracias. Hemos recibido su envío.
¡Ups! Algo salió mal al enviar el formulario.

Botones de radio

Gracias. Hemos recibido su envío.
¡Ups! Algo salió mal al enviar el formulario.

Avatares

Círculo de avatares

Fuentes de iconos

Iconos de línea redondeados

Iconos de líneas cuadradas

Iconos rellenos

Iconos de las redes sociales