Files
snikket-web-portal/docs/colours.svg
Jonas Schäfer e985fe9c61 Design foundations
- Create a colour palette
- Create a sizing schema for paddings and fonts
- Implement basic form controls
- Create a theme demo page
- Apply the theme to the existing pages.

Still TODO is the final font selection.
2020-03-05 18:43:52 +01:00

435 lines
18 KiB
XML

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="334mm"
height="154mm"
viewBox="0 0 334 154"
version="1.1"
id="svg8"
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
sodipodi:docname="colours.svg"
inkscape:export-filename="/home/horazont/tmp/colours.png"
inkscape:export-xdpi="96"
inkscape:export-ydpi="96">
<defs
id="defs2" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
inkscape:cx="642.84838"
inkscape:cy="251.88403"
inkscape:document-units="mm"
inkscape:current-layer="layer1"
showgrid="false"
inkscape:window-width="2560"
inkscape:window-height="1401"
inkscape:window-x="0"
inkscape:window-y="39"
inkscape:window-maximized="0"
fit-margin-top="5"
fit-margin-left="5"
fit-margin-right="5"
fit-margin-bottom="5" />
<metadata
id="metadata5">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(65,-148)">
<rect
style="opacity:1;fill:#418fc7;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect4759"
width="24"
height="24"
x="120"
y="273" />
<rect
y="273"
x="-2.7815501e-08"
height="24"
width="24"
id="rect9362"
style="opacity:1;fill:#062943;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="273"
x="240"
height="24"
width="24"
id="rect9364"
style="opacity:1;fill:#e4f3fd;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="273"
x="60"
height="24"
width="24"
id="rect9366"
style="opacity:1;fill:#0e4c76;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
style="opacity:1;fill:#9dccf0;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9368"
width="24"
height="24"
x="180"
y="273" />
<rect
style="opacity:1;fill:#0f3d62;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9370"
width="24"
height="24"
x="30"
y="273" />
<rect
y="273"
x="90"
height="24"
width="24"
id="rect9372"
style="opacity:1;fill:#226494;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="273"
x="150"
height="24"
width="24"
id="rect9376"
style="opacity:1;fill:#72b2e3;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="273"
x="210"
height="24"
width="24"
id="rect9378"
style="opacity:1;fill:#b5d8f3;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="243"
x="120"
height="24"
width="24"
id="rect9380"
style="opacity:1;fill:#c95e40;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
style="opacity:1;fill:#340e03;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9382"
width="24"
height="24"
x="0"
y="243" />
<rect
style="opacity:1;fill:#fef1ed;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9384"
width="24"
height="24"
x="240"
y="243" />
<rect
style="opacity:1;fill:#e2b00c;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9436"
width="24"
height="24"
x="120"
y="213" />
<rect
style="opacity:1;fill:#f2ac99;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9454"
width="24"
height="24"
x="180"
y="243" />
<rect
y="243"
x="210"
height="24"
width="24"
id="rect9456"
style="opacity:1;fill:#fbc2b3;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="243"
x="150"
height="24"
width="24"
id="rect9458"
style="opacity:1;fill:#ed947c;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
style="opacity:1;fill:#883017;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9460"
width="24"
height="24"
x="60"
y="243" />
<rect
y="243"
x="30"
height="24"
width="24"
id="rect9462"
style="opacity:1;fill:#681f0b;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="243"
x="90"
height="24"
width="24"
id="rect9464"
style="opacity:1;fill:#a33d21;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="183"
x="120"
height="24"
width="24"
id="rect9466"
style="opacity:1;fill:#55c644;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="213"
x="240"
height="24"
width="24"
id="rect9484"
style="opacity:1;fill:#fffcf0;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="213"
x="0"
height="24"
width="24"
id="rect9486"
style="opacity:1;fill:#302100;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="213"
x="60"
height="24"
width="24"
id="rect9488"
style="opacity:1;fill:#886600;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
style="opacity:1;fill:#563600;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9490"
width="24"
height="24"
x="30"
y="213" />
<rect
y="213"
x="90"
height="24"
width="24"
id="rect9494"
style="opacity:1;fill:#b98601;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="213"
x="180"
height="24"
width="24"
id="rect9496"
style="opacity:1;fill:#feed93;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="213"
x="150"
height="24"
width="24"
id="rect9500"
style="opacity:1;fill:#fde58a;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
style="opacity:1;fill:#fff7c2;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9502"
width="24"
height="24"
x="210"
y="213" />
<rect
style="opacity:1;fill:#8f8983;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9504"
width="24"
height="24"
x="120"
y="153" />
<rect
y="153"
x="0"
height="24"
width="24"
id="rect9506"
style="opacity:1;fill:#1f1b17;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="153"
x="240"
height="24"
width="24"
id="rect9508"
style="opacity:1;fill:#f6f5f4;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="153"
x="180"
height="24"
width="24"
id="rect9510"
style="opacity:1;fill:#cac3bd;fill-opacity:0.98872178;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
style="opacity:1;fill:#e3e1df;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9512"
width="24"
height="24"
x="210"
y="153" />
<rect
style="opacity:1;fill:#4e4a46;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9514"
width="24"
height="24"
x="60"
y="153" />
<rect
y="153"
x="30"
height="24"
width="24"
id="rect9516"
style="opacity:1;fill:#3d3833;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
style="opacity:1;fill:#706965;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9518"
width="24"
height="24"
x="90"
y="153" />
<rect
y="153"
x="150"
height="24"
width="24"
id="rect9520"
style="opacity:1;fill:#b1aca6;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
style="opacity:1;fill:#ecfbe6;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9522"
width="24"
height="24"
x="240"
y="183" />
<rect
style="opacity:1;fill:#052f03;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9524"
width="24"
height="24"
x="0"
y="183" />
<rect
style="opacity:1;fill:#197713;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9526"
width="24"
height="24"
x="60"
y="183" />
<rect
y="183"
x="30"
height="24"
width="24"
id="rect9528"
style="opacity:1;fill:#0c4608;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
y="183"
x="90"
height="24"
width="24"
id="rect9530"
style="opacity:1;fill:#218a1b;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<rect
style="opacity:1;fill:#abed9c;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9532"
width="24"
height="24"
x="180"
y="183" />
<rect
style="opacity:1;fill:#81e06e;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
id="rect9536"
width="24"
height="24"
x="150"
y="183" />
<rect
y="183"
x="210"
height="24"
width="24"
id="rect9538"
style="opacity:1;fill:#cef6c5;fill-opacity:1;stroke:none;stroke-width:0.32483485;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.69999981px;line-height:1em;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="-3.4391122"
y="170.58151"
id="text9546"><tspan
sodipodi:role="line"
id="tspan9544"
x="-3.4391129"
y="170.58151"
style="stroke-width:0.26458332px">Grayscale</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.69999981px;line-height:1em;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="-12.554834"
y="200.5157"
id="text9550"><tspan
sodipodi:role="line"
id="tspan9548"
x="-12.554835"
y="200.5157"
style="stroke-width:0.26458332px">Success</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.69999981px;line-height:1em;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="-21.180664"
y="230.71715"
id="text9554"><tspan
sodipodi:role="line"
id="tspan9552"
x="-21.180664"
y="230.71715"
style="stroke-width:0.26458332px">Accent</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.69999981px;line-height:1em;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="-33.880665"
y="261.45316"
id="text9558"><tspan
sodipodi:role="line"
id="tspan9556"
x="-33.880665"
y="261.45316"
style="stroke-width:0.26458332px">Alert</tspan></text>
<text
xml:space="preserve"
style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:12.69999981px;line-height:1em;font-family:'Liberation Sans';-inkscape-font-specification:'Liberation Sans';text-align:end;letter-spacing:0px;word-spacing:0px;text-anchor:end;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
x="-17.236719"
y="290.85278"
id="text9562"><tspan
sodipodi:role="line"
id="tspan9560"
x="-17.236719"
y="290.85278"
style="stroke-width:0.26458332px">Primary</tspan></text>
</g>
</svg>