1 line
16 KiB
HTML
1 line
16 KiB
HTML
<!doctype html><html lang="de"><head><meta charset="utf-8"><title>Theme-Katalog</title><style>@page{size:A4 landscape;margin:10mm 11mm 12mm}*{box-sizing:border-box}body{margin:0;font-family:Arial;color:#202a30}header{display:flex;justify-content:space-between;align-items:end;border-bottom:2px solid #172a42;padding-bottom:3mm;margin-bottom:4mm}h1{margin:0;font-size:23pt}header p{margin:0;color:#687781}.grid{display:grid;grid-template-columns:1fr 1fr;gap:4mm}article{height:59mm;border:1px solid #d8dfe3;padding:3mm;display:grid;grid-template-columns:46mm 1fr;gap:4mm;break-inside:avoid}.mock{position:relative;background:white;border:1px solid #ccd5da;overflow:hidden;height:51mm;padding:4mm}.mock>*{position:relative;display:block}.mock .top{height:9mm;margin:-4mm -4mm 4mm}.mock span{display:inline-block;width:46%;height:12mm;margin:1mm}.mock em{width:14mm;height:14mm;border-radius:50%;position:absolute;right:4mm;top:13mm}.mock u{height:1.5mm;background:#dfe5e8;margin:2.5mm 0;text-decoration:none}.mock .side{position:absolute;left:0;top:0;bottom:0;width:11mm}.mock .side~*{margin-left:10mm}.mock .rule{height:.8mm;margin:2mm 0 5mm}.mock h6{font-size:17pt;margin:2mm 0 5mm}.mock .block{width:23mm;height:25mm}.mock .block+h6{position:absolute;right:4mm;top:3mm;font-size:25pt}.mock .row{height:.5mm;margin:4mm 0;background:#cdd5da}.mock .half{position:absolute;left:0;top:0;bottom:0;width:50%}.mock .half+h6{margin-left:23mm;font-size:25pt}.mock .big{font-size:35pt;margin:0}.mock .bar{height:4mm;width:70%;margin-bottom:5mm}.mock .tiny{width:8mm;height:2mm}.mock .curve{height:14mm;margin:-4mm -4mm 4mm;border-radius:0 0 12mm 0}section small{font-size:6.5pt;text-transform:uppercase;letter-spacing:.7px;color:#718087;font-weight:bold}h2{font-size:12pt;margin:1.5mm 0 1mm}code{font-size:7pt;background:#f1f4f5;padding:1mm}section p{font-size:7.5pt;line-height:1.35;color:#56656d;margin:3mm 0}.sw{display:flex;gap:1mm}.sw i{width:5mm;height:5mm;border:1px solid #0001}footer{margin-top:4mm;font-size:7pt;color:#718087;display:flex;justify-content:space-between}</style></head><body><header><div><h1>Monthly Report Kit</h1><p>28 Designs in 10 Layoutfamilien</p></div><p>Auswahl über <code>design.theme</code></p></header><main class="grid"><article><div class="mock"><b class="curve" style="background:#1F5D66"></b><span style="background:#F2F6F5"></span><span style="background:#F2F6F5"></span><em style="background:#DBA25D"></em><u></u></div><section><small>Flexibel · modern</small><h2>Modern Custom</h2><code>modern</code><p>Abgerundete Karten, Verlaufskopf und frei definierbare Kundenfarben.</p><div class="sw"><i style="background:#1F5D66"></i><i style="background:#2C7C82"></i><i style="background:#DBA25D"></i><i style="background:#F2F6F5"></i></div></section></article><article><div class="mock"><h6 style="color:#243B53;font-family:Georgia">Report</h6><i class="rule" style="background:#C3913C"></i><u></u><u></u><u></u></div><section><small>Flexibel · classic</small><h2>Classic Custom</h2><code>classic</code><p>Serifentypografie, feine Linien und frei definierbare Kundenfarben.</p><div class="sw"><i style="background:#243B53"></i><i style="background:#486581"></i><i style="background:#C3913C"></i><i style="background:#F4F1EA"></i></div></section></article><article><div class="mock"><b class="tiny" style="background:#E7B45A"></b><h6 style="color:#294C60">Report</h6><u></u><u></u><span style="background:#F1F5F5"></span></div><section><small>Minimal · minimal</small><h2>Nordic Light</h2><code>nordic-light</code><p>Helles, luftiges Layout mit kuehlen Blautoenen und viel Weissraum.</p><div class="sw"><i style="background:#294C60"></i><i style="background:#6D98A6"></i><i style="background:#E7B45A"></i><i style="background:#F1F5F5"></i></div></section></article><article><div class="mock"><b class="tiny" style="background:#8FD3E6"></b><h6 style="color:#182B36">Report</h6><u></u><u></u><span style="background:#EDF3F4"></span></div><section><small>Minimal · minimal</small><h2>Nordic Night</h2><code>nordic-night</code><p>Dunkle skandinavische Farbwelt mit eisblauem Akzent.</p><div class="sw"><i style="background:#182B36"></i><i style="background:#2F5668"></i><i style="background:#8FD3E6"></i><i style="background:#EDF3F4"></i></div></section></article><article><div class="mock"><b class="tiny" style="background:#C99C64"></b><h6 style="color:#49665B">Report</h6><u></u><u></u><span style="background:#F2F3ED"></span></div><section><small>Minimal · minimal</small><h2>Alpine Sage</h2><code>alpine-sage</code><p>Ruhige Salbei- und Steinfarben fuer naturnahe Marken.</p><div class="sw"><i style="background:#49665B"></i><i style="background:#718C7D"></i><i style="background:#C99C64"></i><i style="background:#F2F3ED"></i></div></section></article><article><div class="mock"><b class="top" style="background:#173B67"></b><span style="background:#EEF3F7"></span><span style="background:#EEF3F7"></span><span style="background:#37A6B8"></span><u></u><u></u></div><section><small>Business · dashboard</small><h2>Executive Blue</h2><code>executive-blue</code><p>Klares Management-Dashboard in serioesem Marineblau.</p><div class="sw"><i style="background:#173B67"></i><i style="background:#2A6298"></i><i style="background:#37A6B8"></i><i style="background:#EEF3F7"></i></div></section></article><article><div class="mock"><b class="top" style="background:#252B31"></b><span style="background:#F0F2F3"></span><span style="background:#F0F2F3"></span><span style="background:#4FA3D1"></span><u></u><u></u></div><section><small>Business · dashboard</small><h2>Executive Charcoal</h2><code>executive-charcoal</code><p>Anthrazit, Silber und Signalblau fuer technische Reports.</p><div class="sw"><i style="background:#252B31"></i><i style="background:#48525B"></i><i style="background:#4FA3D1"></i><i style="background:#F0F2F3"></i></div></section></article><article><div class="mock"><b class="top" style="background:#662E3A"></b><span style="background:#F5F0EF"></span><span style="background:#F5F0EF"></span><span style="background:#C08B5C"></span><u></u><u></u></div><section><small>Business · dashboard</small><h2>Executive Burgundy</h2><code>executive-burgundy</code><p>Zurueckhaltendes Bordeaux mit warmem Kupferakzent.</p><div class="sw"><i style="background:#662E3A"></i><i style="background:#8B4654"></i><i style="background:#C08B5C"></i><i style="background:#F5F0EF"></i></div></section></article><article><div class="mock"><i class="side" style="background:#075B6C"></i><b class="top" style="background:#EDF8F8"></b><em style="background:#58C6C7"></em><u></u><u></u></div><section><small>Sidebar · sidebar</small><h2>Ocean Breeze</h2><code>ocean-breeze</code><p>Breite Seitenleiste, maritime Blautoene und frischer Aqua-Akzent.</p><div class="sw"><i style="background:#075B6C"></i><i style="background:#18859A"></i><i style="background:#58C6C7"></i><i style="background:#EDF8F8"></i></div></section></article><article><div class="mock"><i class="side" style="background:#284E3C"></i><b class="top" style="background:#F1F4EF"></b><em style="background:#B78B55"></em><u></u><u></u></div><section><small>Sidebar · sidebar</small><h2>Forest Lodge</h2><code>forest-lodge</code><p>Tannengruen, Moos und Holzton fuer Ferien- und Naturmarken.</p><div class="sw"><i style="background:#284E3C"></i><i style="background:#47715A"></i><i style="background:#B78B55"></i><i style="background:#F1F4EF"></i></div></section></article><article><div class="mock"><i class="side" style="background:#A9474E"></i><b class="top" style="background:#FBF1ED"></b><em style="background:#F0B66D"></em><u></u><u></u></div><section><small>Sidebar · sidebar</small><h2>Sunset Coral</h2><code>sunset-coral</code><p>Warme Koralle mit tiefem Pflaumenton und freundlicher Flaechenwirkung.</p><div class="sw"><i style="background:#A9474E"></i><i style="background:#D06B62"></i><i style="background:#F0B66D"></i><i style="background:#FBF1ED"></i></div></section></article><article><div class="mock"><h6 style="color:#33312E">Aa</h6><i class="rule" style="background:#A77D45"></i><u></u><u></u><u></u></div><section><small>Editorial · editorial</small><h2>Editorial Ivory</h2><code>editorial-ivory</code><p>Magazinartige Serifengestaltung auf warmem Elfenbein.</p><div class="sw"><i style="background:#33312E"></i><i style="background:#6D655C"></i><i style="background:#A77D45"></i><i style="background:#F7F2E8"></i></div></section></article><article><div class="mock"><h6 style="color:#17222D">Aa</h6><i class="rule" style="background:#3E88A8"></i><u></u><u></u><u></u></div><section><small>Editorial · editorial</small><h2>Editorial Ink</h2><code>editorial-ink</code><p>Schwarz, Tinte und klares Blau fuer einen publizistischen Look.</p><div class="sw"><i style="background:#17222D"></i><i style="background:#2E485F"></i><i style="background:#3E88A8"></i><i style="background:#F0F3F5"></i></div></section></article><article><div class="mock"><h6 style="color:#5E3548">Aa</h6><i class="rule" style="background:#D59AA7"></i><u></u><u></u><u></u></div><section><small>Editorial · editorial</small><h2>Editorial Rose</h2><code>editorial-rose</code><p>Staubiges Rosa und dunkles Aubergine mit hochwertiger Anmutung.</p><div class="sw"><i style="background:#5E3548"></i><i style="background:#8A576B"></i><i style="background:#D59AA7"></i><i style="background:#F8EFF1"></i></div></section></article><article><div class="mock"><b class="block" style="background:#1749A3"></b><h6 style="color:#F3C342">42</h6><span style="background:#EEF3FA"></span><u></u></div><section><small>Magazin · magazine</small><h2>Magazine Cobalt</h2><code>magazine-cobalt</code><p>Kräftiges Kobaltblau, grosse Typografie und asymmetrische Module.</p><div class="sw"><i style="background:#1749A3"></i><i style="background:#2F72D6"></i><i style="background:#F3C342"></i><i style="background:#EEF3FA"></i></div></section></article><article><div class="mock"><b class="block" style="background:#245443"></b><h6 style="color:#E6C84A">42</h6><span style="background:#F2F6E9"></span><u></u></div><section><small>Magazin · magazine</small><h2>Magazine Citrus</h2><code>magazine-citrus</code><p>Dunkles Gruen mit Zitrusgelb fuer einen lebendigen Auftritt.</p><div class="sw"><i style="background:#245443"></i><i style="background:#3E8063"></i><i style="background:#E6C84A"></i><i style="background:#F2F6E9"></i></div></section></article><article><div class="mock"><b class="block" style="background:#5A2D67"></b><h6 style="color:#E8A875">42</h6><span style="background:#F7F0F8"></span><u></u></div><section><small>Magazin · magazine</small><h2>Magazine Plum</h2><code>magazine-plum</code><p>Pflaume, Violett und Apricot fuer kreative Kundenreports.</p><div class="sw"><i style="background:#5A2D67"></i><i style="background:#814696"></i><i style="background:#E8A875"></i><i style="background:#F7F0F8"></i></div></section></article><article><div class="mock"><b class="top" style="background:#275F4B"></b><u class="row"></u><u class="row"></u><u class="row"></u><u class="row"></u><u class="row"></u><u class="row"></u></div><section><small>Tabellarisch · ledger</small><h2>Ledger Green</h2><code>ledger-green</code><p>Praezises Tabellenlayout in klassischem Buchhaltungsgruen.</p><div class="sw"><i style="background:#275F4B"></i><i style="background:#467A66"></i><i style="background:#A4864D"></i><i style="background:#F1F4F0"></i></div></section></article><article><div class="mock"><b class="top" style="background:#294D73"></b><u class="row"></u><u class="row"></u><u class="row"></u><u class="row"></u><u class="row"></u><u class="row"></u></div><section><small>Tabellarisch · ledger</small><h2>Ledger Blue</h2><code>ledger-blue</code><p>Dichtes Zahlenlayout in Blau und Schiefergrau.</p><div class="sw"><i style="background:#294D73"></i><i style="background:#4B7198"></i><i style="background:#8AAAC2"></i><i style="background:#EFF3F6"></i></div></section></article><article><div class="mock"><b class="top" style="background:#664B38"></b><u class="row"></u><u class="row"></u><u class="row"></u><u class="row"></u><u class="row"></u><u class="row"></u></div><section><small>Tabellarisch · ledger</small><h2>Ledger Sepia</h2><code>ledger-sepia</code><p>Warmer Papiercharakter mit Sepia und Rostakzent.</p><div class="sw"><i style="background:#664B38"></i><i style="background:#8A6A51"></i><i style="background:#B5784E"></i><i style="background:#F6F0E7"></i></div></section></article><article><div class="mock"><i class="half" style="background:#095B61"></i><h6 style="color:#9ED8CB">06</h6><u></u><u></u><u></u></div><section><small>Split · split</small><h2>Split Teal</h2><code>split-teal</code><p>Geteilte Titelflaeche mit Petrol und hellem Tuerkis.</p><div class="sw"><i style="background:#095B61"></i><i style="background:#2E8E8B"></i><i style="background:#9ED8CB"></i><i style="background:#EEF7F5"></i></div></section></article><article><div class="mock"><i class="half" style="background:#513A75"></i><h6 style="color:#BFA8E2">06</h6><u></u><u></u><u></u></div><section><small>Split · split</small><h2>Split Violet</h2><code>split-violet</code><p>Vertikal geteiltes Layout in Violett und Lavendel.</p><div class="sw"><i style="background:#513A75"></i><i style="background:#7557A0"></i><i style="background:#BFA8E2"></i><i style="background:#F4F0FA"></i></div></section></article><article><div class="mock"><i class="half" style="background:#8B4938"></i><h6 style="color:#E3B68F">06</h6><u></u><u></u><u></u></div><section><small>Split · split</small><h2>Split Terracotta</h2><code>split-terracotta</code><p>Terrakotta, Lehm und Sand fuer warme Markenwelten.</p><div class="sw"><i style="background:#8B4938"></i><i style="background:#B26950"></i><i style="background:#E3B68F"></i><i style="background:#FAF1EA"></i></div></section></article><article><div class="mock"><h6 class="big" style="color:#B3202A">72</h6><b class="bar" style="background:#F2B84B"></b><u></u><u></u></div><section><small>Statement · poster</small><h2>Poster Red</h2><code>poster-red</code><p>Plakatives Rot-Schwarz-Layout mit sehr grossen Kennzahlen.</p><div class="sw"><i style="background:#B3202A"></i><i style="background:#D53B42"></i><i style="background:#F2B84B"></i><i style="background:#F7F2F0"></i></div></section></article><article><div class="mock"><h6 class="big" style="color:#171717">72</h6><b class="bar" style="background:#F1C928"></b><u></u><u></u></div><section><small>Statement · poster</small><h2>Poster Yellow</h2><code>poster-yellow</code><p>Schwarz und Signalgelb fuer maximale visuelle Klarheit.</p><div class="sw"><i style="background:#171717"></i><i style="background:#3B3B3B"></i><i style="background:#F1C928"></i><i style="background:#F7F5E8"></i></div></section></article><article><div class="mock"><h6 class="big" style="color:#111111">72</h6><b class="bar" style="background:#A3A3A3"></b><u></u><u></u></div><section><small>Statement · poster</small><h2>Poster Mono</h2><code>poster-mono</code><p>Konsequentes Schwarz-Weiss-Design mit typografischem Fokus.</p><div class="sw"><i style="background:#111111"></i><i style="background:#444444"></i><i style="background:#A3A3A3"></i><i style="background:#F3F3F3"></i></div></section></article><article><div class="mock"><b class="curve" style="background:#67558B"></b><span style="background:#F5F0F8"></span><span style="background:#F5F0F8"></span><em style="background:#D5A6B8"></em><u></u></div><section><small>Soft · modern</small><h2>Soft Lavender</h2><code>soft-lavender</code><p>Sanftes Kartenlayout in Lavendel, Flieder und warmem Rosa.</p><div class="sw"><i style="background:#67558B"></i><i style="background:#8B76B3"></i><i style="background:#D5A6B8"></i><i style="background:#F5F0F8"></i></div></section></article><article><div class="mock"><b class="curve" style="background:#172A42"></b><span style="background:#EFF2F4"></span><span style="background:#EFF2F4"></span><em style="background:#D2A64C"></em><u></u></div><section><small>Premium · modern</small><h2>Midnight Gold</h2><code>midnight-gold</code><p>Tiefes Nachtblau mit Goldakzent fuer einen hochwertigen Auftritt.</p><div class="sw"><i style="background:#172A42"></i><i style="background:#284967"></i><i style="background:#D2A64C"></i><i style="background:#EFF2F4"></i></div></section></article></main><footer><span>Modern und Classic nutzen standardmäßig Kundenfarben.</span><span>Theme-Palette oder individuelle Kundenpalette wählbar.</span></footer></body></html> |