Vercel
Terminala paper zurian inprimatuta
Vercel diseinu sistema monokromo diziplinatuan oinarritutako ariketa bat da: mihise ia zuria (#fafafa), letra beltza, ertz meheak eta kolore apaingarririk eza. Hizkuntza bisualak garatzaile baten terminal bat inprimatuta irudikatzen du: Geist Sans ia ez da irakurgarria "heroiko" eskalan, 400-450eko pisuarekin eta -0,06em-ko letren arteko tartearekin, Geist Mono-k, berriz, etiketak, metadatuak eta kode laginak aplikatzen ditu 11-13px-ko maiuskulatan. Botoiak 6px-ko erradio zorrotzak edo zuriaren gainean beltz hutsezko edo beltzaren gainean zurizko laukizuzenak dira. Sistemak kontrastean eta hierarkia tipografikoan oinarritzen da kolorearen ordez, triangelu ikurra (▲) eta bi lerroko hitz-marka erabiliz marka-elementu gisa. Gainazalak bata bestearen gainean pilatzen dira #fafafa → #ebebeb → #171717 ordenan, sakontasuna sortuz balio tonalak aldatuz, itzala edo kolorea baino gehiago. Elementu bakoitza dentsitate trinkoko 4px-ko sareta batean eraikitzen da, ingeniari baten koadernoaren antzeko interfazea sortuz: zehatza, funtzionala eta espazio zurien beldurrik gabea.
Edukiontzia 1280px zabal da, erdian dago, eta betegarri horizontal zabalarekin (24-48px). Bloke nagusiak hiru zonako konposizio asimetrikoa erabiltzen du: ezkerrean izenburu handi bat, erdian marka glifo bat eta eskuinean "bekain" bloke bat. Bloke nagusiaren azpian, edukia txandaka antolatuta dago: bezeroaren logotipoa duen zabalera osoko marra bat, ondoren bi zutabeko "Agente Sortzaileak" atal bat, ezkerrean izenburua eta eskuinean produktuaren diseinua dituena, eta ondoren ezaugarriak dituzten hiru txarteleko sareta bat. Atalak 96-128px-ko bertikalki bereizten dira, zatitzailerik edo atzeko planoaren desplazamendurik gabe. Nabigazioa 64px-ko panel finko bakarra da, atzeko plano lausoarekin. Txartelen saretek bi edo hiru zutabeko diseinua erabiltzen dute etengabe, 16-24px-ko bertikalekin. Dentsitate orokorra trinkoa da: testua erraz irakurtzen da, espazio zuri ugari dago, baina letra-tamainak eta osagaien tamainek orrialdea arina izatea eragozten dute.
Irudiak urriak dira eta beti funtzionalak. Elementu bisual nagusia triangelu beltza (▲) da — "maila" eskalan silueta flotatzaile gisa agertzen den marka geometrikoa. Kontzeptu-proba zerrendako bezeroen logotipoek marka bakoitzaren benetako hitz-markak erabiltzen dituzte eskala grisean. Produktuen maketak (Notion-en txat interfazea, CLI terminalaren irteera, pasaporte txartela) pantaila-argazki gisa txertatuta daude modu argian markoztatutako txartelen barruan. Ez dago argazkirik, ilustraziorik edo 3D elementurik — sistema tipografia hutsa eta forma geometrikoak dira paper zurian.
Paleta
Neutroa
- Obsidian
#171717— Izenburu nagusiak, nabigazio-ertzak, botoi ilunak betetzeko modua eta zerrenda-markatzaileak ia beltzak dira, gogortasuna eta saturazio deigarria saihestuz. - Paper White
#fafafa— Orriaren mihisea, txartelaren gainazalak, botoien argi-betegarriak — hau da beste guztia kokatzen den atzeko plano estandarra. - Pure White
#ffffff— Txartelen gainazal altxatuak, txertaketak, sarrera-eremuak. - Hairline
#ebebeb— Botoi, esteka eta txarteletako 1px-eko ertzak zoom maila altuetan ikusgai daude, baina ikusezinak zoom maila baxuetan. - Ash
#c9c9c9— Desgaitutako testua, etiketa isilduak, marka-izenaren ur-markak bezeroen logotipoetan. - Smoke
#a8a8a8— Bigarren mailako testua, leku-markatzaileen testua, ikono-betegarri sotila.
Tipografia
11tik 64px-ra · 6 urrats
- Geist Sans — ordezkapena: Inter · eskemak 400, 450, 500 · Interfazearen eta goiburuen letra-tipo nagusia Vercel-ek diseinatutako sans-serif geometriko bat da, tamaina handietan letren arteko tarte estua duena (-0.06em 56-64px-tan, -0.05em 30px-tan). Orriaren goialdean dauden goiburuetarako, 450 pisua aukeratu da: Light baino lodiagoa baina Semi-Bold baino arinagoa, tonu sendoa sortuz, baina ez gehiegizkoa.
- Geist Mono — ordezkapena: JetBrains Mono · eskemak 400, 500, 600 · Bigarren mailako letra-tipo monoespaziala azpitituluetarako, kode-blokeetarako, CLI irteera-paneletarako, metadatuetarako eta maiuskula-testurarako. 8px/600px/maiuskula konbinazioak hitz-marka txikiak zehatz-mehatz kokatzea ahalbidetzen du. Monoespazialkiko bertsioko letren arteko tarte zabalak (0,071em) maiuskula-testurarako leku nahikoa eskaintzen du.
Tarteak eta forma
| Helburua | Esanahia |
|---|---|
| Dentsitatea | trinko |
| Oinarrizko urratsa | 12px |
| Botoiaren erradioa | 6px |
| Txartelaren erradioa | 6px |
| Itzalak | ez - itzalen ordez ertzak |
| Atalen artean | 96-128px |
| Orriaren zabalera | 1280px |
Adimen artifizialak zure webgunea Vercel estiloan eraikiko du eta beteko du
- Bete produktu eta argitalpenekin estekaren bidez - Instagram, TikTok, Facebook.
- Transferitu edukia zure gune zaharretik: zehaztu helbidea.
- Diseinu modernoa motor onenean: React ( Next.js) zerbitzariaren errendatzearekin eta SEO optimizazioarekin hasieratik.
- Bilaketa-emaitzetarako eta sare neuronalen gomendioetarako SEO optimizazio guztiz automatizatua.
Estilo antzekoak
- Headspace — Ongizate txoko eguzkitsu bat paper epel batean
- WHOOP — Gauerdiko emanaldi-laborategia - mahai zuri klinikoak hutsune teatral beltz baten azpian, elektrizitate-pultsu more bakarra
- Together AI — Ikerketa kontsola glaziar-paperean
- v0 by Vercel — Tornuzko marrazketa. Zehaztasuna eta funtzionaltasuna dira garrantzitsuenak, elementu bakoitzak helburu argi bat betetzen duelarik gainazal garbi eta teknikoki perfektu batean.
- Dovetail — Ilargi beltz baten azpian plano bat — ia ikusten ez diren grafiko-lerroak, letra-tipo zuria, distira more bat
- Glideapps — mahai monokromoa turkesa distira elektriko batekin
- Timescale — Ingeniaritza marrazkia grafiko-paper epelean
- UGLYCASH — Krema koloreko paperean idatzitako eranskailuz estalitako koaderno batek bere kaosa harro erakusten duen fintech ausart eta maximalista baten giroa dario.
- Sprout Social — Kimu berde bat arbel beltzean. Azentu distiratsu bat mihise monokromo zorrotz batean, zeinaren kolorea ekintzarako bakarrik erabiltzen den, letra-tipo geometriko sendo batekin seinale gisa balio duelarik.
- Krea — galeria beltza gauerdian
- Evergreen — Eguzki-berotegia lihozko paperean
- Factory — "Gerra gela" terminala gauerdian. "Fabrika" kontrol panel beltz bat da, non txartel zuri bakarra lurreratzen den linterna batek argiztatutako bidalketa baten antzera; gelako objektu bakarra lana bera da.