Dub
Link säi Kontrollpanel aus matte Räispabeier
Dub säi visuellt System huet eng zréckgehalen, bal redaktionell SaaS-Ästhetik: eng bal wäiss Leinwand, déi duerch dënn Borduren amplaz vun erausstinnenden Elementer zesummegehale gëtt, mat dichter monochromer Typographie, déi strukturell Ënnerstëtzung bitt, an enger eenzeger hellbloer Faarf (#2563eb), déi e Statement mécht. D'Uewerfläche bleiwen op den éischte Bléck flaach a ouni Rahmen, awer all Container huet eng 1px #e5e5e5 Rand, wat d'Gefill vun engem gedréckten Dokument ervirrufft. Perséinlechkeet gëtt duerch e klenge Set vu faarwege "Pille"-Akzenter (orange, gréng, violett) erreecht, déi iwwer der neutraler Palette schwiewen, an Iwwerschrëften, déi sech selbstsécher a modern fillen, ouni opfälleg ze sinn. D'Komponente si kompakt an dicht: 8px-Rinnen, 12px-Kaarteradius, pillefërmeg Etiketten mat 9999px, an onsichtbar Kontrollen amplaz vu schwéieren, gefëllte Knäppercher.
D'Säit ass op engem zentréierte Layout mat enger maximaler Breet vu ronn 1200px opgebaut. Den Haaptelement ass e zentréierten Textblock mat dräi schwiewenden Elementer (Partnerprogrammer, Konversiounsanalysen, Kuerzlinks), déi horizontal iwwer engem grousse Produktlayout positionéiert sinn. D'Sektiounen sinn vertikal mat konsequenten 64px-Rinnen arrangéiert, ofwiesselnd tëscht wäisser Leinwand an #f5f5f5 Pabeiernebel fir Tonaltrennung. Den ënneschten Deel benotzt en Z-fërmegen Layout: den redaktionellen Text ass am mëttleren Drëttel zentréiert, an déi schwiewend UI-Kaarte sinn un de lénksen a rietse Rand verankert, wat en asymmetreschen, Zäitschrëftenähnleche Rhythmus erstellt. D'Logo-Wollek ass e einfachen 5x2-Raster, zentréiert op der Säit. D'Navigatioun ass eng minimalistesch iewescht Leinwand - Logo lénks, Navigatioun an der Mëtt, eng Grupp vun zwee Knäppercher (e Geeschter-"Login"-Knäppchen + e gefëllte "Registréieren"-Knäppchen) riets - ouni e fixe oder Mega-Menü. Den Dashboard-Layout vum Haaptfenster weist e klassescht App-Layout mat zwou Kolonnen: eng fix Sidebar (ähnlech wéi 240px) + e Beräich fir Inhalter, deen d'Dicht vun de Produktinformatioune fir d'Visiteuren definéiert, ier se ufänken ze scrollen.
D'Visualiséierunge si produktorientéiert, net Lifestyle-orientéiert. Den Haaptbildschierm ass zentréiert op engem grousse Screenshot vum Dashboard, deen e Produktmockup aus der realer Welt mat enger Sidebar-Navigatioun, enger Datentabell an schwiewenden UI-Elementer duerstellt, déi als flaach Panel op enger wäisser Leinwand presentéiert sinn. Clientlogoen ginn an engem desaturéierte Grostufenraster (Beehiv, Superpower, Chatbase, etc.) ugewisen, fir hir Leeschtung op de soziale Medien ze unerkennen, ouni Faarf, fir datt den eenzege bloen Akzent vun der Säit dominant bleift. Schwiewend Partnerkaarten (kleng Profiler a Kachelen mat Recetten-/Bezuelungsdaten) beweege sech ëm Blöcke vum redaktionellen Text um Buedem, wouduerch e Gefill vun Déift entsteet, ouni Schied um Text selwer ze benotzen. Dat punktéiert Raster-Hannergrondmuster ass e charakteristescht Feature: eng dënn Rei vu klenge Punkten mat ganz gerénger Opazitéit erstellt Textur an d'Gefill vun engem Designsystem/Zeechenuewerfläch, wat d'Positionéierung vun der Säit als "modern Link-Attributiounsplattform" ënnersträicht. D'Ikonographie ass minimal, mat Konturen a Fëllungen, a benotzt eng Akzentpalette (Mandarinorange, Lavendelviolett, Minzgréng) fir Feature-Tags. Et gi keng Fotoen, Illustratiounen oder 3D-Modeller benotzt - d'Benotzerinterface vum Produkt selwer ass eng visuell Sprooch.
Palette
Mark
- Electric Blue
#2563eb— Déi primär Markenfaarf – de Logo, d'Linken, d'Key Performance Indicators, déi aktiv Zoustänn an d'Ikonakzenter – gëtt benotzt. E räicht Blo op engem wäissen Hannergrond erstellt den eenzegen visuellen Appel vum System. - Deep Sapphire
#1e40af— Den Haapthannergrond vum Aktiounsknäppchen, déi fettgedréckt Fëllung vum Opruff zur Handlung – déi eenzeg Faarf, déi d'Aktioun bezeechent – gëtt spuersam benotzt, fir d'Opmierksamkeet op sech ze zéien.
Neutral
- Canvas White
#ffffff— Säitenhannergrond, Kaartuewerfläch, Pop-up-Panelen sinn déi absolut Basis vun all Bildschierm. - Paper Mist
#f5f5f5— Subtil Ännerunge vun der Faarf beim Schweefe fir verschachtelt Kaarten, zousätzlech Panelen a Fëllungen. - Ash
#e5e5e5— Déi dënn Ränner op de Kaarten, Input-Stecker an Trennwänn sinn déi strukturell Linn, déi de System zesummenhält. - Smoke
#d4d4d4— Méi schaarf Grenzen fir ausgewielte Container an zousätzlech Knäppkonturen. - Pebble
#c8c8c8— Grenzen, Kontrollkonturen a strukturell Trennwänn mat mëttlerem Kontrast. Dës Faarf soll net als Haaptfaarf fir Handlungsruff benotzt ginn. - Midnight Ink
#0a0a0a— Den Haapttext vun de Knäppercher, déi markéiert Knäppercher an den Navigatiounstext si bal schwaarz fir maximalen Kontrast.
Typographie
vun 11 bis 48px · 9 Schrëtt
- Satoshi — Ersatz: Inter (weight 500 · Konturen 500 · Iwwerschrëften uweisen – nëmme mat enger Breet vun 36–48 Pixel fir Iwwerschrëften an Sektiounstitelen benotzt. Schrëftgewiicht – 500 (mëttel, net fettgedréckt): Iwwerschrëften gesinn selbstbewosst a modern aus, awer ni iwwerdriwwen. Déi geometresch Proportiounen vum Satoshi ginn der Schrëft e liicht redaktionellt, modernt Gefill, dat den Inter säi Kierpertext net replizéiere kann.
- Inter — Ersatz: Inter (native) · Konturen 400, 500, 600 · Kierpertext, UI-Labels, Navigatioun, Ënnertitelen an Niewetitelen. Inter ass dat primär Aarbechtspäerd a këmmert sech ëm alles vu 11px Mikro-Labels bis zu 30px Niewetitelen. E Gewiicht vu 400 ass den Standard fir Kierpertext, 500 fir markéiert Elementer an Knäppchen-Labels, a 600 ass reservéiert fir wichteg UI-Labels. 16px mat enger Zeilhéicht vun 1,5 ass déi heefegst benotzt Gréisst fir eenzel Schrëtt (1220 Optriede), wat bestätegt, datt 16px déi kanonesch Gréisst fir Kierpertext ass.
- Geist Mono — Ersatz: JetBrains Mono or IBM Plex Mono · Konturen 400, 500 · Code-Snippets, technesch Metadaten an agebette monospaced Tokens ginn a Codeblöcke mat 12–14px an a grousse Code-Display-Elementer mat 24px benotzt. Dëst garantéiert d'Glaubwürdegkeet vum Entwéckler-Tool, am Aklang mat der Produktpositionéierung vun Dub.
Intervaller a Form
| Zweck | Bedeitung |
|---|---|
| Dicht | duerchschnëttlech |
| Basis Schrëtt | 8px |
| Knäppchenradius | 8px |
| Kaarteradius | 12px |
| Schied | keng Grenzen amplaz vu Schied |
| Tëscht de Sektiounen | 64px |
| Säitebreet | 1200px |
KI baut Är Websäit am Stil vun Dub op a fëllt se aus
- Fëllt mat Produkter a Posts iwwer de Link aus - Instagram, TikTok, Facebook.
- Inhalt vun Ärer aler Säit transferéieren - gitt einfach d'Adress un.
- Modernen Design op der beschter Engine: React ( Next.js) mat Serverrendering an SEO Optimiséierung direkt aus der Këscht.
- Vollautomatesch SEO-Optimiséierung fir Sichresultater an Empfehlungen fir neuronal Netzwierker.
Ähnlech Stiler
- ElevenLabs — E Fotoessay a waarme Crèmetéin mat subtile Schlagzeilen. En Notizbuch am Bauhaus-Stil - Eeërschuelfaarwegt Pabeier, schwaarz Tënt an een eenzege violette an orange Akzent fir d'Produktpresentatioun.
- Awesomic — Redaktiounszinknetz mat orange Punktuatiounszeechen, déi u Konfetti erënneren
- Monad — redaktionell technesch Zäitschrëft op waarmem Pergament
- Seline Analytics — Eng roueg analytesch Tabelle op waarmem Pabeier
- Notion — E waarme Pabeiernotizbuch an der Mëttesonn
- Anthropic — Eng wëssenschaftlech Feldzäitschrëft op waarmem Pergament - roueg elfenbeinfaarweg Uewerflächen, schifereg Editorial-Iwwerschrëften an een eenzegen Tounakzent, deen nëmmen erschéngt, wann Handlung néideg ass.
- Calendly — Donkelblo Tënt op kalem Marmer
- Augen Pro — Apple seng wäiss Presentatioun weist e klineschen, gewichtslose, elektresche Blo als eenzegen Akzent an engem monochrome Raum.
- Antimetal — Eng redaktionell Chronik op cremefaarwegem Pabeier - e rouege Moien an enger wëssenschaftlecher Zäitschrëft, wou Zréckhaltung Selbstvertrauen ausstraalt a Serifen déi schwéier Aarbecht maachen.
- Perk — Elektresch Kalk op waarmem Bakpabeier
- Ditto — E sonnebeliichte Workshop fir d'Erstelle vu Wildblummenprouwen. Waarm Crème-Uewerflächen, eng lieweg giel Basisfaarf, déif marineblo Tënten, organesch Faarfformen, déi hannert dem Stéck bléien.
- Officevibe — Eng redaktionell Zäitschrëft op waarmem crèmefaarwege Pabeier. Stellt Iech en nodenklechen Essay iwwer HR-Management vir, deen als Produkt presentéiert gëtt - eng Schrëft mat Serif, déi duerch eng modern blo Interface flüstert.