Superhuman
Redaktiounspanel vun der gëllener Stonn
Superhuman beweegt sech op der Kräizung vun redaktioneller Fotografie a Software-UI - eng waarm, pergamentähnlech Leinwand (ni reng wäiss) rahmt kastanienbrong Branding-Elementer a lieweg violett Akzenter an. Iwwerschrëften, a Schrëft 460, flüsteren anstatt ze jäizen, sou datt ganzsäiteg kinematographesch Fotografie déi schwéier Aarbecht maache kann, während duerchsiichteg Produkt-UI-Kaarten wéi Glas iwwer de Biller schwiewen. D'Palette bleift meeschtens roueg an redaktionell: cremefaarweg Uewerflächen, anthrazit Text, subtil waarmgro Ränner an e generéisen Ofstand tëscht den Elementer, mat Faarf reservéiert fir bewosst Markenpunktuatioun - een eenzege kastanienbrong Call-to-Action, violett Linken, en helllila Add-on-Knäppchen. De System vermeit bewosst staark Schied a Gradienten op UI-Uewerflächen; D'Déift gëtt duerch geschichtete Fotografie an eng subtil Hannergrondonschärft am Titel erreecht, anstatt duerch e Stapeleffekt.
D'Haaptelement ass eng Foto a voller Breet mat enger zentréierter Iwwerschrëft (48-64px/460) an engem eenzege Call to Action, gefëllt mat engem Bild vu Wäin, mat schwiewenden, duerchsiichtege Produkt-UI-Kaarten, déi um lénksen a rietse Rand iwwerlagert sinn. Ënnert dem Haaptelement ass e wäisse gestreifte Logostreifen (6 Zellen pro Zeil, maximal Breet limitéiert), dann eng Tab-Sektioun mat wäisse Kaarteflächen op Pergament-Leinwand. E donkeltürkis Sträif ënnerbrécht de Rhythmus ongeféier zwee Drëttel vun der Säit - a voller Breet, zwou Kolonnen (Bild lénks, Text riets) - a kreéiert deen eenzege tonale Kontrast beim Scrollen. E gradientéierten atmosphäresche Sträif folgt. Den vertikalen Ofstand tëscht de Sektiounen ass 64-96px. Déi maximal Inhaltsbreet ass ~1200px zentréiert, woubei den Haaptelement an den donkelen Sträifen déi ganz Breet vum Viewport ofdecken. D'Navigatioun ass en eenzege fixe Header mat engem verschwommenen Hannergrond; keng Sidebar, kee Mega-Menü. De Fousszeil ass eng vollbreet bordeauxrout Säit mat engem Layout vu Linken a verschiddene Kolonnen. De gesamte Rhythmus ass: Haaptbild → rouegen wäissen/crème Inhalt → donkelt Sträif mam Haaptbild → atmosphäresche Gradient → bordeauxrout Fousszeil, ofwiesselnd hell an donkel Sträifen fir en redaktionellt Tempo ze kreéieren.
Dat primär visuellt Element ass filmesch Fotografie: e Portrait a voller Breet géint en oppenen Himmel déngt als Schwéierpunkt, mat engem zweete atmosphäresche Sträif méi déif op der Säit. D'Bild ass waarm tounméisseg, subtil gedämpft a profiléiert, wat un eng gëllen Stonn erënnert, wat méi e redaktionellt wéi e korporativen Touch kreéiert. E donkelt Sträif mat duerchscheinenden geometresche Rechtecker an handgeschriwwenen Inskriptiounen ass iwwer eng Foto vun engem Mann iwwerlagert, deen a Gedanken verluer ass - eng Collage vu Flächen anstatt engem eenzege Bild. D'Benotzeroberfläche gëtt als schwiewend Glaskaarte presentéiert, déi direkt op d'Foto iwwerlagert sinn, anstatt als separat Screenshots. Et gëtt keng Stockillustratiounen, keng 3D-Renderungen a keng abstrakt dekorativ Formen, ausser dem gradienten atmosphäresche Sträif. D'Symboler si minimalistesch monochrom Linnikonen, ~16-20px breet, mat enger eenzeger Breet, déi dem Textgewiicht vu 460 Punkten entsprécht.
Palette
Mark
- Midnight Wine
#421d24— Déi wichtegst Aktiounsknäppercher, de Reklammebanner an de Fousszeilen sinn e waarme, bal schwaarze Bordeauxrout, deen sech méi wéi Tënt wéi Rout ufält, wat d'Faarfpalette verankert ouni iwwerwältegend ze sinn. - Royal Violet
#714cb6— Violett gëtt benotzt fir Linken, Tags a kuerz Ausdréck ervirzehiewen. Et sollt net als Haaptfaarf fir Handlungsruff benotzt ginn.
Neutral
- Lilac Mist
#d4c7ff— Déi sekundär Uewerflächefëllung, d'Liichtikonen an den Hannergrënn vun de Geeschterknäppercher hunn all eng gedämpft violett Faarf, déi op de Stil vun der Mark hiweist, ouni ongerecht Opmierksamkeet op sech ze zéien. - Deep Lagoon
#0c4243— Den donkelen Hannergrond fir de Sträifen, deen als Haaptnarrativelement benotzt gëtt, ass déi eenzeg donkel Uewerfläch am System, kombinéiert mat engem iwwerlagerten geometresche Muster. - Warm Parchment
#f2f0eb— D'Aarbechtsfläch vun der Säit ass dat dominant Element; eng waarm Crèmefaarf ersetzt Wäiss als Basis, wat dem ganze System eng redaktionell Wäermt gëtt. - Soft Mist
#e3e3e2— Fein Borduren, Kaartekonturen, Trennlinnen – e waarmt, hellgro, dat sech mam Pergament vermëscht, awer d'Kante kloer definéiert. - Ink Charcoal
#292827— Kierpertext, Iwwerschrëften, Ikonkonturen - eng waarm, bal schwaarz Faarf mat genuch Braun fir sech wéi Tënt op Pabeier unzefillen, ni kal #000 - Stone Gray
#666666— Sekundärtext, ënnerstëtzend Texter, diskret Beschreiwungen - eng eenzeg mëttelgro Faarf, spuersam benotzt, fir ni mam Haapttext ze konkurréieren.
Typographie
vun 12 bis 64px · 8 Schrëtt
- Super Sans VF — Ersatz: Inter (closest open equivalent for variable weight range) · Konturen 460, 500, 540, 600, 700 · Eng eenzeg Schrëft am ganze System. Achsvariablen reechen tëscht 460 (eng liicht ofgeschnidden Schrëft fir all grouss Iwwerschrëften) a 540 (betounten Haapttext) a 700 (kleng, fettgedréckte Beschrëftungen). E speziell entwéckelte VF léisst Iwwerschrëften mat engem Gewiicht vu 460 méi bewosst wéi zoufälleg ausgesinn - bei 48-64px mat engem knappen Ofstand tëscht de Buschtawen gëtt den "liicht ofgeschniddene" Effekt als selbstbewosst anstatt dënn ugesinn.
Intervaller a Form
| Zweck | Bedeitung |
|---|---|
| Dicht | dicht |
| Basis Schrëtt | 8px |
| Knäppchenradius | 16px |
| Kaarteradius | 16px |
| Schied | keng Grenzen amplaz vu Schied |
| Tëscht de Sektiounen | 64-96px |
| Säitebreet | 1200px |
KI baut Är Websäit am Stil vun Superhuman op a fëllt se aus
- Fëllt mat Produkter a Posts iwwer de Link aus - Instagram, TikTok, Facebook.
- Inhalt vun Ärer aler Säit transferéieren - gitt einfach d'Adress un.
- Modernen Design op der beschter Engine: React ( Next.js) mat Serverrendering an SEO Optimiséierung direkt aus der Këscht.
- Vollautomatesch SEO-Optimiséierung fir Sichresultater an Empfehlungen fir neuronal Netzwierker.
Ähnlech Stiler
- AI for Business — Brutalistesche redaktionelle Showroom a waarme groe Téin
- Jeton — Editorial iwwer Fintech op waarmem Marmer
- Airtable — E gemittlecht Seminar mat Kapitelen, déi a verschiddene Faarwen markéiert sinn
- Osmo — De Musée vun den Entwéckler op groem Beton
- Linktr — Editorialplakater sinn ewéi Séissegkeeten openee gestapelt. D'Websäit ass a Faarfblöcke entworf, mat hellgréngen Iwwerschrëften géint kobaltblo Maueren, a wäisse pillefërmegen Navigatiounselementer, déi iwwer bordeauxrout Felder schwiewen.
- Outsource Consultants — E groussformategt architektonescht Blat op Knachpabeier. Eng monographesch Ästhetik, wou eng eenzeg hell Indigofleck dat soss waarmt, typographesch maximalistescht Raster ënnerbrécht.
- Streamtime — Taktilt Kreativt Mood Board - Designer Scrapbooking Dësch
- Switch-Lit — Editorialraster mat Tënt op Crèmepabeier gedréckt
- HubSpot — Eng waarm Crème-Pabeierfaarf mat engem eenzegen orange Akzent. HubSpot gläicht enger Designerzäitschrëft, déi op schwéierem Pabeier gedréckt ass - Serif-Iwwerschrëften, waarm Crème-Säiten an en eenzegen feierlechen orange Akzent, deen nëmmen déi wichtegst Punkten ervirhiewt.
- Granola — Feldnotizen op waarmem Pergament - Granola liest sech wéi en ofgenotzten Moleskine Notizbuch, deen op engem sonnebeliichte Schreifdësch opgemaach ass: Serif-Iwwerschrëften ginn e Gefill vu Soliditéit, organesch gréng Akzenter wéi planzbaséiert Tënt, a fein Linnen an de Rande vun de Kaarten, déi handgeschriwwen Notizen gläichen.
- Secure — Eng Konversatioun an engem europäesche Café bei mëllen Dagesliicht ass eng waarm, stilvoll Interpretatioun vu Videouriff, wou Schlagzeilen mat Serif-Liesungen éischter wéi en nodenklechen Zäitschrëftenartikel liesen wéi eng Tech-Produktsäit.
- Mockups made easy — Redaktiounsdesignstudio op wäissem Pabeier