Vercel
Terminal trykt på hvidt papir
Vercels designsystem er en øvelse i disciplineret monokrom: et næsten hvidt lærred (#fafafa), sort skrift, tynde kanter og en fuldstændig mangel på dekorativ farve. Det visuelle sprog fremkalder en udviklerterminal gengivet i trykt form – Geist Sans er knap nok læselig på den "heroiske" skala med en vægt på 400-450 og en bogstavafstand på -0,06 em, mens Geist Mono anvender etiketter, metadata og kodeeksempler i 11-13px store bogstaver. Knapper er skarpe 6px radier eller rektangler af ren sort på hvid eller hvid på sort. Systemet er afhængig af kontrast og typografisk hierarki snarere end farve og bruger det trekantede tegn (▲) og et to-linjers ordmærke som de eneste brandingelementer. Overflader er stablet oven på hinanden i rækkefølgen #fafafa → #ebebeb → #171717, hvilket skaber dybde ved at ændre toneværdier snarere end skygge eller farve. Hvert element er bygget på et 4px-gitter med en kompakt densitet, hvilket resulterer i en brugerflade, der minder om en ingeniørs notesbog – præcis, funktionel og uforfærdet af hvid plads.
Containeren er 1280px bred, centreret og har generøs vandret marmorering (24-48px). Hovedblokken bruger en asymmetrisk tre-zone komposition: en stor overskrift til venstre, en brandglyf centreret og en "øjenbryn"-blok til højre. Under hovedblokken er indholdet arrangeret i skiftende striber: en stribe i fuld bredde med klientens logo, efterfulgt af en "Agent Creators"-sektion med to kolonner og overskriften til venstre og et produktlayout til højre, efterfulgt af et gitter med tre kort med funktioner. Sektionerne er adskilt af lodrette margener på 96-128px uden skillelinjer eller baggrundsforskydninger. Navigationen er et enkelt fast 64px panel med en sløret baggrund. Kortgitre bruger konsekvent et layout med to eller tre kolonner med margener på 16-24px. Den samlede tæthed er kompakt – teksten er let at læse, der er rigelig hvid plads, men skriftstørrelsen og komponentstørrelserne forhindrer siden i at føles luftig.
Billederne er sparsomme og altid funktionelle. Det primære visuelle element er den sorte trekant (▲) – et geometrisk brandmærke, der vises som en svævende silhuet i "stor" skala. Klientlogoer på proof-of-concept-striben bruger hvert brands faktiske ordmærker i gråtoner. Produktmockups (Notions chatgrænseflade, CLI-terminaloutput, paskort) er indlejret som skærmbilleder i lys tilstand i indrammede kort. Der er ingen fotografier, illustrationer eller 3D-elementer – systemet er ren typografi og geometriske former på hvidt papir.
Palet
Neutral
- Obsidian
#171717— Hovedoverskrifter, navigationskanter, mørk knapudfyldning og listemarkører er alle næsten sorte for at undgå skarphed og grelt mætning. - Paper White
#fafafa— Sidens lærred, kortoverfladerne, knappernes lyse udfyldninger – dette er standardbaggrunden, som alt andet er placeret på. - Pure White
#ffffff— Hævede kortflader, indsatser, inputfelter. - Hairline
#ebebeb— 1px-kanter på knapper, links og kort er synlige ved høje zoomniveauer, men usynlige ved lave zoomniveauer. - Ash
#c9c9c9— Deaktiveret tekst, dæmpede etiketter, vandmærker til mærkenavne i klientlogoer. - Smoke
#a8a8a8— Sekundær tekst, pladsholdertekst, diskret ikonudfyldning.
Typografi
fra 11 til 64px · 6 trin
- Geist Sans — udskiftning: Inter · konturer 400, 450, 500 · Den primære skrifttype til brugerfladen og overskrifterne er en specialdesignet geometrisk sans-serif fra Vercel med tæt bogstavafstand ved store størrelser (-0,06em ved 56-64px, -0,05em ved 30px). Til overskrifterne øverst på siden blev der valgt en vægt på 450: tykkere end Light, men lettere end Semi-Bold, hvilket skaber en selvsikker, men ikke overbærende, tone.
- Geist Mono — udskiftning: JetBrains Mono · konturer 400, 500, 600 · En sekundær skrifttype med fast linjeafstand til billedtekster, kodeblokke, CLI-outputpaneler, metadata og store bogstaver. Kombinationen af 8px/600px/store bogstaver muliggør præcis placering af små ordmærker. Bred bogstavafstand (0,071em) i versionen med fast linjeafstand giver rigelig plads til store bogstaver.
Intervaller og form
| Formål | Mening |
|---|---|
| Tæthed | tæt |
| Grundlæggende trin | 12px |
| Knapradius | 6px |
| Kortradius | 6px |
| Skygger | ingen grænser i stedet for skygger |
| Mellem sektioner | 96-128px |
| Sidebredde | 1280px |
AI vil bygge din hjemmeside i Vercel -stil og udfylde den
- Fyld med produkter og opslag via linket - Instagram, TikTok, Facebook.
- Overfør indhold fra dit gamle websted – angiv blot adressen.
- Moderne design på den bedste søgemotor: React ( Next.js) med serverrendering og SEO-optimering lige fra starten.
- Fuldautomatiseret SEO-optimering til søgeresultater og anbefalinger til neurale netværk.
Lignende stilarter
- Headspace — Et solrigt wellness-hjørne på varmt papir
- WHOOP — Performancelaboratorium ved midnat - hvide kliniske laboratorieborde under et sort teatralsk tomrum, en enkelt lilla puls af elektricitet
- Together AI — Forskningskonsol på glacialt papir
- v0 by Vercel — Drejebænkstegning. Præcision og funktionalitet er altafgørende, hvor hvert element tjener et klart formål på en ren, teknisk perfekt overflade.
- Dovetail — En plantegning under en sort måne – knap synlige graflinjer, hvid skrifttype, en lilla glimmer
- Glideapps — monokrom tegnebord med en elektrisk turkis glimmer
- Timescale — Ingeniørtegning på varmt millimeterpapir
- UGLYCASH — En klistermærkebetrukket notesbog på cremefarvet papir udstråler stemningen af en dristig, maksimalistisk fintech, der stolt viser sit kaos frem.
- Sprout Social — En grøn spire på sort skifer. En lys accent på et strengt monokromt lærred, hvis farve kun bruges til handling, med en selvsikker geometrisk skrifttype, der fungerer som vejvisere.
- Krea — Galleri noir ved midnat
- Evergreen — Solcelledrivhus på linnedpapir
- Factory — "Krigsrummets" terminal ved midnat. "Fabrikken" er et skarpt sort kontrolpanel, hvor et enkelt hvidt kort lander som en lommelygteoplyst forsendelse – den eneste genstand i rummet er selve arbejdet.