To make our websites, documents, etc. consistent and accessible, the Datenanfragen.de project has defined (and will continue to define) a set of design and style guidelines.
The purpose of this page is to document and explain these guidelines. For questions and suggestions, you can best reach us on Matrix.
This guide is still in a very early stage. Neither our design language nor the documentation thereof have been finalized. Expect both of them to change in the future.
Due to that, this document is currently available in English only.
We have defined a main and an extended color palette. Combined with pure black and pure white, these two palettes make up the conclusive selection of colors used for Datenanfragen.de. No other colors may be used (not even for illustrations).
For convenience, the color palette is available as an Adobe Swatch Exchange (ASE) file and an Adobe Creative Cloud library.
The main palette consists of our primary color (blue) and our accent color (teal), each in nine different shades.
| 100 | #e0edf8 | hsb(207.5, 9.68%, 97.25%) | hsl(207.5, 63.12%, 92.54%) | cmyk(9.68, 4.44, 0, 2.75) |
| 200 | #bfd8f0 | hsb(209.39, 20.42%, 94.12%) | hsl(209.39, 62.04%, 84.51%) | cmyk(20.42, 10, 0, 5.88) |
| 300 | #9cbfe5 | hsb(211.23, 31.88%, 89.8%) | hsl(211.23, 58.39%, 75.49%) | cmyk(31.87, 16.59, 0, 10.2) |
| 400 | #6785c2 | hsb(220.22, 46.91%, 76.08%) | hsl(220.22, 42.73%, 58.24%) | cmyk(46.91, 31.44, 0, 23.92) |
| 500 | #4a69b1 | hsb(221.94, 58.19%, 69.41%) | hsl(221.94, 41.03%, 49.22%) | cmyk(58.19, 40.67, 0, 30.59) |
| 600 | #3a58a7 | hsb(223.49, 65.27%, 65.49%) | hsl(223.49, 48.45%, 44.12%) | cmyk(65.27, 47.31, 0, 34.5) |
| 700 | #214192 | hsb(223.01, 77.4%, 57.25%) | hsl(223.01, 63.13%, 35.09%) | cmyk(77.4, 55.48, 0, 42.76) |
| 800 | #232e62 | hsb(229.52, 64.29%, 38.43%) | hsl(229.52, 47.37%, 26.08%) | cmyk(64.29, 53.06, 0, 61.57) |
| 900 | #192a4a | hsb(219.18, 66.22%, 29.02%) | hsl(219.18, 49.5%, 19.41%) | cmyk(66.22, 43.24, 0, 70.98) |
| 100 | #e2f7ec | hsb(148.57, 8.5%, 96.86%) | hsl(148.57, 56.73%, 92.74%) | cmyk(8.5, 0, 4.45, 3.14) |
| 200 | #bfe8d8 | hsb(156.59, 17.67%, 90.98%) | hsl(156.59, 47.12%, 82.94%) | cmyk(17.67, 0, 6.89, 9.02) |
| 300 | #9ee3cd | hsb(160.87, 30.4%, 89.02%) | hsl(160.87, 55.2%, 75.49%) | cmyk(30.4, 0, 9.69, 10.98) |
| 400 | #73d1b7 | hsb(163.4, 44.98%, 81.96%) | hsl(163.4, 50.54%, 63.53%) | cmyk(44.98, 0, 12.44, 18.04) |
| 500 | #3bb395 | hsb(165, 67.04%, 70.2%) | hsl(165, 50.42%, 46.67%) | cmyk(67.04, 0, 16.76, 29.8) |
| 600 | #199c7d | hsb(165.8, 83.97%, 61.18%) | hsl(165.8, 72.37%, 35.49%) | cmyk(83.97, 0, 19.87, 38.83) |
| 700 | #00826c | hsb(169.66, 100%, 50.98%) | hsl(169.66, 100%, 25.49%) | cmyk(100, 0, 17.23, 49.02) |
| 800 | #004d47 | hsb(175.26, 100%, 30.2%) | hsl(175.26, 100%, 15.1%) | cmyk(100, 0, 7.9, 69.8) |
| 900 | #003b34 | hsb(173.08, 100%, 23.14%) | hsl(173.08, 100%, 11.57%) | cmyk(100, 0, 11.53, 76.86) |
The extended palette is taken from the great Tailwind CSS.
| 100 | #f7fafc | hsb(204, 2.03%, 98.8%) | hsl(204, 45.52%, 97.8%) | cmyk(2.03, 0.81, 0, 1.2) |
| 200 | #edf2f7 | hsb(210, 4.05%, 96.86%) | hsl(210, 38.45%, 94.9%) | cmyk(4.05, 2.02, 0, 3.14) |
| 300 | #e2e8f0 | hsb(214, 5.81%, 94.13%) | hsl(214, 31.78%, 91.4%) | cmyk(5.81, 3.29, 0, 5.87) |
| 400 | #cbd5e0 | hsb(211, 9.39%, 87.82%) | hsl(211, 25.29%, 83.7%) | cmyk(9.39, 4.85, 0, 12.18) |
| 500 | #a0aec0 | hsb(214, 16.72%, 75.29%) | hsl(214, 20.3%, 69%) | cmyk(16.72, 9.47, 0, 24.71) |
| 600 | #718096 | hsb(216, 24.67%, 58.86%) | hsl(216, 15%, 51.6%) | cmyk(24.67, 14.8, 0, 41.14) |
| 700 | #4a5568 | hsb(218, 28.91%, 40.8%) | hsl(218, 16.9%, 34.9%) | cmyk(28.91, 18.31, 0, 59.2) |
| 800 | #2d3748 | hsb(218, 37.53%, 28.19%) | hsl(218, 23.1%, 22.9%) | cmyk(37.53, 23.77, 0, 71.81) |
| 900 | #1a202c | hsb(220, 40.89%, 17.22%) | hsl(220, 25.7%, 13.7%) | cmyk(40.89, 27.26, 0, 82.78) |
| 100 | #fff5f5 | hsb(0, 4%, 100%) | hsl(0, 100%, 98%) | cmyk(0, 4, 4, 0) |
| 200 | #fed7d7 | hsb(0, 15.28%, 99.61%) | hsl(0, 95.13%, 92%) | cmyk(0, 15.28, 15.28, 0.39) |
| 300 | #feb2b2 | hsb(0, 29.92%, 99.6%) | hsl(0, 97.39%, 84.7%) | cmyk(0, 29.92, 29.92, 0.4) |
| 400 | #fc8181 | hsb(0, 48.8%, 98.81%) | hsl(0, 95.3%, 74.7%) | cmyk(0, 48.8, 48.8, 1.19) |
| 500 | #f56565 | hsb(0, 58.86%, 96.07%) | hsl(0, 87.8%, 67.8%) | cmyk(0, 58.86, 58.86, 3.93) |
| 600 | #e53e3e | hsb(0, 72.87%, 89.83%) | hsl(0, 76.29%, 57.1%) | cmyk(0, 72.87, 72.87, 10.17) |
| 700 | #c53030 | hsb(0, 75.62%, 77.18%) | hsl(0, 60.8%, 48%) | cmyk(0, 75.62, 75.62, 22.82) |
| 800 | #9b2c2c | hsb(0, 71.63%, 60.76%) | hsl(0, 55.8%, 39%) | cmyk(0, 71.63, 71.63, 39.24) |
| 900 | #742a2a | hsb(0, 63.76%, 45.51%) | hsl(0, 46.8%, 31%) | cmyk(0, 63.76, 63.76, 54.49) |
| 100 | #fffaf0 | hsb(40, 5.8%, 100%) | hsl(40, 100%, 97.1%) | cmyk(0, 1.93, 5.8, 0) |
| 200 | #feebc8 | hsb(39, 21.29%, 99.6%) | hsl(39, 96.36%, 89%) | cmyk(0, 7.45, 21.28, 0.4) |
| 300 | #fbd38d | hsb(38, 43.75%, 98.43%) | hsl(38, 93.2%, 76.9%) | cmyk(0, 16.04, 43.75, 1.57) |
| 400 | #f6ae55 | hsb(33, 65.43%, 96.45%) | hsl(33, 89.89%, 64.9%) | cmyk(0, 29.44, 65.42, 3.55) |
| 500 | #ed8836 | hsb(27, 77.16%, 92.96%) | hsl(27, 83.59%, 57.1%) | cmyk(0, 42.43, 77.15, 7.04) |
| 600 | #dd6c20 | hsb(24, 85.52%, 86.65%) | hsl(24, 74.7%, 49.6%) | cmyk(0, 51.31, 85.52, 13.35) |
| 700 | #c05621 | hsb(20, 82.84%, 75.28%) | hsl(20, 70.71%, 44.1%) | cmyk(0, 55.23, 82.84, 24.72) |
| 800 | #9c4221 | hsb(16, 78.86%, 61.25%) | hsl(16, 65.1%, 37.1%) | cmyk(0, 57.83, 78.86, 38.75) |
| 900 | #7b341e | hsb(14, 75.62%, 48.24%) | hsl(14, 60.8%, 30%) | cmyk(0, 57.98, 75.62, 51.76) |
| 100 | #fffff0 | hsb(60, 5.8%, 100%) | hsl(60, 100%, 97.1%) | cmyk(0, 0, 5.8, 0) |
| 200 | #fefcbf | hsb(58, 24.71%, 99.61%) | hsl(58, 96.93%, 87.3%) | cmyk(0, 0.82, 24.72, 0.39) |
| 300 | #faf189 | hsb(55, 45.18%, 98.05%) | hsl(55, 91.91%, 75.9%) | cmyk(0, 3.77, 45.18, 1.95) |
| 400 | #f6df5e | hsb(51, 61.72%, 96.47%) | hsl(51, 89.4%, 66.7%) | cmyk(0, 9.26, 61.72, 3.53) |
| 500 | #ecc94b | hsb(47, 68.18%, 92.55%) | hsl(47, 80.9%, 61%) | cmyk(0, 14.77, 68.18, 7.45) |
| 600 | #d69e2e | hsb(40, 78.47%, 83.93%) | hsl(40, 67.2%, 51%) | cmyk(0, 26.16, 78.47, 16.07) |
| 700 | #b77a1f | hsb(36, 83.04%, 71.82%) | hsl(36, 71%, 42%) | cmyk(0, 33.22, 83.04, 28.18) |
| 800 | #975b16 | hsb(32, 85.45%, 59.19%) | hsl(32, 74.6%, 33.9%) | cmyk(0, 39.88, 85.45, 40.81) |
| 900 | #744210 | hsb(30, 86.23%, 45.53%) | hsl(30, 75.79%, 25.9%) | cmyk(0, 43.11, 86.23, 54.47) |
| 100 | #f0fff4 | hsb(136, 5.8%, 100%) | hsl(136, 100%, 97.1%) | cmyk(5.8, 0, 4.25, 0) |
| 200 | #c6f6d5 | hsb(139, 19.44%, 96.48%) | hsl(139, 72.71%, 87.1%) | cmyk(19.44, 0, 13.29, 3.52) |
| 300 | #9ae6b5 | hsb(141, 33.03%, 90.19%) | hsl(141, 60.29%, 75.3%) | cmyk(33.02, 0, 21.46, 9.81) |
| 400 | #68d391 | hsb(143, 50.67%, 82.77%) | hsl(143, 54.9%, 61.8%) | cmyk(50.67, 0, 31.25, 17.23) |
| 500 | #48bb78 | hsb(145, 61.46%, 73.33%) | hsl(145, 45.8%, 50.8%) | cmyk(61.46, 0, 35.85, 26.67) |
| 600 | #38a169 | hsb(148, 65.23%, 63.07%) | hsl(148, 48.4%, 42.5%) | cmyk(65.23, 0, 34.79, 36.93) |
| 700 | #2f855a | hsb(150, 64.68%, 52.17%) | hsl(150, 47.8%, 35.3%) | cmyk(64.68, 0, 32.34, 47.83) |
| 800 | #276749 | hsb(152, 62.16%, 40.34%) | hsl(152, 45.1%, 27.8%) | cmyk(62.16, 0, 29.01, 59.66) |
| 900 | #22543d | hsb(152, 59.55%, 32.89%) | hsl(152, 42.4%, 23.1%) | cmyk(59.55, 0, 27.79, 67.11) |
| 100 | #fff5f7 | hsb(348, 4%, 100%) | hsl(348, 100%, 98%) | cmyk(0, 4, 3.2, 0) |
| 200 | #fed7e2 | hsb(343, 15.28%, 99.61%) | hsl(343, 95.13%, 92%) | cmyk(0, 15.28, 10.95, 0.39) |
| 300 | #fbb6ce | hsb(339, 27.49%, 98.43%) | hsl(339, 89.6%, 84.9%) | cmyk(0, 27.49, 17.87, 1.57) |
| 400 | #f687b3 | hsb(336, 45.11%, 96.46%) | hsl(336, 86.01%, 74.7%) | cmyk(0, 45.12, 27.07, 3.54) |
| 500 | #ed64a6 | hsb(331, 57.77%, 92.95%) | hsl(331, 79.2%, 66.1%) | cmyk(0, 57.77, 29.85, 7.05) |
| 600 | #d53f8c | hsb(329, 70.45%, 83.52%) | hsl(329, 64.1%, 54.1%) | cmyk(0, 70.45, 34.05, 16.48) |
| 700 | #b83280 | hsb(325, 72.85%, 72.2%) | hsl(325, 57.29%, 45.9%) | cmyk(0, 72.85, 30.35, 27.8) |
| 800 | #97266e | hsb(322, 74.84%, 59.29%) | hsl(322, 59.8%, 37.1%) | cmyk(0, 74.84, 27.44, 40.71) |
| 900 | #702459 | hsb(318, 67.9%, 43.91%) | hsl(318, 51.4%, 29%) | cmyk(0, 67.9, 20.37, 56.09) |
| | #000000 | hsb(0, 0%, 0%) | hsl(0, 0%, 0%) | cmyk(100, 100, 100, 100) |
| | #ffffff | hsb(0, 0%, 100%) | hsl(0, 0%, 100%) | cmyk(0, 0, 0, 0) |
