Vercel
Terminal tryckt på vitt papper
Vercels designsystem är en övning i disciplinerad monokrom: en nästan vit duk (#fafafa), svart typsnitt, tunna kanter och en fullständig avsaknad av dekorativ färg. Det visuella språket frammanar en utvecklares terminal återgiven i tryck – Geist Sans är knappt läsbar på den "heroiska" skalan med en vikt på 400-450 och ett bokstavsavstånd på -0,06 em, medan Geist Mono tillämpar etiketter, metadata och kodexempel i 11-13px versaler. Knappar är skarpa 6px radier eller rektanglar av rent svart på vitt eller vitt på svart. Systemet förlitar sig på kontrast och typografisk hierarki snarare än färg, och använder det triangulära tecknet (▲) och ett tvåradigt ordmärke som de enda varumärkeselementen. Ytor staplas ovanpå varandra i ordningen #fafafa → #ebebeb → #171717, vilket skapar djup genom att ändra tonvärden snarare än skugga eller färg. Varje element är byggt på ett 4px-rutnät med en kompakt densitet, vilket resulterar i ett gränssnitt som påminner om en ingenjörsanteckningsbok – exakt, funktionellt och orädd för vitt utrymme.
Behållaren är 1280px bred, centrerad och med generös horisontell utfyllnad (24–48px). Huvudblocket använder en asymmetrisk komposition med tre zoner: en stor rubrik till vänster, en varumärkesglyf centrerad och ett "ögonbrynsblock" till höger. Under huvudblocket är innehållet arrangerat i alternerande ränder: en rand i full bredd med kundens logotyp, följt av en tvåkolumnssektion med rubriken till vänster och en produktlayout till höger, följt av ett rutnät med tre kort med funktioner. Sektionerna är separerade av vertikala rännor på 96–128px utan avdelare eller bakgrundsförskjutningar. Navigeringen är en enda fast 64px-panel med en suddig bakgrund. Kortrutnät använder konsekvent en layout med två eller tre kolumner med 16–24px rännor. Den övergripande densiteten är kompakt – texten är lättläst, det finns gott om vitt utrymme, men teckenstorleken och komponentstorlekarna förhindrar att sidan känns luftig.
Bilderna är glesa och alltid funktionella. Det huvudsakliga visuella elementet är den svarta triangeln (▲) – ett geometriskt varumärke som visas som en svävande silhuett i "stor" skala. Kundlogotyper på koncepttestremsan använder varje varumärkes faktiska ordmärken i gråskala. Produktmodeller (Notions chattgränssnitt, CLI-terminalutgång, passkort) är inbäddade som skärmdumpar i ljusläge i inramade kort. Det finns inga fotografier, illustrationer eller 3D-element – systemet är ren typografi och geometriska former på vitt papper.
Palett
Neutral
- Obsidian
#171717— Huvudrubriker, navigeringsramar, mörk knappfyllning och listmarkörer är alla nästan svarta, vilket undviker hårdhet och gräll mättnad. - Paper White
#fafafa— Sidans arbetsyta, kortytorna, knapparnas ljusa fyllningar – det här är standardbakgrunden som allt annat finns på. - Pure White
#ffffff— Upphöjda kortytor, insatser, inmatningsfält. - Hairline
#ebebeb— 1px-kantlinjer på knappar, länkar och kort är synliga vid höga zoomnivåer, men osynliga vid låga zoomnivåer. - Ash
#c9c9c9— Inaktiverad text, dämpade etiketter, varumärkesvattenstämplar i kundlogotyper. - Smoke
#a8a8a8— Sekundärtext, platshållartext, diskret ikonfyllning.
Typografi
från 11 till 64px · 6 steg
- Geist Sans — ersättning: Inter · konturer 400, 450, 500 · Det primära typsnittet för gränssnittet och rubrikerna är ett specialdesignat geometriskt sans-serif från Vercel med snävt bokstavsavstånd vid stora storlekar (-0,06 em vid 56–64 px, -0,05 em vid 30 px). För rubrikerna högst upp på sidan valdes en vikt på 450: tjockare än Light men lättare än Semi-Bold, vilket skapar en självsäker, men inte överdriven, ton.
- Geist Mono — ersättning: JetBrains Mono · konturer 400, 500, 600 · Ett sekundärt teckensnitt med fast radavstånd för bildtexter, kodblock, CLI-utdatapaneler, metadata och versaler. Kombinationen 8px/600px/versaler möjliggör exakt placering av små ordtecken. Brett bokstavsavstånd (0,071 em) i versionen med fast radavstånd ger gott om utrymme för versaler.
Intervaller och form
| Ändamål | Menande |
|---|---|
| Densitet | tät |
| Grundläggande steg | 12px |
| Knappradie | 6px |
| Kortradie | 6px |
| Skuggor | inga gränser istället för skuggor |
| Mellan sektioner | 96-128px |
| Sidbredd | 1280px |
AI kommer att bygga din webbplats i Vercel -stil och fylla den
- Fyll på med produkter och inlägg via länken - Instagram, TikTok, Facebook.
- Överför innehåll från din gamla webbplats – ange bara adressen.
- Modern design på den bästa sökmotorn: React ( Next.js) med serverrendering och SEO-optimering direkt ur lådan.
- Helautomatisk SEO-optimering för sökresultat och rekommendationer för neurala nätverk.
Liknande stilar
- Headspace — En solig wellnesshörna på varmt papper
- WHOOP — Performance lab vid midnatt - vita kliniska labbord under ett svart teatertomrum, en enda lila puls av elektricitet
- Together AI — Forskningskonsol på glacialpapper
- v0 by Vercel — Svarvritning. Precision och funktionalitet är av största vikt, där varje element fyller ett tydligt syfte på en ren, tekniskt perfekt yta.
- Dovetail — En ritning under en svart måne – knappt synliga graflinjer, vitt teckensnitt, en lila gnistra
- Glideapps — monokromt ritbord med en elektrisk turkos glitter
- Timescale — Teknisk ritning på varmt rutat papper
- UGLYCASH — En klistermärkestäckt anteckningsbok på krämfärgat papper utstrålar atmosfären av en djärv, maximalistisk fintech-verksamhet som stolt visar upp sitt kaos.
- Sprout Social — En grön grodd på svart skiffer. En ljus accent på en strikt monokrom duk, vars färg endast används för handling, med ett självsäkert geometriskt typsnitt som fungerar som vägvisare.
- Krea — Galleri noir vid midnatt
- Evergreen — Solcellsväxthus på linnepapper
- Factory — Terminalen i "krigsrummet" vid midnatt. "Fabriken" är en skarp svart kontrollpanel där ett enda vitt kort landar som en ficklampsbelyst meddelande – det enda föremålet i rummet är själva verket.