Dub
La kontrolpanelo de Link, la senbrila rizpapero
La vida sistemo de Dub havas moderan, preskaŭ redakcian SaaS-estetikon: preskaŭ blanka kanvaso tenata kune per maldikaj randoj anstataŭ elstarantaj elementoj, kun densa monokroma tipografio provizanta strukturan subtenon kaj ununura helblua koloro (#2563eb) faranta impreson. La surfacoj restas ebenaj kaj senkadraj je unua ekrigardo, sed ĉiu ujo havas 1-pikselan #e5e5e5 marĝenon, elvokante la senton de presita dokumento. Personeco atingiĝas per malgranda aro da koloraj "pilolaj" akcentoj (oranĝa, verda, viola) kiuj flosas super la neŭtrala paletro, kaj titoloj kiuj sentas sin memfidaj kaj modernaj sen esti pompaĉaj. Komponantoj estas kompaktaj kaj densaj: 8-pikselaj gutoj, 12-piksela kartradiuso, pilolformaj etikedoj je 9999-pikselaj, kaj nevideblaj kontroloj anstataŭ pezaj, plenaj butonoj.
La paĝo estas konstruita sur centrita aranĝo kun maksimuma larĝo de proksimume 1200 rastrumeroj. La ĉefa elemento estas centrita teksta bloko kun tri ŝvebantaj elementoj (Afiliigaj Programoj, Konverta Analizo, Mallongaj Ligiloj) poziciigitaj horizontale super granda produkta aranĝo. Sekcioj estas aranĝitaj vertikale kun koheraj 64 rastrumeroj, alternante inter blanka kanvaso kaj #f5f5f5 papera nebulo por tona apartigo. La suba sekcio uzas Z-forman aranĝon: redakcia teksto estas centrita en la meza triono, kaj ŝvebantaj uzantinterfacaj kartoj estas ankritaj al la maldekstraj kaj dekstraj marĝenoj, kreante nesimetrian, revu-similan ritmon. La logo-nubo estas simpla 5x2 krado, centrita sur la paĝo. Navigado estas minimuma supra stango - logo maldekstre, navigado en la centro, grupo de du butonoj (fantoma butono "Ensaluti" + plena butono "Registriĝi") dekstre - sen fiksa aŭ mega-menuo. La aranĝo de la instrumentpanelo en la ĉefa fenestro montras klasikan du-kolumnan aplikaĵan aranĝon: fiksan flankmenuon (similan al 240px) + enhavan areon, kiu difinas la densecon de produktaj informoj por vizitantoj antaŭ ol ili komencas rulumi.
La bildoj estas produkto-fokusitaj, ne vivstil-fokusitaj. La ĉefa ekrano estas centrita ĉirkaŭ granda ekranfoto de la instrumentpanelo, reprezentanta realmondan produktan modelon kun flankmenua navigado, datuma tabelo kaj ŝvebantaj uzantinterfacaj elementoj, aranĝitaj kiel plata panelo sur blanka kanvaso. Klientaj emblemoj estas montrataj en nesaturita griza krado (abelujo, superpotenco, Chatbase, ktp.) por agnoski ilian socimedian agadon, senkolorigite por permesi al la sola blua akcento de la paĝo resti domina. Ŝvebantaj partneraj kartoj (malgrandaj profiloj kaj kaheloj kun enspezo/pagdatumoj) moviĝas ĉirkaŭ blokoj de redakcia teksto ĉe la fundo, kreante senton de profundo sen la uzo de ombroj sur la teksto mem. La punktita krada fonpadrono estas signifa trajto: maldika vico de malgrandaj punktoj kun tre malalta opakeco kreas teksturon kaj la senton de dezajna sistemo/desegna surfaco, emfazante la poziciigon de la retejo kiel "moderna ligilatribua platformo". La ikonografio estas minimuma, kun konturoj kaj plenigaĵoj, kaj uzas akcentan paletron (mandarino-oranĝo, lavendviola, mentoverda) por trajtaj etikedoj. Neniuj fotoj, ilustraĵoj aŭ 3D-modeloj estas uzataj — la uzantinterfaco de la produkto mem estas vida lingvo.
Paletro
Marko
- Electric Blue
#2563eb— La ĉefa markokoloro — la emblemo, ligiloj, ŝlosilaj rendimentaj indikiloj, aktivaj statoj kaj piktogramakcentoj — estas uzata. Riĉa bluo sur blanka fono kreas la solan vidan allogon de la sistemo. - Deep Sapphire
#1e40af— La ĉefa fono de la agobutono, la grasa plenigaĵo de la voko al ago — la sola koloro indikanta la agon — estas uzata ŝpareme por altiri atenton.
Neŭtrala
- Canvas White
#ffffff— Paĝa fono, kartosurfaco, ŝprucfenestroj estas la absoluta fundamento de ĉiu ekrano. - Paper Mist
#f5f5f5— Subtilaj ŝvebaj koloroj ŝanĝiĝas por nestitaj kartoj, aldonaj paneloj kaj plenigaĵoj. - Ash
#e5e5e5— La maldikaj randoj sur la kartoj, enigaj konektiloj kaj dividiloj estas la struktura linio, kiu tenas la sistemon kune. - Smoke
#d4d4d4— Pli akraj limoj por elektitaj ujoj kaj pliaj butonkonturoj. - Pebble
#c8c8c8— Borderoj, kontrolkonturoj, kaj strukturaj dividiloj kun meza kontrasto. Ĉi tiu koloro ne estu uzata kiel la ĉefa koloro por alvokoj al ago. - Midnight Ink
#0a0a0a— La ĉefa teksto de la butonoj, elstarigitaj butonoj kaj navigacia teksto estas preskaŭ nigraj por maksimuma kontrasto.
Tipografio
de 11 ĝis 48 rastrumeroj · 9 paŝoj
- Satoshi — anstataŭaĵo: Inter (weight 500 · konturoj 500 · Titoloj - uzataj nur en linioj de 36–48 rastrumeroj por titoloj kaj sekciaj titoloj. Tiparpezo - 500 (meza, ne grasa): Titoloj aspektas memfidaj kaj modernaj, sed neniam tro potencaj. La geometriaj proporcioj de Satoshi donas al la tiparo iomete redakcian, modernan senton, kiun la ĉefa teksto de Inter ne povas reprodukti.
- Inter — anstataŭaĵo: Inter (native) · konturoj 400, 500, 600 · Korpoteksto, UI-etikedoj, navigado, subtitoloj kaj flankaj titoloj. Inter estas la ĉefa laborĉevalo, pritraktante ĉion de 11-pikselaj mikro-etikedoj ĝis 30-pikselaj duarangaj titoloj. Pezo de 400 estas la defaŭlta por korpoteksto, 500 por elstarigitaj elementoj kaj butonetikedoj, kaj 600 estas rezervita por gravaj UI-etikedoj. 16pikseloj kun linialteco de 1.5 estas la plej ofte trovata unu-ŝtupa grandeco (1220 okazoj), konfirmante ke 16pikseloj estas la kanonika grandeco de korpoteksto.
- Geist Mono — anstataŭaĵo: JetBrains Mono or IBM Plex Mono · konturoj 400, 500 · Kodfragmentoj, teknikaj metadatenoj, kaj enigitaj unu-spacigitaj ĵetonoj estas uzataj en kodblokoj je 12–14 rastrumeroj kaj en grandaj kodaj ekranelementoj je 24 rastrumeroj. Tio certigas la kredindecon de la programista ilo, konforme al la produkta poziciigado de Dub.
Intervaloj kaj formo
| Celo | Signifo |
|---|---|
| Denseco | averaĝa |
| Baza paŝo | 8px |
| Butona radiuso | 8px |
| Karto-radiuso | 12px |
| Ombroj | ne - limoj anstataŭ ombroj |
| Inter sekcioj | 64px |
| Paĝlarĝo | 1200px |
AI konstruos vian retejon laŭ la stilo de Dub kaj plenigos ĝin
- Plenigu per produktoj kaj afiŝoj per la ligilo - Instagram, TikTok, Facebook.
- Transdonu enhavon de via malnova retejo — nur specifu la adreson.
- Moderna dezajno sur la plej bona motoro: React ( Next.js) kun servila bildigo kaj SEO-optimigo tuj uzeblaj.
- Plene aŭtomatigita SEO-optimigo por serĉrezultoj kaj rekomendoj pri neŭralaj retoj.
Similaj stiloj
- ElevenLabs — Fotoeseo en varmaj kremkoloraj tonoj kun subtilaj titoloj. Notlibro en la stilo de Bauhaus — ovoŝelkolora papero, nigra inko, kaj ununura viola kaj oranĝa akcento por montri la produkton.
- Awesomic — Redakcia zinka reto kun oranĝaj interpunkciaj signoj rememorigaj pri konfetoj
- Monad — redakcia teknika revuo sur varma pergameno
- Seline Analytics — Trankvila analiza tablo sur varma papero
- Notion — Varma papera kajero en la tagmeza suno
- Anthropic — Scienca kampa revuo sur varma pergamentpapero — trankvilaj eburaj surfacoj, serifaj ĉefartikoltitoloj, kaj ununura argila akcento kiu aperas nur kiam agado estas necesa.
- Calendly — Malhelblua inko sur malvarma marmoro
- Augen Pro — La blanka prezento de Apple havas klinikan, senpezan, elektran bluon kiel la solan akĉenton en monokroma spaco.
- Antimetal — Redakcia kroniko sur kremkolora papero — trankvila mateno ĉe scienca revuo, kie sinregado transdonas fidon kaj serifoj faras la pezan laboron
- Perk — Elektra kalko sur varma pergamentpapero
- Ditto — Sunlumita laborejo kreante specimenojn de sovaĝfloroj. Varmaj kremkoloraj surfacoj, vigla flava bazkoloro, profundaj marbluaj inkoj, organikaj kolorformoj florantaj malantaŭ la peco.
- Officevibe — Redakcia revuo sur varma kremkolora papero. Imagu pripenseman eseon pri dungitaro-administrado, prezentitan kiel produkton — kursiva serifa tiparo flustranta tra moderna blua interfaco.