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
- 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
- Augen Pro — De wite presintaasje fan Apple hat in klinysk, gewichtleas, elektrysk blau as it ienige aksint yn in monochrome romte.
- Antimetal — In redaksjonele kronyk op crèmekleurich papier - in rêstige moarn yn in wittenskiplik tydskrift, dêr't beheining fertrouwen útstraalt en serifs it swiere wurk dogge
- Perk — Elektryske limoen op waarm perkamentpapier
- Ditto — In sinneferljochte workshop dy't foarbylden fan wylde blommen makket. Waarme crèmekleurige oerflakken, in libbene giele basiskleur, djip marineblauwe inkten, organyske kleurfoarmen dy't efter it stik bloeie.
- Officevibe — In redaksjoneel tydskrift op waarm crèmekleurich papier. Stel jo in neitocht essay foar oer HR-behear, presintearre as in produkt - in kursive serif-lettertype dat flústeret troch in moderne blauwe ynterface.