Dub
Link's matte ryspapier kontrôlepaniel
Dub syn fisuele systeem hat in beheinde, hast redaksjonele SaaS-estetyk: in hast wyt doek dat byinoar hâlden wurdt troch tinne rânen ynstee fan útstekkende eleminten, mei tichte monochrome typografy dy't strukturele stipe biedt en in inkele helderblauwe kleur (#2563eb) dy't in statement makket. Oerflakken bliuwe op it earste each flak en sûnder frame, mar elke kontener hat in marzje fan 1px #e5e5e5, wat it gefoel fan in printe dokumint opropt. Persoanlikheid wurdt berikt troch in lytse set kleurde "pil"-aksinten (oranje, grien, pears) dy't boppe it neutrale palet sweve, en kopteksten dy't selsbetrouwen en modern fiele sûnder opfallend te wêzen. Komponinten binne kompakt en ticht: 8px-goaten, 12px-kaartradius, pilfoarmige labels op 9999px, en ûnsichtbere kontrôles ynstee fan swiere, folde knoppen.
De side is boud op in sintrearre yndieling mei in maksimale breedte fan sawat 1200px. It haadelemint is in sintrearre tekstblok mei trije driuwende eleminten (Affiliate Programs, Conversion Analytics, Short Links) horizontaal pleatst boppe in grutte produktyndieling. Seksjes binne fertikaal regele mei konsekwinte 64px-goaten, ôfwikseljend tusken wyt doek en #f5f5f5 papierwaas foar toanskieding. De ûnderste seksje brûkt in Z-foarmige yndieling: redaksjonele tekst is sintrearre yn it middelste tredde, en driuwende UI-kaarten binne ferankere oan 'e linker- en rjochtermarzjes, wêrtroch in asymmetrysk, tydskrift-eftich ritme ûntstiet. De logowolk is in ienfâldich 5x2 raster, sintrearre op 'e side. Navigaasje is in minimalistyske boppeste balke - logo oan 'e linkerkant, navigaasje yn it sintrum, in groep fan twa knoppen (in spoekknop "Oanmelde" + in ynfolde knop "Registrearje") oan 'e rjochterkant - sûnder in fêst of mega-menu. De dashboard-yndieling fan it haadfinster lit in klassike app-yndieling mei twa kolommen sjen: in fêste sydbalke (fergelykber mei 240px) + in ynhâldsgebiet dat de tichtheid fan produktynformaasje foar besikers definiearret foardat se begjinne te scrollen.
De fisuele eleminten binne produkt-rjochte, net libbensstyl-rjochte. It haadskerm is sintraal op in grutte skermôfbylding fan it dashboard, dy't in echte produktmockup foarstelt mei in sydbalke-navigaasje, gegevenstabel en driuwende UI-eleminten, útlein as in plat paniel op in wyt doek. Klantlogo's wurde werjûn yn in ûnfersêde griisskaalraster (bijenkorf, supermacht, Chatbase, ensfh.) om har prestaasjes op sosjale media te erkennen, sûnder kleur om it ienige blauwe aksint fan 'e pagina dominant te litten bliuwen. Driuwende partnerkaarten (lytse profilen en tegels mei ynkomsten-/betellingsgegevens) bewege om blokken redaksjonele tekst oan 'e ûnderkant, wêrtroch in gefoel fan djipte ûntstiet sûnder it brûken fan skaden op 'e tekst sels. It stippele rasterachtergrûnpatroan is in karakteristike funksje: in tinne rige lytse stippen mei in heul lege dekking makket tekstuer en it gefoel fan in ûntwerpsysteem/tekenoerflak, en beklammet de posysjonearring fan 'e side as in "modern keppelingsattribúsjeplatfoarm". De ikonografy is minimaal, mei kontoeren en opfolingen, en brûkt in aksintpalet (mandarijnoranje, lavendelpears, mintgrien) foar funksjetags. Der wurde gjin foto's, yllustraasjes of 3D-modellen brûkt - de brûkersynterface fan it produkt sels is in fisuele taal.
Palet
Merk
- Electric Blue
#2563eb— De primêre merkkleur - it logo, keppelings, wichtige prestaasje-yndikatoaren, aktive steaten en ikoanaksinten - wurdt brûkt. In ryk blau op in wite eftergrûn makket de ienige fisuele oantrekkingskrêft fan it systeem. - Deep Sapphire
#1e40af— De wichtichste eftergrûn fan 'e aksjeknop, de fetdruk fan 'e oprop ta aksje - de ienige kleur dy't de aksje oanjout - wurdt sparjend brûkt om oandacht te lûken.
Neutraal
- Canvas White
#ffffff— Side-eftergrûn, kaartoerflak, pop-uppanielen binne de absolute basis fan elk skerm. - Paper Mist
#f5f5f5— Subtile sweefkleurferoarings foar nestele kaarten, ekstra panielen en opfolingen. - Ash
#e5e5e5— De tinne rânen op 'e kaarten, ynfierferbiningen en skieders binne de strukturele line dy't it systeem byinoar hâldt. - Smoke
#d4d4d4— Skerpere rânen foar selektearre konteners en ekstra knopkonturen. - Pebble
#c8c8c8— Rânen, kontrôlekonturen en strukturele skieders mei middelmatig kontrast. Dizze kleur moat net brûkt wurde as de primêre kleur foar oprop ta aksje. - Midnight Ink
#0a0a0a— De haadtekst fan 'e knoppen, markearre knoppen en navigaasjetekst binne hast swart foar maksimaal kontrast.
Typografy
fan 11 oant 48px · 9 stappen
- Satoshi — ferfanging: Inter (weight 500 · sketsen 500 · Kopteksten werjaan - allinnich brûkt yn rigels fan 36-48px foar kopteksten en seksjetitels. Lettertypegewicht - 500 (middel, net fet): Kopteksten sjogge selsbetrouwen en modern út, mar nea oerweldigjend. De geometryske proporsjes fan Satoshi jouwe it lettertype in wat redaksjonele, moderne útstrieling dy't de haadtekst fan Inter net replikearje kin.
- Inter — ferfanging: Inter (native) · sketsen 400, 500, 600 · Bodytekst, UI-labels, navigaasje, subkopteksten en lytse kopteksten. Inter is it primêre wurkhynder, en behannelet alles fan 11px mikro-labels oant 30px sekundêre kopteksten. In gewicht fan 400 is de standert foar bodytekst, 500 foar markearre eleminten en knoplabels, en 600 is reservearre foar wichtige UI-labels. 16px mei in rigelhichte fan 1.5 is de meast foarkommende single-step grutte (1220 foarkomsten), wat befêstiget dat 16px de kanonike bodytekstgrutte is.
- Geist Mono — ferfanging: JetBrains Mono or IBM Plex Mono · sketsen 400, 500 · Koadesnippets, technyske metadata en ynbêde monospaced tokens wurde brûkt yn koadeblokken op 12–14px en yn grutte koadewerjefte-eleminten op 24px. Dit soarget foar de leauwensweardigens fan 'e ûntwikkelderstool, yn oerienstimming mei de produktposysjonearring fan Dub.
Yntervallen en foarm
| Doel | Betsjutting |
|---|---|
| Dichtheid | trochsneed |
| Basisstap | 8px |
| Knopradius | 8px |
| Kaartradius | 12px |
| Skaden | gjin grinzen ynstee fan skaden |
| Tusken seksjes | 64px |
| Sidebreedte | 1200px |
AI sil jo webside bouwe yn Dub -styl en it folje
- Folje oan mei produkten en berjochten fia de link - Instagram, TikTok, Facebook.
- Oerdrage ynhâld fan jo âlde side - spesifisearje gewoan it adres.
- Modern ûntwerp op 'e bêste motor: React ( Next.js) mei serverrendering en SEO-optimalisaasje direkt út 'e doaze.
- Folslein automatisearre SEO-optimalisaasje foar sykresultaten en oanbefellings foar neurale netwurken.
Ferlykbere stilen
- Mollie — In kasjmier teller, in tsjuster grutboek. Lit genôch wite romte oer foar redaksjoneel ûntwerp om 'e swarte tekst hinne, en fersterkje dan produktrelatearre punten mei waarme crèmes, espressobrowns en taktile foto's fan werklike betelmethoden.
- Kagi — In aparte lêskeamer. Meitsje in iepen wite romte om fetdrukte grafyttekst hinne, mei subtile pearse aksinten en waarme pastelkleurige oerflakken om de rêst te ûnderbrekken.
- Milanote — Milanote is in tawijde kreative studio. Meitsje redaksjonele galery-styl siden mei driuwende fisuele boerden: donkere framed muorren, wite werjefteromte en skermôfbyldings dy't lykje op echte objekten mei in sêfte djipte.
- Co2 — In klimaatatlas yn winterljocht. Meitsje siden lykas in lânskip fan loftdokuminten, wêr't serif-koppen, kategorykodearre gegevens en izige ôfbyldings brede wite marzjes markearje.
- GitButler — Turkoois oan 'e ein fan 'e tekst. In kombinaasje fan serif-koppen mei hege kontrast mei subtile technyske rasters, waarme grafyt-oerflakken en in diskreet turkoois aksint.
- ElevenLabs — In foto-essay yn waarme crèmekleurige toanen mei subtile koppen. In notebook yn Bauhaus-styl - aai-skulpkleurich papier, swarte inket, en in inkele pearse en oranje aksint foar produktwerjefte.
- Awesomic — Redaksjoneel sinkgaas mei oranje leestekens dy't tinken dogge oan konfetti
- Monad — redaksjoneel technysk tydskrift op waarm perkament
- Seline Analytics — In rêstige analytyske tafel op waarm papier
- Notion — In waarm papieren notebook yn 'e middeis sinne
- Anthropic — In wittenskiplik fjildtydskrift op waarm vellum - rêstige ivoaren oerflakken, serifisearre redaksjonele koppen, en in ienich klaaiaksint dat allinich ferskynt as aksje nedich is.
- Calendly — Donkerblauwe inket op kâld moarmer