Dub
Link se mat ryspapier-beheerpaneel
Dub se visuele stelsel het 'n ingehoue, amper redaksionele SaaS-estetika: 'n amper-wit doek wat deur dun rande eerder as uitstekende elemente bymekaar gehou word, met digte monochroom tipografie wat strukturele ondersteuning bied en 'n enkele helderblou kleur (#2563eb) wat 'n stelling maak. Oppervlaktes bly met die eerste oogopslag plat en raamloos, maar elke houer het 'n 1px #e5e5e5-marge, wat die gevoel van 'n gedrukte dokument oproep. Persoonlikheid word bereik deur 'n klein stel gekleurde "pil"-aksente (oranje, groen, pers) wat bo die neutrale palet sweef, en opskrifte wat selfversekerd en modern voel sonder om flitsend te wees. Komponente is kompak en dig: 8px-geute, 12px-kaartradius, pilvormige etikette teen 9999px, en onsigbare kontroles in plaas van swaar, gevulde knoppies.
Die bladsy is gebou op 'n gesentreerde uitleg met 'n maksimum breedte van ongeveer 1200px. Die hoofelement is 'n gesentreerde teksblok met drie swewende elemente (Geaffilieerde Programme, Omskakelingsanalise, Kort Skakels) wat horisontaal bo 'n groot produkuitleg geplaas is. Afdelings word vertikaal gerangskik met konsekwente 64px-gleuwe, afwisselend tussen wit doek en #f5f5f5 papierwaas vir toonskeiding. Die onderste afdeling gebruik 'n Z-vormige uitleg: redaksionele teks is gesentreer in die middelste derde, en swewende UI-kaarte is geanker aan die linker- en regterkantse, wat 'n asimmetriese, tydskrifagtige ritme skep. Die logo-wolk is 'n eenvoudige 5x2-rooster, gesentreer op die bladsy. Navigasie is 'n minimalistiese boonste balk - logo aan die linkerkant, navigasie in die middel, 'n groep van twee knoppies ('n spook "Aanmeld"-knoppie + 'n gevulde "Registreer"-knoppie) aan die regterkant - sonder 'n vaste of mega-kieslys. Die hoofvenster se paneelborduitleg vertoon 'n klassieke tweekolom-appuitleg: 'n vaste sybalk (soortgelyk aan 240px) + 'n inhoudsarea wat die digtheid van produkinligting vir besoekers definieer voordat hulle begin blaai.
Die visuele elemente is produkgefokus, nie leefstylgefokus nie. Die hoofskerm is gesentreer op 'n groot skermkiekie van die dashboard, wat 'n werklike produkmodel met 'n sybalknavigasie, datatabel en swewende gebruikerskoppelvlak-elemente verteenwoordig, uitgelê as 'n plat paneel op 'n wit doek. Kliëntlogo's word in 'n onversadigde grysskaalrooster (byekorf, superkrag, Chatbase, ens.) vertoon om hul sosiale media-prestasie te erken, gestroop van kleur om die enkele blou aksent van die bladsy dominant te laat bly. Swewende vennootkaarte (klein profiele en teëls met inkomste-/betalingsdata) beweeg rondom blokke redaksionele teks onderaan, wat 'n gevoel van diepte skep sonder die gebruik van skaduwees op die teks self. Die gestippelde roosteragtergrondpatroon is 'n kenmerkende kenmerk: 'n dun ry klein kolletjies met baie lae ondeursigtigheid skep tekstuur en die gevoel van 'n ontwerpstelsel/tekenoppervlak, wat die webwerf se posisionering as 'n "moderne skakeltoeskrywingsplatform" beklemtoon. Die ikonografie is minimaal, met buitelyne en vullings, en gebruik 'n aksentpalet (oranje-oranje, laventelpers, kruisementgroen) vir kenmerketikette. Geen foto's, illustrasies of 3D-modelle word gebruik nie—die produk se gebruikerskoppelvlak self is 'n visuele taal.
Palet
Handelsmerk
- Electric Blue
#2563eb— Die primêre handelsmerkkleur—die logo, skakels, sleutelprestasie-aanwysers, aktiewe toestande en ikoonaksente—word gebruik. 'n Ryk blou op 'n wit agtergrond skep die stelsel se enigste visuele aantrekkingskrag. - Deep Sapphire
#1e40af— Die hoofagtergrond van die aksieknoppie, die vetgedrukte invulling van die oproep tot aksie – die enigste kleur wat die aksie aandui – word spaarsamig gebruik om aandag te trek.
Neutraal
- Canvas White
#ffffff— Bladsyagtergrond, kaartoppervlak, pop-uppanele is die absolute fondament van elke skerm. - Paper Mist
#f5f5f5— Subtiele sweefkleurveranderings vir geneste kaarte, addisionele panele en vullings. - Ash
#e5e5e5— Die dun rande op die kaarte, invoerkonnektore en verdelers is die strukturele lyn wat die stelsel bymekaar hou. - Smoke
#d4d4d4— Skerper rande vir geselekteerde houers en bykomende knoppie-omlyne. - Pebble
#c8c8c8— Grense, beheerlyne en strukturele verdelers met medium kontras. Hierdie kleur moet nie as die primêre kleur vir oproepe tot aksie gebruik word nie. - Midnight Ink
#0a0a0a— Die hoofteks van die knoppies, uitgeligte knoppies en navigasieteks is amper swart vir maksimum kontras.
Tipografie
van 11 tot 48px · 9 stappe
- Satoshi — vervanging: Inter (weight 500 · buitelyne 500 · Vertoonopskrifte – word slegs in 36–48px-reëls vir opskrifte en afdelingstitels gebruik. Lettertipegewig – 500 (medium, nie vetdruk nie): Opskrifte lyk selfversekerd en modern, maar nooit oorweldigend nie. Satoshi se geometriese proporsies gee die lettertipe 'n effens redaksionele, moderne gevoel wat Inter se hoofteks nie kan herhaal nie.
- Inter — vervanging: Inter (native) · buitelyne 400, 500, 600 · Liggaamkopie, UI-etikette, navigasie, subopskrifte en sekondêre opskrifte. Inter is die primêre werkesel en hanteer alles van 11px-mikro-etikette tot 30px-sekondêre opskrifte. 'n Gewig van 400 is die verstekwaarde vir liggaamkopie, 500 vir uitgeligte elemente en knoppie-etikette, en 600 word gereserveer vir belangrike UI-etikette. 16px met 'n lynhoogte van 1.5 is die mees algemene enkelstapgrootte (1220 voorkomste), wat bevestig dat 16px die kanonieke liggaamkopiegrootte is.
- Geist Mono — vervanging: JetBrains Mono or IBM Plex Mono · buitelyne 400, 500 · Kodebrokkies, tegniese metadata en ingebedde monospasiëringstekens word in kodeblokke teen 12–14px en in groot kodevertoningselemente teen 24px gebruik. Dit verseker die geloofwaardigheid van die ontwikkelaarsinstrument, in ooreenstemming met Dub se produkposisionering.
Intervalle en vorm
| Doel | Betekenis |
|---|---|
| Digtheid | gemiddelde |
| Basiese stap | 8px |
| Knoppieradius | 8px |
| Kaartradius | 12px |
| Skaduwees | geen grense in plaas van skaduwees |
| Tussen afdelings | 64px |
| Bladsybreedte | 1200px |
KI sal jou webwerf in Dub -styl bou en dit vul
- Vul met produkte en plasings via die skakel - Instagram, TikTok, Facebook.
- Dra inhoud van jou ou webwerf oor – spesifiseer net die adres.
- Moderne ontwerp op die beste enjin: React ( Next.js) met bedienerweergawe en SEO-optimalisering reg uit die boks.
- Volledig outomatiese SEO-optimering vir soekresultate en neurale netwerkaanbevelings.
Soortgelyke style
- ElevenLabs — 'n Foto-essay in warm roomkleure met subtiele opskrifte. 'n Bauhaus-styl notaboek—eierdopkleurige papier, swart ink en 'n enkele pers en oranje aksent vir produkuitstalling.
- Awesomic — Redaksionele sinkgaas met oranje leestekens wat aan konfetti herinner
- Monad — redaksionele tegniese tydskrif op warm perkament
- Seline Analytics — 'n Stil analitiese tafel op warm papier
- Notion — 'n Warm papiernotaboek in die middagson
- Anthropic — 'n Wetenskaplike veldjoernaal op warm vellum—kalm ivoorkleurige oppervlaktes, gesiferde redaksionele opskrifte en 'n enkele klei-aksent wat slegs verskyn wanneer aksie nodig is.
- Calendly — Donkerblou ink op koue marmer
- Augen Pro — Apple se wit aanbieding bevat 'n kliniese, gewiglose, elektriese blou as die enigste aksent in 'n monochroom ruimte.
- Antimetal — 'n Redaksionele kroniek op roomkleurige papier—'n stil oggend by 'n wetenskaplike tydskrif, waar terughoudendheid selfvertroue oordra en serifs die swaar werk doen.
- Perk — Elektriese lemmetjie op warm perkamentpapier
- Ditto — 'n Sonverligte werkswinkel wat veldblommonsters skep. Warm roomkleurige oppervlaktes, 'n heldergeel basiskleur, diep vlootblou ink, organiese kleurvorms wat agter die stuk blom.
- Officevibe — 'n Redaksionele tydskrif op warm roomkleurige papier. Stel jou 'n deurdagte opstel oor menslike hulpbronbestuur voor, aangebied as 'n produk—'n kursief-serif-lettertipe wat deur 'n moderne blou koppelvlak fluister.