Vercel
Terminal auf weißem Papier gedruckt
Das Vercel-Designsystem ist ein Paradebeispiel für disziplinierte Monochromie: eine nahezu weiße Leinwand (#fafafa), schwarze Schrift, schmale Ränder und der völlige Verzicht auf dekorative Farben. Die Bildsprache erinnert an ein gedrucktes Entwicklerterminal – Geist Sans ist in der „heroischen“ Schriftgröße mit einer Strichstärke von 400–450 und einem Buchstabenabstand von -0,06em kaum lesbar, während Geist Mono Beschriftungen, Metadaten und Codebeispiele in 11–13 Pixel großen Versalschriften darstellt. Schaltflächen sind scharfe, 6 Pixel breite Rechtecke aus reinem Schwarz auf Weiß oder Weiß auf Schwarz. Das System setzt auf Kontrast und typografische Hierarchie statt auf Farbe und verwendet das Dreieckssymbol (▲) und eine zweizeilige Wortmarke als einzige Branding-Elemente. Die Flächen sind in der Reihenfolge #fafafa → #ebebeb → #171717 übereinander gestapelt, wodurch Tiefe durch wechselnde Tonwerte statt durch Schatten oder Farbe entsteht. Jedes Element basiert auf einem 4px-Raster mit kompakter Dichte, wodurch eine Benutzeroberfläche entsteht, die an das Notizbuch eines Ingenieurs erinnert – präzise, funktional und ohne Scheu vor Leerraum.
Der Container ist 1280 Pixel breit, zentriert und mit großzügigem horizontalem Abstand (24–48 Pixel) versehen. Der Hauptblock ist asymmetrisch in drei Zonen unterteilt: links eine große Überschrift, zentriert ein Markenlogo und rechts ein „Augenbrauen“-Block. Unterhalb des Hauptblocks ist der Inhalt in abwechselnden Streifen angeordnet: ein Streifen in voller Breite mit dem Kundenlogo, gefolgt von einem zweispaltigen Abschnitt „Agent Creators“ mit der Überschrift links und einer Produktübersicht rechts, anschließend ein Raster mit drei Karten, die die Funktionen beschreiben. Die Abschnitte sind durch vertikale Abstände von 96–128 Pixeln ohne Trennlinien oder Hintergrundversätze voneinander getrennt. Die Navigation besteht aus einem einzelnen, festen 64-Pixel-Panel mit unscharfem Hintergrund. Die Kartenraster verwenden durchgehend ein zwei- oder dreispaltiges Layout mit Abständen von 16–24 Pixeln. Die Gesamtdichte ist kompakt – der Text ist gut lesbar, es gibt viel Weißraum, aber die Schriftgröße und die Größe der einzelnen Elemente verhindern, dass die Seite luftig wirkt.
Die Bilder sind sparsam und stets funktional. Das zentrale visuelle Element ist das schwarze Dreieck (▲) – ein geometrisches Markenzeichen, das als schwebende Silhouette in Großbuchstabengröße erscheint. Die Kundenlogos auf dem Proof-of-Concept-Streifen verwenden die jeweiligen Markennamen in Graustufen. Produkt-Mockups (Notions Chat-Oberfläche, CLI-Terminalausgabe, Passkarte) sind als Screenshots im hellen Modus in gerahmte Karten eingebettet. Es gibt keine Fotos, Illustrationen oder 3D-Elemente – das System besteht ausschließlich aus Typografie und geometrischen Formen auf weißem Papier.
Palette
Neutral
- Obsidian
#171717— Hauptüberschriften, Navigationsrahmen, dunkle Schaltflächenfüllung und Listenmarkierungen sind alle fast schwarz, wodurch Härte und grelle Farbsättigung vermieden werden. - Paper White
#fafafa— Die Seitenfläche, die Kartenoberflächen, die Lichteffekte der Schaltflächen – dies ist der Standardhintergrund, vor dem sich alles andere befindet. - Pure White
#ffffff— Erhabene Kartenoberflächen, Einleger, Eingabefelder. - Hairline
#ebebeb— 1px breite Ränder um Schaltflächen, Links und Karten sind bei hohen Zoomstufen sichtbar, bei niedrigen Zoomstufen jedoch unsichtbar. - Ash
#c9c9c9— Deaktivierter Text, ausgeblendete Beschriftungen, Markennamen-Wasserzeichen in Kundenlogos. - Smoke
#a8a8a8— Sekundärer Text, Platzhaltertext, dezente Symbolfüllung.
Typografie
von 11 auf 64 Pixel · 6 Schritte
- Geist Sans — Ersatz: Inter · Umrisse 400, 450, 500 · Die primäre Schriftart für Benutzeroberfläche und Überschriften ist eine speziell entworfene geometrische serifenlose Schrift von Vercel mit geringem Buchstabenabstand in großen Größen (-0,06em bei 56–64 px, -0,05em bei 30 px). Für die Überschriften am Seitenanfang wurde die Schriftstärke 450 gewählt: dicker als Light, aber dünner als Semi-Bold, wodurch ein selbstbewusster, aber nicht aufdringlicher Ton entsteht.
- Geist Mono — Ersatz: JetBrains Mono · Umrisse 400, 500, 600 · Eine nichtproportionale Zweitschrift für Beschriftungen, Codeblöcke, CLI-Ausgabefelder, Metadaten und Großbuchstaben. Die Kombination aus 8px/600px/Großbuchstaben ermöglicht die präzise Platzierung kleiner Wortmarken. Der große Buchstabenabstand (0,071em) in der nichtproportionalen Version bietet ausreichend Platz für Großbuchstaben.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | dicht |
| Grundlegender Schritt | 12px |
| Radius der Schaltfläche | 6px |
| Kartenradius | 6px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 96-128px |
| Seitenbreite | 1280px |
KI erstellt Ihre Website im Vercel -Stil und füllt sie aus.
- Teile deine Produkte und Beiträge über den Link – Instagram, TikTok, Facebook.
- Übertragen Sie Inhalte von Ihrer alten Website – geben Sie einfach die Adresse an.
- Modernes Design auf der besten Plattform: React ( Next.js) mit serverseitigem Rendering und SEO-Optimierung direkt nach der Installation.
- Vollautomatisierte SEO-Optimierung für Suchergebnisse und Empfehlungen durch neuronale Netze.
Ähnliche Stile
- Headspace — Eine sonnige Wellness-Ecke auf warmem Papier
- WHOOP — Performance-Labor um Mitternacht – weiße Labortische unter einer schwarzen, theatralischen Leere, ein einzelner violetter Stromimpuls
- Together AI — Forschungskonsole auf Gletscherpapier
- v0 by Vercel — Drehzeichnung. Präzision und Funktionalität stehen an erster Stelle, wobei jedes Element auf einer sauberen, technisch perfekten Oberfläche einem klaren Zweck dient.
- Dovetail — Ein Bauplan unter einem schwarzen Mond – kaum sichtbare Linien, weiße Schrift, ein violetter Funkel
- Glideapps — monochromer Zeichentisch mit einem elektrischen türkisfarbenen Glitzer
- Timescale — Technische Zeichnung auf warmem Millimeterpapier
- UGLYCASH — Ein mit Aufklebern beklebtes Notizbuch auf cremefarbenem Papier verströmt die Atmosphäre eines kühnen, maximalistischen Fintech-Unternehmens, das sein Chaos stolz zur Schau stellt.
- Sprout Social — Ein grüner Spross auf schwarzem Schiefer. Ein leuchtender Akzent auf streng monochromem Grund, dessen Farbe ausschließlich für die Handlung verwendet wird, wobei eine selbstbewusste geometrische Schriftart als Wegweiser dient.
- Krea — Galerie Noir um Mitternacht
- Evergreen — Solargewächshaus auf Leinenpapier
- Factory — Der Terminal im „Kriegsraum“ um Mitternacht. Die „Fabrik“ ist ein karges schwarzes Bedienfeld, auf dem eine einzelne weiße Karte wie eine mit einer Taschenlampe beleuchtete Nachricht landet – das einzige Objekt im Raum ist das Werk selbst.