Vercel
Terminal afgedrukt op wit papier
Het Vercel-designsysteem is een oefening in gedisciplineerd monochroom: een bijna wit canvas (#fafafa), zwarte tekst, dunne randen en een volledige afwezigheid van decoratieve kleuren. De visuele taal roept de indruk op van een ontwikkelaarsterminal in print – Geist Sans is nauwelijks leesbaar op de "heroïsche" schaal met een gewicht van 400-450 en een letterafstand van -0,06em, terwijl Geist Mono labels, metadata en codevoorbeelden in 11-13px-capsules weergeeft. Knoppen zijn scherpe radii van 6px of rechthoeken van puur zwart op wit of wit op zwart. Het systeem vertrouwt op contrast en typografische hiërarchie in plaats van kleur, waarbij het driehoekige symbool (▲) en een woordmerk van twee regels de enige brandingelementen zijn. Oppervlakken zijn op elkaar gestapeld in de volgorde #fafafa → #ebebeb → #171717, waardoor diepte wordt gecreëerd door veranderende toonwaarden in plaats van schaduw of kleur. Elk element is opgebouwd uit een raster van 4px met een compacte dichtheid, wat resulteert in een interface die doet denken aan een ingenieursnotitieboekje: nauwkeurig, functioneel en zonder schroom voor witruimte.
De container is 1280px breed, gecentreerd, met een ruime horizontale opvulling (24-48px). Het hoofdblok maakt gebruik van een asymmetrische compositie met drie zones: een grote koptekst links, een gecentreerd merksymbool en een 'wenkbrauw'-blok rechts. Onder het hoofdblok is de inhoud gerangschikt in afwisselende stroken: een strook over de volledige breedte met het logo van de klant, gevolgd door een sectie 'Agent Creators' met twee kolommen, met de koptekst links en een productlay-out rechts, gevolgd door een raster van drie kaarten met kenmerken. Secties worden gescheiden door verticale tussenruimtes van 96-128px zonder scheidingslijnen of achtergrondverschuivingen. De navigatie bestaat uit een enkel vast paneel van 64px met een wazige achtergrond. Kaartrasters gebruiken consequent een lay-out met twee of drie kolommen en tussenruimtes van 16-24px. De algehele dichtheid is compact: de tekst is gemakkelijk te lezen, er is voldoende witruimte, maar de lettergrootte en componentgroottes voorkomen dat de pagina luchtig aanvoelt.
De afbeeldingen zijn spaarzaam en altijd functioneel. Het belangrijkste visuele element is de zwarte driehoek (▲) – een geometrisch merkteken dat als een zwevend silhouet op hoofdletterformaat verschijnt. De logo's van de klanten op de proof-of-concept-strook gebruiken de daadwerkelijke woordmerken van elk merk in grijstinten. Productmockups (Notions chatinterface, CLI-terminaluitvoer, paspoortkaart) zijn ingebed als screenshots in lichte modus in ingekaderde kaarten. Er zijn geen foto's, illustraties of 3D-elementen – het systeem bestaat puur uit typografie en geometrische vormen op wit papier.
Palet
Neutrale
- Obsidian
#171717— De hoofdtitels, navigatieranden, donkere knopvulling en lijstmarkeringen zijn vrijwel allemaal zwart, waardoor een harde en schreeuwerige uitstraling wordt vermeden. - Paper White
#fafafa— Het pagina-oppervlak, de kaartoppervlakken, de lichte invulling van de knoppen – dit is de standaardachtergrond waarop al het andere is gebaseerd. - Pure White
#ffffff— Verhoogde kaartoppervlakken, insteekkaarten, invoervelden. - Hairline
#ebebeb— Randjes van 1px op knoppen, links en kaarten zijn zichtbaar bij hoge zoomniveaus, maar onzichtbaar bij lage zoomniveaus. - Ash
#c9c9c9— Uitgeschakelde tekst, gedempte labels, merknaamwatermerken in klantlogo's. - Smoke
#a8a8a8— Secundaire tekst, plaatsaanduidingstekst, subtiele pictogramvulling.
Typografie
van 11 tot 64px · 6 stappen
- Geist Sans — vervanging: Inter · overzichten 400, 450, 500 · Het primaire lettertype voor de interface en de koppen is een speciaal ontworpen geometrisch schreefloos lettertype van Vercel met een kleine letterafstand bij grote formaten (-0,06em bij 56-64px, -0,05em bij 30px). Voor de koppen bovenaan de pagina is een gewicht van 450 gekozen: dikker dan Light, maar lichter dan Semi-Bold, wat een zelfverzekerde, maar niet opdringerige, uitstraling creëert.
- Geist Mono — vervanging: JetBrains Mono · overzichten 400, 500, 600 · Een monospaced secundair lettertype voor bijschriften, codeblokken, CLI-uitvoerpanelen, metadata en tekst in hoofdletters. De combinatie van 8px/600px/hoofdletters maakt een nauwkeurige plaatsing van kleine woordmerken mogelijk. De ruime letterafstand (0,071em) in de monospaced versie biedt voldoende ruimte voor tekst in hoofdletters.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gespannen |
| Basisstap | 12px |
| Knopradius | 6px |
| Kaartradius | 6px |
| Schaduwen | geen randen in plaats van schaduwen |
| Tussen secties | 96-128px |
| Paginabreedte | 1280px |
AI bouwt je website in de stijl Vercel en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- Headspace — Een zonnig wellnesshoekje op warm papier
- WHOOP — Performance lab om middernacht - witte klinische laboratoriumtafels onder een zwarte, theatrale leegte, een enkele paarse elektrische puls
- Together AI — Onderzoeksconsole over gletsjerpapier
- v0 by Vercel — Draaibanktekening. Precisie en functionaliteit staan voorop, waarbij elk element een duidelijk doel dient op een strak, technisch perfect oppervlak.
- Dovetail — Een blauwdruk onder een donkere maan: nauwelijks zichtbare grafieklijnen, witte letters, een paarse vonk.
- Glideapps — Monochroom tekenbord met een opvallende, fel turkooizen glinstering.
- Timescale — Technische tekening op warm grafiekpapier
- UGLYCASH — Een met stickers beplakt notitieboekje op crèmekleurig papier ademt de sfeer uit van een gedurfde, maximalistische fintech die trots zijn chaos tentoonspreidt.
- Sprout Social — Een groene spruit op een zwarte leisteen. Een helder accent op een strak monochroom canvas, waarvan de kleur alleen voor actie wordt gebruikt, met een zelfverzekerd geometrisch lettertype als wegwijzers.
- Krea — Gallery Noir om middernacht
- Evergreen — Zonnekas op linnenpapier
- Factory — De terminal in de "oorlogskamer" om middernacht. De "fabriek" is een strak zwart bedieningspaneel waar een enkele witte kaart landt als een door een zaklamp verlicht bericht – het enige object in de kamer is het werk zelf.