Vercel
Terminal trykt på hvitt papir
Vercel-designsystemet er en øvelse i disiplinert monokrom: et nesten hvitt lerret (#fafafa), svart skrift, tynne kanter og et fullstendig fravær av dekorative farger. Det visuelle språket fremkaller en utviklerterminal gjengitt i trykk – Geist Sans er knapt leselig på den "heroiske" skalaen med en vekt på 400–450 og en bokstavavstand på -0,06 em, mens Geist Mono bruker etiketter, metadata og kodeeksempler i store bokstaver på 11–13 piksler. Knapper er skarpe 6 pikslers radier eller rektangler av rent svart på hvitt eller hvitt på svart. Systemet er avhengig av kontrast og typografisk hierarki snarere enn farge, og bruker det trekantede tegnet (▲) og et tolinjers ordmerke som de eneste merkevareelementene. Overflater er stablet oppå hverandre i rekkefølgen #fafafa → #ebebeb → #171717, og skaper dybde gjennom å endre toneverdier snarere enn skygge eller farge. Hvert element er bygget på et 4px-rutenett med en kompakt tetthet, noe som resulterer i et grensesnitt som minner om en ingeniørs notatbok – presist, funksjonelt og uredd for hvite rom.
Beholderen er 1280 piksler bred, sentrert, med sjenerøs horisontal polstring (24–48 piksler). Hovedblokken bruker en asymmetrisk tre-sone-komposisjon: en stor overskrift til venstre, en merkevareglyf sentrert og en "øyenbryn"-blokk til høyre. Under hovedblokken er innholdet ordnet i vekslende striper: en fullbredde-stripe med klientens logo, etterfulgt av en "Agent Creators"-seksjon med to kolonner med overskriften til venstre og et produktlayout til høyre, etterfulgt av et rutenett med tre kort med funksjoner. Seksjonene er atskilt med vertikale innbindingsmarginer på 96–128 piksler uten skillelinjer eller bakgrunnsforskyvninger. Navigasjonen er et enkelt fast 64 pikslers panel med en uskarp bakgrunn. Kortrutenett bruker konsekvent et layout med to eller tre kolonner med innbindingsmarginer på 16–24 piksler. Den generelle tettheten er kompakt – teksten er lett å lese, det er god hvit plass, men skriftstørrelsen og komponentstørrelsene hindrer siden i å føles luftig.
Bildene er sparsomme og alltid funksjonelle. Det viktigste visuelle elementet er den svarte trekanten (▲) – et geometrisk merkevaremerke som vises som en svevende silhuett i «stor» skala. Klientlogoer på konseptutprøvingsstripen bruker hvert merkes faktiske ordmerker i gråtoner. Produktmodeller (Notions chatgrensesnitt, CLI-terminalutgang, passkort) er innebygd som skjermbilder i lysmodus i innrammede kort. Det er ingen fotografier, illustrasjoner eller 3D-elementer – systemet er ren typografi og geometriske former på hvitt papir.
Palett
Nøytral
- Obsidian
#171717— Hovedoverskrifter, navigasjonsrammer, mørk knappefylling og listemarkører er nesten svarte, slik at skarphet og grell metning unngås. - Paper White
#fafafa— Sidens lerret, kortoverflatene, de lyse fyllingene i knappene – dette er standardbakgrunnen som alt annet er plassert på. - Pure White
#ffffff— Hevede kortflater, innsatser, inndatafelt. - Hairline
#ebebeb— 1px-kantlinjer på knapper, lenker og kort er synlige ved høye zoomnivåer, men usynlige ved lave zoomnivåer. - Ash
#c9c9c9— Deaktivert tekst, dempede etiketter, vannmerker for merkenavn i klientlogoer. - Smoke
#a8a8a8— Sekundærtekst, plassholdertekst, diskret ikonfyll.
Typografi
fra 11 til 64 piksler · 6 trinn
- Geist Sans — erstatning: Inter · omriss 400, 450, 500 · Primærfonten for grensesnittet og overskriftene er en spesialdesignet geometrisk sans-serif fra Vercel med tett bokstavavstand i store størrelser (-0,06em ved 56–64 piksler, -0,05em ved 30 piksler). For overskriftene øverst på siden ble det valgt en vekt på 450: tykkere enn Light, men lettere enn Semi-Bold, noe som skaper en selvsikker, men ikke overbærende, tone.
- Geist Mono — erstatning: JetBrains Mono · omriss 400, 500, 600 · En sekundærfont med fast linjeavstand for bildetekster, kodeblokker, CLI-utdatapaneler, metadata og store bokstaver. Kombinasjonen 8px/600px/store bokstaver gir presis plassering av små ordmerker. Bred bokstavavstand (0,071 em) i versjonen med fast linjeavstand gir god plass til store bokstaver.
Intervaller og form
| Hensikt | Betydning |
|---|---|
| Tetthet | tett |
| Grunnleggende trinn | 12px |
| Knapperadius | 6px |
| Kortradius | 6px |
| Skygger | ingen grenser i stedet for skygger |
| Mellom seksjoner | 96-128px |
| Sidebredde | 1280px |
AI vil bygge nettstedet ditt i Vercel -stil og fylle det
- Fyll på med produkter og innlegg via lenken - Instagram, TikTok, Facebook.
- Overfør innhold fra det gamle nettstedet ditt – bare oppgi adressen.
- Moderne design på den beste søkemotoren: React ( Next.js) med serverrendering og SEO-optimalisering rett ut av boksen.
- Helautomatisk SEO-optimalisering for søkeresultater og anbefalinger fra nevrale nettverk.
Lignende stiler
- Headspace — Et solrikt velværehjørne på varmt papir
- WHOOP — Performancelab ved midnatt - hvite kliniske laboratoriebord under et svart teatralsk tomrom, en enkelt lilla puls av elektrisitet
- Together AI — Forskningskonsoll på isbrepapir
- v0 by Vercel — Dreiebenktegning. Presisjon og funksjonalitet er avgjørende, der hvert element tjener et klart formål på en ren, teknisk perfekt overflate.
- Dovetail — En blåkopi under en svart måne – knapt synlige graflinjer, hvit skrift, en lilla glitter
- Glideapps — monokrom tegnebord med en elektrisk turkis glitter
- Timescale — Ingeniørtegning på varmt millimeterpapir
- UGLYCASH — En klistremerkedekket notatbok på kremfarget papir utstråler atmosfæren til en dristig, maksimalistisk fintech-bedrift som stolt viser frem kaoset sitt.
- Sprout Social — En grønn spire på svart skifer. En lys aksent på et strengt monokrom lerret, hvis farge kun brukes til handling, med en selvsikker geometrisk skrift som fungerer som veiskilt.
- Krea — Galleri noir ved midnatt
- Evergreen — Solcelledrivhus på linpapir
- Factory — «Krigsrommet»-terminalen ved midnatt. «Fabrikken» er et skarpt, svart kontrollpanel der et enkelt hvitt kort lander som en lommelyktbelyst forsendelse – det eneste objektet i rommet er selve arbeidet.