Vercel
Pääte painettu valkoiselle paperille
Vercel-suunnittelujärjestelmä on harjoitus kurinalaista yksivärisyyttä: lähes valkoinen kangas (#fafafa), musta fontti, ohuet reunukset ja täydellinen koristeellisten värien puuttuminen. Visuaalinen kieli tuo mieleen kehittäjän päätteen painettuna – Geist Sans on tuskin luettavissa "sankarillisessa" mittakaavassa 400–450 pikselin painolla ja -0,06 em:n kirjainvälillä, kun taas Geist Mono käyttää otsikoita, metatietoja ja koodinäytteitä 11–13 pikselin isoilla kirjaimilla. Painikkeet ovat teräviä 6 pikselin säteitä tai suorakulmioita, jotka ovat puhtaan mustia valkoisella pohjalla tai valkoisia mustalla pohjalla. Järjestelmä perustuu kontrastiin ja typografiseen hierarkiaan värin sijaan, käyttäen kolmiomerkkiä (▲) ja kaksirivistä sanamerkkiä ainoina brändäyselementteinä. Pinnat on pinottu päällekkäin järjestyksessä #fafafa → #ebebeb → #171717, mikä luo syvyyttä muuttamalla sävyarvoja varjojen tai värin sijaan. Jokainen elementti on rakennettu kompaktille 4 pikselin ruudukolle, minkä tuloksena käyttöliittymä muistuttaa insinöörin muistikirjaa – tarkka, toimiva ja tyhjää tilaa pelkäämätön.
Säiliö on 1280 pikseliä leveä, keskitetty ja siinä on reilusti vaakasuoraa täyttöä (24–48 pikseliä). Päälohkossa on käytetty epäsymmetristä kolmialueista sommittelua: suuri otsikko vasemmalla, brändilogo keskellä ja "kulmakarva"-lohko oikealla. Päälohkon alapuolella sisältö on järjestetty vuorotteleviin raidoihin: täysleveä raita asiakkaan logolla, jota seuraa kaksisarakkeinen "Agent Creators" -osio, jossa otsikko on vasemmalla ja tuoteasettelu oikealla, ja sen jälkeen kolmen kortin ruudukko ominaisuuksineen. Osiot on erotettu toisistaan 96–128 pikselin pystysuorilla sisäviivoilla ilman jakajia tai taustasiirtymiä. Navigointi on yksi kiinteä 64 pikselin paneeli, jossa on sumennettu tausta. Korttiruudukot käyttävät johdonmukaisesti kaksi- tai kolmisarakkeista asettelua 16–24 pikselin sisäviivoilla. Kokonaistiheys on kompakti – tekstiä on helppo lukea, tyhjää tilaa on runsaasti, mutta fonttikoko ja komponenttien koot estävät sivua tuntumasta ilmavalta.
Kuvat ovat harvassa ja aina toiminnallisia. Tärkein visuaalinen elementti on musta kolmio (▲) – geometrinen brändimerkki, joka näkyy leijuvana siluettina "isokirjaimisen" mittakaavassa. Asiakaslogot konseptitestauspalkissa käyttävät kunkin brändin todellisia sanamerkkejä harmaasävyisinä. Tuotemallien mallit (Notionin chat-käyttöliittymä, CLI-päätelaite, passikortti) on upotettu vaalean tilan kuvakaappauksina kehystettyihin kortteihin. Valokuvia, kuvituksia tai 3D-elementtejä ei ole – järjestelmä on puhdasta typografiaa ja geometrisia muotoja valkoisella paperilla.
Paletti
Neutraali
- Obsidian
#171717— Pääotsikot, navigointireunat, tummat painikkeiden täyttöalueet ja luettelomerkit ovat kaikki lähes mustia, mikä välttää karheutta ja räikeää kylläisyyttä. - Paper White
#fafafa— Sivupohja, korttipinnat, painikkeiden valotäytöt – tämä on vakiotausta, jolla kaikki muu sijaitsee. - Pure White
#ffffff— Kohotetut korttipinnat, insertit, syöttökentät. - Hairline
#ebebeb— Painikkeiden, linkkien ja korttien 1px:n reunat näkyvät suurilla zoomaustasoilla, mutta ovat näkymättömiä matalilla zoomaustasoilla. - Ash
#c9c9c9— Estetty teksti, mykistetyt otsikot, tuotemerkkien vesileimat asiakaslogoissa. - Smoke
#a8a8a8— Toissijainen teksti, paikkamerkkiteksti, hienovarainen kuvakkeiden täyttö.
Typografia
11:stä 64 pikseliin · 6 vaihetta
- Geist Sans — korvaava: Inter · ääriviivat 400, 450, 500 · Käyttöliittymän ja otsikoiden ensisijainen fontti on Vercelin suunnittelema geometrinen sans-serif-fontti, jossa on tiheä kirjainväli suurissa kokoluokissa (-0,06em 56–64 pikselin koossa, -0,05em 30 pikselin koossa). Sivun yläreunan otsikoille valittiin 450-painos: paksumpi kuin Light, mutta kevyempi kuin Semi-Bold, mikä luo itsevarman mutta ei liian ylivoimaisen sävyn.
- Geist Mono — korvaava: JetBrains Mono · ääriviivat 400, 500, 600 · Kiinteävälisinen toissijainen fontti kuvateksteille, koodilohkoille, CLI-lähtöpaneeleille, metadatalle ja isoille kirjaimille. 8px/600px/isot kirjaimet -yhdistelmä mahdollistaa pienten sanamerkkien tarkan sijoittelun. Leveä kirjainväli (0,071em) kiinteävälisessä versiossa tarjoaa runsaasti tilaa isoille kirjaimille.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | tiheä |
| Perusvaihe | 12px |
| Painikkeen säde | 6px |
| Kortin säde | 6px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 96-128px |
| Sivun leveys | 1280px |
Tekoäly rakentaa verkkosivustosi Vercel -tyyliin ja täyttää sen
- Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
- Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
- Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
- Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.
Samankaltaisia tyylejä
- Headspace — Aurinkoinen hyvinvointinurkkaus lämpimällä paperilla
- WHOOP — Esityslaboratorio keskiyöllä - valkoiset kliinisen laboratorion pöydät mustan teatterimaisen tyhjyyden alla, yksi violetti sähkön pulssi
- Together AI — Tutkimuskonsoli jääkauden paperilla
- v0 by Vercel — Sorvin piirtäminen. Tarkkuus ja toimivuus ovat ensiarvoisen tärkeitä, ja jokaisella elementillä on selkeä tarkoitus puhtaalla ja teknisesti täydellisellä pinnalla.
- Dovetail — Mustan kuun alla oleva piirustus – tuskin näkyvät kaavioviivat, valkoinen fontti, yksi violetti kimallus
- Glideapps — yksivärinen piirustuspöytä, jossa on yksi sähköinen turkoosi kimallus
- Timescale — Tekninen piirustus lämpimälle ruutupaperille
- UGLYCASH — Kermanväriselle paperille kirjoitettu tarroilla päällystetty muistikirja huokuu rohkean ja maksimalistisen fintech-yrityksen tunnelmaa, joka ylpeänä esittelee kaaostaan.
- Sprout Social — Vihreä verso mustalla liuskekivellä. Yksi kirkas aksentti tiukalla yksivärisellä kankaalla, jonka väriä käytetään vain toimintaan, ja itsevarma geometrinen fontti toimii opasteena.
- Krea — Galleria noir keskiyöllä
- Evergreen — Aurinkokasvihuone pellavapaperilla
- Factory — "Sotahuoneen" terminaali keskiyöllä. "Tehdas" on karun musta ohjauspaneeli, johon yksi valkoinen kortti laskeutuu kuin taskulampun valaisema lähetys – huoneen ainoa esine on itse työ.