Ui
Klinischer Plan auf mattem Papier
shadcn/ui ist ein Workshop zur Entwicklung eines monochromen Designsystems: eine klare, weiße Leinwand, sanfte, warme Grautöne und Karten mit großem Radius, die an dezenten Rändern positioniert sind. Die Benutzeroberfläche ist fast vollständig achromatisch – schwarzer Text, weiße Flächen, graue Sekundärtöne – mit einer einzigen, auffälligen roten Farbe, die ausschließlich für Fehlerzustände reserviert ist. Die Typografie basiert auf der geometrischen Neutralität von Geist mit geringer Buchstabenhöhe auf Bildschirmen und erzeugt so ein ruhiges, codeähnliches Erscheinungsbild, das eher an Entwicklerinfrastruktur als an ein Konsumprodukt erinnert.
Minimale Bildsprache – das System besteht fast ausschließlich aus der Benutzeroberfläche. Keine Schlüsselbilder, Illustrationen oder dekorative Grafiken. Produktdemos werden als Komponenten-Mockups (Karten, Eingabefelder, Schaltflächen) in einem Raster präsentiert und dienen sowohl der Dokumentation als auch dem visuellen Inhalt. Die Icons sind dünne geometrische Linien (wahrscheinlich von Lucide übernommen) mit einer Stärke von 1,5–2 Pixeln in den Farben #0a0a0a oder #737373 und werden sparsam als Funktionshinweise verwendet. Die visuelle Sprache bilden die UI-Komponenten selbst – die Seite fungiert als lebendiger Styleguide, in dem jedes sichtbare Element ein sichtbares Designelement ist.
Palette
Neutral
- Canvas
#f5f5f5— Seitenhintergrund, gedämpfte Flächenfüllung, zusätzliche Schaltflächen. - Paper
#ffffff— Kartenoberflächen, Pop-up-Hintergründe, Füllungen für primäre Schaltflächen - Surface Alt
#fafafa— Hintergrund der Seitenleiste, Option für unaufdringliche Karten, Ruhezustand des Eingabefelds. - Ink
#0a0a0a— Haupttext, Überschriften, Schaltflächenbeschriftungen, Symbolumrisse. - Ink Soft
#171717— Schaltflächenhintergrundbilder mit Füllung, zusätzlicher Text auf hellen Oberflächen. - Mid Gray
#737373— Der Haupttext, der Platzhaltertext, die Hilfsbeschriftungen und die Symbolfüllung sind im Ruhezustand ausgeblendet.
Typografie
von 12 auf 48 Pixel · 8 Schritte
- Geist — Ersatz: Inter · Umrisse 400, 500, 600 · Der gesamte Text der Benutzeroberfläche – Fließtext mit einer Linienstärke von 14px/400, Überschriften mit einer Linienstärke von 24–48px/600 und Schaltflächen mit einer Linienstärke von 13–14px/500 – ist in der Schriftart Geist gestaltet. Die geometrischen Buchstabenformen und die einheitliche Linienstärke verleihen den Entwicklerwerkzeugen ein neutrales Erscheinungsbild. Eine Linienstärke von 600 mit 48px Buchstabenabstand und -0,05em sorgt für klare, aussagekräftige Überschriften, die durchdacht und nicht bearbeitet wirken.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | dicht |
| Grundlegender Schritt | 8px |
| Radius der Schaltfläche | 18px |
| Kartenradius | 24px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 48-80px |
| Seitenbreite | 1280px |
KI erstellt Ihre Website im Ui -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
- Ventriloc — Ein redaktionelles Observatorium von Daten auf warmem Papier – eine einzelne orangefarbene Glut, die die monochrome Präzision hervorhebt.
- Geniestudio — Ein Notizbuch für sanftes Tageslicht – eines mit breiten Rändern und einem dicken Federstrich.
- xAI — Warm Cream Lab mit schwarzer Pille
- Cal — Funktionalität in Schwarz-Weiß, ein menschlicher Ansatz. Ein System, das Klarheit und Funktionalität durch eine strikte Schwarz-Weiß-Palette priorisiert, diese aber durch freundliche Typografie und abgerundete Formen auflockert.
- Scale — Ein hochwertiges Fotolabor in Museumsqualität kombiniert mit einem technischen Projekt
- Contractbook — Verträge aus cremefarbenem Papier unter einem ultramarinblauen Himmel
- AutoSend — Ein gemütliches Steinstudio mit einer einzigen violetten Lampe – wo Serifenschriften und leuchtend indigoblaue Handlungsaufforderungen in einem ruhigen, fast weißen Raum nebeneinander existieren.
- Air — Skulptur „Mitternachtshimmel durch Glas“
- SpatialChat — violetter Puls auf weißem Pergament
- Squarespace — Galerie für filmische Monochromie
- Giga — Mitternachtshorizont über bereiftem Obsidian
- Supabase — Ein Code-Editor um Mitternacht mit einem phosphoreszierenden grünen Punkt – ein einzelner Farbimpuls in einem Meer aus Kohlenstaub