Saltar al contenido

Para que nuestros sitios web, documentos, etc. sean coherentes y accesibles, el proyecto Datenanfragen.de ha definido (y seguirá definiendo) un conjunto de pautas de diseño y estilo. El propósito de esta página es documentar y explicar estas pautas.

Esta guía aún se encuentra en una etapa muy temprana. No se ha finalizado ni nuestro lenguaje de diseño ni la documentación del mismo. Espere que ambos cambien en el futuro.

Colores

#

Hemos definido una paleta de colores principal y una extendida. Combinadas con negro puro y blanco puro, estas dos paletas componen la selección concluyente de colores utilizados para Datenanfragen.de. No se pueden utilizar otros colores (ni siquiera para ilustraciones).

Para mayor comodidad, la paleta de colores está disponible como Adobe Swatch Exchange (ASE) file y como Adobe Creative Cloud library.

Paleta principal

#

La paleta principal consta de nuestro color primario (azul) y nuestro color de acento (verde azulado), cada uno en nueve tonos diferentes.

Azul

#
100#e0edf8hsb(207.5, 9.68%, 97.25%)hsl(207.5, 63.12%, 92.54%)cmyk(9.68, 4.44, 0, 2.75)
200#bfd8f0hsb(209.39, 20.42%, 94.12%)hsl(209.39, 62.04%, 84.51%)cmyk(20.42, 10, 0, 5.88)
300#9cbfe5hsb(211.23, 31.88%, 89.8%)hsl(211.23, 58.39%, 75.49%)cmyk(31.87, 16.59, 0, 10.2)
400#6785c2hsb(220.22, 46.91%, 76.08%)hsl(220.22, 42.73%, 58.24%)cmyk(46.91, 31.44, 0, 23.92)
500#4a69b1hsb(221.94, 58.19%, 69.41%)hsl(221.94, 41.03%, 49.22%)cmyk(58.19, 40.67, 0, 30.59)
600#3a58a7hsb(223.49, 65.27%, 65.49%)hsl(223.49, 48.45%, 44.12%)cmyk(65.27, 47.31, 0, 34.5)
700#214192hsb(223.01, 77.4%, 57.25%)hsl(223.01, 63.13%, 35.09%)cmyk(77.4, 55.48, 0, 42.76)
800#232e62hsb(229.52, 64.29%, 38.43%)hsl(229.52, 47.37%, 26.08%)cmyk(64.29, 53.06, 0, 61.57)
900#192a4ahsb(219.18, 66.22%, 29.02%)hsl(219.18, 49.5%, 19.41%)cmyk(66.22, 43.24, 0, 70.98)

Verde azulado

#
100#e2f7echsb(148.57, 8.5%, 96.86%)hsl(148.57, 56.73%, 92.74%)cmyk(8.5, 0, 4.45, 3.14)
200#bfe8d8hsb(156.59, 17.67%, 90.98%)hsl(156.59, 47.12%, 82.94%)cmyk(17.67, 0, 6.89, 9.02)
300#9ee3cdhsb(160.87, 30.4%, 89.02%)hsl(160.87, 55.2%, 75.49%)cmyk(30.4, 0, 9.69, 10.98)
400#73d1b7hsb(163.4, 44.98%, 81.96%)hsl(163.4, 50.54%, 63.53%)cmyk(44.98, 0, 12.44, 18.04)
500#3bb395hsb(165, 67.04%, 70.2%)hsl(165, 50.42%, 46.67%)cmyk(67.04, 0, 16.76, 29.8)
600#199c7dhsb(165.8, 83.97%, 61.18%)hsl(165.8, 72.37%, 35.49%)cmyk(83.97, 0, 19.87, 38.83)
700#00826chsb(169.66, 100%, 50.98%)hsl(169.66, 100%, 25.49%)cmyk(100, 0, 17.23, 49.02)
800#004d47hsb(175.26, 100%, 30.2%)hsl(175.26, 100%, 15.1%)cmyk(100, 0, 7.9, 69.8)
900#003b34hsb(173.08, 100%, 23.14%)hsl(173.08, 100%, 11.57%)cmyk(100, 0, 11.53, 76.86)

Paleta extendida

#

La paleta extendida se toma del gran Tailwind CSS.

Gris

#
100#f7fafchsb(204, 2.03%, 98.8%)hsl(204, 45.52%, 97.8%)cmyk(2.03, 0.81, 0, 1.2)
200#edf2f7hsb(210, 4.05%, 96.86%)hsl(210, 38.45%, 94.9%)cmyk(4.05, 2.02, 0, 3.14)
300#e2e8f0hsb(214, 5.81%, 94.13%)hsl(214, 31.78%, 91.4%)cmyk(5.81, 3.29, 0, 5.87)
400#cbd5e0hsb(211, 9.39%, 87.82%)hsl(211, 25.29%, 83.7%)cmyk(9.39, 4.85, 0, 12.18)
500#a0aec0hsb(214, 16.72%, 75.29%)hsl(214, 20.3%, 69%)cmyk(16.72, 9.47, 0, 24.71)
600#718096hsb(216, 24.67%, 58.86%)hsl(216, 15%, 51.6%)cmyk(24.67, 14.8, 0, 41.14)
700#4a5568hsb(218, 28.91%, 40.8%)hsl(218, 16.9%, 34.9%)cmyk(28.91, 18.31, 0, 59.2)
800#2d3748hsb(218, 37.53%, 28.19%)hsl(218, 23.1%, 22.9%)cmyk(37.53, 23.77, 0, 71.81)
900#1a202chsb(220, 40.89%, 17.22%)hsl(220, 25.7%, 13.7%)cmyk(40.89, 27.26, 0, 82.78)

Rojo

#
100#fff5f5hsb(0, 4%, 100%)hsl(0, 100%, 98%)cmyk(0, 4, 4, 0)
200#fed7d7hsb(0, 15.28%, 99.61%)hsl(0, 95.13%, 92%)cmyk(0, 15.28, 15.28, 0.39)
300#feb2b2hsb(0, 29.92%, 99.6%)hsl(0, 97.39%, 84.7%)cmyk(0, 29.92, 29.92, 0.4)
400#fc8181hsb(0, 48.8%, 98.81%)hsl(0, 95.3%, 74.7%)cmyk(0, 48.8, 48.8, 1.19)
500#f56565hsb(0, 58.86%, 96.07%)hsl(0, 87.8%, 67.8%)cmyk(0, 58.86, 58.86, 3.93)
600#e53e3ehsb(0, 72.87%, 89.83%)hsl(0, 76.29%, 57.1%)cmyk(0, 72.87, 72.87, 10.17)
700#c53030hsb(0, 75.62%, 77.18%)hsl(0, 60.8%, 48%)cmyk(0, 75.62, 75.62, 22.82)
800#9b2c2chsb(0, 71.63%, 60.76%)hsl(0, 55.8%, 39%)cmyk(0, 71.63, 71.63, 39.24)
900#742a2ahsb(0, 63.76%, 45.51%)hsl(0, 46.8%, 31%)cmyk(0, 63.76, 63.76, 54.49)

Naranja

#
100#fffaf0hsb(40, 5.8%, 100%)hsl(40, 100%, 97.1%)cmyk(0, 1.93, 5.8, 0)
200#feebc8hsb(39, 21.29%, 99.6%)hsl(39, 96.36%, 89%)cmyk(0, 7.45, 21.28, 0.4)
300#fbd38dhsb(38, 43.75%, 98.43%)hsl(38, 93.2%, 76.9%)cmyk(0, 16.04, 43.75, 1.57)
400#f6ae55hsb(33, 65.43%, 96.45%)hsl(33, 89.89%, 64.9%)cmyk(0, 29.44, 65.42, 3.55)
500#ed8836hsb(27, 77.16%, 92.96%)hsl(27, 83.59%, 57.1%)cmyk(0, 42.43, 77.15, 7.04)
600#dd6c20hsb(24, 85.52%, 86.65%)hsl(24, 74.7%, 49.6%)cmyk(0, 51.31, 85.52, 13.35)
700#c05621hsb(20, 82.84%, 75.28%)hsl(20, 70.71%, 44.1%)cmyk(0, 55.23, 82.84, 24.72)
800#9c4221hsb(16, 78.86%, 61.25%)hsl(16, 65.1%, 37.1%)cmyk(0, 57.83, 78.86, 38.75)
900#7b341ehsb(14, 75.62%, 48.24%)hsl(14, 60.8%, 30%)cmyk(0, 57.98, 75.62, 51.76)

Amarillo

#
100#fffff0hsb(60, 5.8%, 100%)hsl(60, 100%, 97.1%)cmyk(0, 0, 5.8, 0)
200#fefcbfhsb(58, 24.71%, 99.61%)hsl(58, 96.93%, 87.3%)cmyk(0, 0.82, 24.72, 0.39)
300#faf189hsb(55, 45.18%, 98.05%)hsl(55, 91.91%, 75.9%)cmyk(0, 3.77, 45.18, 1.95)
400#f6df5ehsb(51, 61.72%, 96.47%)hsl(51, 89.4%, 66.7%)cmyk(0, 9.26, 61.72, 3.53)
500#ecc94bhsb(47, 68.18%, 92.55%)hsl(47, 80.9%, 61%)cmyk(0, 14.77, 68.18, 7.45)
600#d69e2ehsb(40, 78.47%, 83.93%)hsl(40, 67.2%, 51%)cmyk(0, 26.16, 78.47, 16.07)
700#b77a1fhsb(36, 83.04%, 71.82%)hsl(36, 71%, 42%)cmyk(0, 33.22, 83.04, 28.18)
800#975b16hsb(32, 85.45%, 59.19%)hsl(32, 74.6%, 33.9%)cmyk(0, 39.88, 85.45, 40.81)
900#744210hsb(30, 86.23%, 45.53%)hsl(30, 75.79%, 25.9%)cmyk(0, 43.11, 86.23, 54.47)

Verde

#
100#f0fff4hsb(136, 5.8%, 100%)hsl(136, 100%, 97.1%)cmyk(5.8, 0, 4.25, 0)
200#c6f6d5hsb(139, 19.44%, 96.48%)hsl(139, 72.71%, 87.1%)cmyk(19.44, 0, 13.29, 3.52)
300#9ae6b5hsb(141, 33.03%, 90.19%)hsl(141, 60.29%, 75.3%)cmyk(33.02, 0, 21.46, 9.81)
400#68d391hsb(143, 50.67%, 82.77%)hsl(143, 54.9%, 61.8%)cmyk(50.67, 0, 31.25, 17.23)
500#48bb78hsb(145, 61.46%, 73.33%)hsl(145, 45.8%, 50.8%)cmyk(61.46, 0, 35.85, 26.67)
600#38a169hsb(148, 65.23%, 63.07%)hsl(148, 48.4%, 42.5%)cmyk(65.23, 0, 34.79, 36.93)
700#2f855ahsb(150, 64.68%, 52.17%)hsl(150, 47.8%, 35.3%)cmyk(64.68, 0, 32.34, 47.83)
800#276749hsb(152, 62.16%, 40.34%)hsl(152, 45.1%, 27.8%)cmyk(62.16, 0, 29.01, 59.66)
900#22543dhsb(152, 59.55%, 32.89%)hsl(152, 42.4%, 23.1%)cmyk(59.55, 0, 27.79, 67.11)

Rosado

#
100#fff5f7hsb(348, 4%, 100%)hsl(348, 100%, 98%)cmyk(0, 4, 3.2, 0)
200#fed7e2hsb(343, 15.28%, 99.61%)hsl(343, 95.13%, 92%)cmyk(0, 15.28, 10.95, 0.39)
300#fbb6cehsb(339, 27.49%, 98.43%)hsl(339, 89.6%, 84.9%)cmyk(0, 27.49, 17.87, 1.57)
400#f687b3hsb(336, 45.11%, 96.46%)hsl(336, 86.01%, 74.7%)cmyk(0, 45.12, 27.07, 3.54)
500#ed64a6hsb(331, 57.77%, 92.95%)hsl(331, 79.2%, 66.1%)cmyk(0, 57.77, 29.85, 7.05)
600#d53f8chsb(329, 70.45%, 83.52%)hsl(329, 64.1%, 54.1%)cmyk(0, 70.45, 34.05, 16.48)
700#b83280hsb(325, 72.85%, 72.2%)hsl(325, 57.29%, 45.9%)cmyk(0, 72.85, 30.35, 27.8)
800#97266ehsb(322, 74.84%, 59.29%)hsl(322, 59.8%, 37.1%)cmyk(0, 74.84, 27.44, 40.71)
900#702459hsb(318, 67.9%, 43.91%)hsl(318, 51.4%, 29%)cmyk(0, 67.9, 20.37, 56.09)

Blanco y negro

#
   #000000hsb(0, 0%, 0%)hsl(0, 0%, 0%)cmyk(100, 100, 100, 100)
   #ffffffhsb(0, 0%, 100%)hsl(0, 0%, 100%)cmyk(0, 0, 0, 0)