Letters
Ein Morgentermin in einer Freiluftklinik – ein steriler weißer Tisch unter einer hellblauen Decke, übersät mit blauen chirurgischen Instrumenten
Letters ist ein Tool zum Verfassen medizinischer Briefe. Es beginnt mit einer Kopfzeile in Form eines offenen Himmels – ein sanfter, atmosphärischer blauer Streifen schafft eine ruhige, klinische Atmosphäre – bevor es in einen klaren, weißen Arbeitsbereich übergeht. Das System ist monochrom gestaltet: eine saubere, weiße Oberfläche, fast schwarzer Text (#070709), dunkle, pillenförmige Handlungsaufforderungen und abgerundete Karten, die auf dezenten Schatten zu schweben scheinen. Ein einzelnes helles Blau (#2597d0) ist für funktionale Elemente wie Icons, Mikrografiken und Wellenform-Player reserviert und wird niemals für Schaltflächen oder großflächige Darstellungen verwendet. Die Typografie basiert auf Open Runde, einer geometrischen humanistischen Sans-Serif-Schrift mit ausgeprägtem negativem Buchstabenabstand bei größeren Bildschirmauflösungen (-0,04em bei 80px), wodurch die Kopfzeilen zu prägnanten Blöcken komprimiert werden. Die Komponenten wirken leicht, wie ein medizinisches Instrument: schmale Ränder, großzügiger Kartenabstand, pillenförmige Schaltflächen und eine dezente Erhabenheit, die der Kopfzeile ihre emotionale Wirkung verleiht.
Eine hellblaue Startseite mit Farbverlauf erstreckt sich über die gesamte Seitenbreite. Titel und Untertext sind zentriert, darunter befindet sich ein Call-to-Action-Button. Der Übergang zu einem weißen Inhaltsbereich mit großzügigem Abstand zwischen den Abschnitten (80–120 px) ist fließend. Die Feature-Abschnitte nutzen ein zweispaltiges Raster aus großen, abgerundeten Karten (Radius 18–32 px) mit gleichen Proportionen. Die Abschnittsüberschriften sind stets zentriert und einspaltig über dem Kartenraster angeordnet. Die Navigation besteht aus einer festen, weißen Kopfzeile mit einer zentrierten Linkgruppe und rechtsbündigen Anmeldeoptionen. Der Gesamtrhythmus wird durch einen einzigen, stimmungsvollen Hauptstreifen und abwechselnd weiße und #f5f5f5-farbene Abschnitte mit gleichmäßigem vertikalem Abstand bestimmt. Es gibt keine Seitenleiste, kein Mega-Menü und keine asymmetrischen Layouts – die Seite wirkt wie eine ruhige, symmetrische Spalte.
Das visuelle Design konzentriert sich fast ausschließlich auf die Benutzeroberfläche des Produkts – keine Lifestyle-Fotos, keine abstrakten 3D-Renderings. Die Bildsprache basiert auf Produktkarten, die die native Benutzeroberfläche der App präsentieren: ein Vorher-Nachher-Vergleich von Dokumenten, ein Ladebereich mit gepunktetem Rand und ein Audioplayer in Form einer Wellenform. Das einzige atmosphärische visuelle Element ist der Himmelsverlauf im Hauptbild. Die Icons sind flache, einfarbige Linien-Icons (Briefumschlag, Mikrofon, Häkchen) in #2597d0 mit einheitlicher Linienstärke und ohne Füllvarianten. Der Illustrationsstil ist zurückhaltend: Produkt-Mockups werden auf weißem Hintergrund dargestellt, leicht gedreht, um Tiefe zu erzeugen, aber nie stark geneigt. Eine handgeschriebene Schriftart (The Doctor) ist das einzige organische/handgefertigte Element und dient ausschließlich dazu, die klinische Handschrift auf der Vorher-Karte zu evozieren.
Palette
Marke
- Surgical Blue
#2597d0— Symbole, ein Mikrofonsymbol, ein Schallwellen-Player und kleine funktionale Akzente erzeugen einen einheitlichen chromatischen Ton in der gesamten Benutzeroberfläche.
Neutral
- Obsidian
#070709— Der Fließtext, die ausgefüllten Call-to-Action-Buttons und die dunklen UI-Elemente – es wurde ein nahezu schwarzes Schwarz anstelle von reinem #000 gewählt, um den Kontrast zum weißen Hintergrund abzuschwächen. - Paper White
#ffffff— Der Seitenhintergrund, die Kartenoberflächen und der Schaltflächentext bilden die Hauptleinwand für alle Abschnitte unterhalb des Hauptelements. - Cloud Gray
#f5f5f5— Zusätzliche Kartenoberflächen und Abschnittshintergründe trennen die Funktionsblöcke von der Hauptleinwand. - Sky Tint
#d7e6f5— Der Farbton des Kartonrahmens und der kaum wahrnehmbare Blauton der Oberfläche erzeugen eher ein Gefühl von Atmosphäre als von Grautönigkeit. - Charcoal
#60606c— Primärer Text, sekundärer Text und dezente Rahmen – eine dominante neutrale Farbe für Inhalte, die keine Überschriften sind. - Slate
#8b8b8b— Kleiner Text und inaktive Grenzzustände – dienen der Kennzeichnung von Standorten und der Gewährleistung der Zugänglichkeit für Menschen mit Behinderungen.
Typografie
von 12 auf 80 Pixel · 8 Schritte
- sans-serif — Ersatz: Inter · Umrisse 400, 700 · sans-serif - in den extrahierten Daten gefunden, aber von der KI nicht beschrieben.
- Open Runde — Ersatz: Inter Tight · Umrisse 400, 500, 600, 700, 900 · Die primäre Schriftart für Überschriften und Navigation ist eine geometrisch-humanistische Schriftart mit geringem Buchstabenabstand in großen Schriftgrößen; -0,04em bei 80px komprimiert die Überschrift zu einem einzigen, prägnanten Block. Verwenden Sie diese Schriftart für alle Überschriften, Navigationselemente und längere Texte.
- Inter — Ersatz: system-ui · Umrisse 400, 500 · Sekundärer Fließtext und UI-Text – wird für kurze Überschriften, Navigationselemente und Inline-Links verwendet, wenn ein neutralerer Lesefluss gewünscht ist. In Kombination mit Open Runde erzeugt er hierarchischen Kontrast.
Intervalle und Form
| Zweck | Bedeutung |
|---|---|
| Dichte | dicht |
| Grundlegender Schritt | 12-16px |
| Radius der Schaltfläche | 100px |
| Kartenradius | 18px |
| Schatten | Nein – Ränder statt Schatten |
| Zwischen den Abschnitten | 80-120px |
| Seitenbreite | 1200px |
KI erstellt Ihre Website im Letters -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
- Integrated Biosciences — Biolumineszenzlabor um Mitternacht
- Mintlify — Ein Wolkengarten über einem Glastisch. Der handgezeichnete Himmel und die dokumentarische Darstellung sind gemeinsam gerahmt – der einzige Ort, an dem Farbe und Konzept aufeinandertreffen, bevor die Seite in klösterliches Weiß übergeht.
- Gleap — Ein in warmen Cremetönen gehaltener Arbeitsbereich mit Graphit-Akzenten – ein Studio, in dem matte schwarze Tintenpunkte über der Leinenarchitektur zu schweben scheinen.
- Render — Das Design ist auf gebürstetem Aluminium. Die Benutzeroberfläche wirkt wie ein klares, geometrisches technisches Dokument – Weißraum, dünne Linien und eine einzelne violette Linie, die die Aufmerksamkeit auf die Handlung lenkt.
- Grafbase — Technische Zeichnung auf kaltem Marmor
- Slash — Mitternachtsgewölbe mit vergoldeten Büchern
- Modal — Ein phosphoreszierendes Terminal in einem abgedunkelten Serverraum – die einzige Lichtquelle ist ein helles Grün.
- Whimsical — Sattes Pflaumenrot auf lavendelfarbenem Hintergrund – ein Notizbuch für kreative Studios, das gleichzeitig als technisches Whiteboard dient.
- AgentQL — Nordlichter über dem Terminal bei Nacht
- Alveos One — Ein behaglicher Rückzugsort aus Flusssteinen – ein ruhiger, cremefarben beleuchteter Meditationsraum, in dem ein einzelnes Graphitobjekt in sanftem Bernsteinlicht ruht.
- GitHub — Ein Weltraum-Kommandopanel mit biolumineszenten Kontrollpunkten – ein dunkler, atmosphärischer Arbeitsbereich, in dem ein einzelner grüner Schein den Weg nach vorn weist.
- Buddy — Eine technische Zeichnung auf Millimeterpapier. Die weiße Zeichenfläche ist mit einem kaum sichtbaren Raster aus fast schwarzer Tinte versehen, das mit fluoreszierenden lindgrünen Markierungen und irisierenden Farbverlaufsstrichen verziert ist.