Superhuman
gouden uur redactiepanel
Superhuman bevindt zich op het snijvlak van redactionele fotografie en software-UI. Een warm, perkamentachtig canvas (nooit puur wit) omlijst bordeauxrode brandingelementen en levendige paarse accenten. Kopteksten, gezet in lettertype 460, fluisteren in plaats van te schreeuwen, waardoor de filmische fotografie over de volledige pagina het zware werk doet, terwijl doorschijnende product-UI-kaarten als glas boven de afbeeldingen zweven. Het kleurenpalet blijft grotendeels rustig en redactioneel: crèmekleurige oppervlakken, antracietkleurige tekst, subtiele warmgrijze randen en ruime afstand tussen elementen, waarbij kleur is gereserveerd voor weloverwogen merkaccenten – een enkele bordeauxrode call-to-action, paarse links, een lichtpaarse add-on-knop. Het systeem vermijdt bewust sterke schaduwen en verlopen op UI-oppervlakken; de diepte wordt bereikt door gelaagde fotografie en subtiele achtergrondvervaging in de titel, in plaats van door een stapeleffect.
Het hoofdelement is een foto over de volledige breedte met een gecentreerde koptekst (48-64px/460) en een enkele call-to-action met een afbeelding van wijn, met zwevende, doorschijnende product-UI-kaarten aan de linker- en rechterrand. Onder het hoofdelement bevindt zich een logo-strook met witte strepen (6 cellen per rij, maximale breedte beperkt), gevolgd door een tabbladsectie met witte kaartoppervlakken op perkamentpapier. Een donker turkooizen streep doorbreekt het ritme ongeveer tweederde van de pagina – over de volledige breedte, twee kolommen (afbeelding links, tekst rechts) – en zorgt voor het enige tooncontrast tijdens het scrollen. Een sfeervolle streep met kleurverloop volgt. De verticale afstand tussen de secties is 64-96px. De maximale breedte van de content is ongeveer 1200px gecentreerd, waarbij het hoofdelement en de donkere streep de volledige breedte van het scherm beslaan. De navigatie bestaat uit een enkele vaste koptekst met een wazige achtergrond; geen zijbalk, geen megamenu. De footer is een bordeauxrode pagina over de volledige breedte met een lay-out van links in meerdere kolommen. Het algehele ritme is: hoofdkader → rustige witte/crème inhoud → donkere streep met de hoofdafbeelding → sfeervol kleurverloop → bordeauxrode voettekst, waarbij lichte en donkere strepen elkaar afwisselen om een redactioneel tempo te creëren.
Het belangrijkste visuele element is filmische fotografie: een portret over de volledige breedte tegen een open hemel vormt het middelpunt, met een tweede sfeervolle strook lager op de pagina. De afbeelding is warm getint, subtiel gedempt en in profiel gefotografeerd, wat doet denken aan het gouden uur en een meer redactionele dan zakelijke uitstraling geeft. Een donkere strook met doorschijnende geometrische rechthoeken en handgeschreven opschriften is over een foto van een in gedachten verzonken man geplaatst – een collage van oppervlakken in plaats van één enkele afbeelding. De gebruikersinterface wordt gepresenteerd als zwevende glazen kaarten die direct over de foto heen zijn geplaatst, in plaats van als aparte screenshots. Er zijn geen stockfoto's, geen 3D-renders en geen abstracte decoratieve vormen, behalve de sfeervolle strook met verloop. De iconen zijn minimalistische monochrome lijniconen, ongeveer 16-20 pixels breed, met een enkele breedte die overeenkomt met de tekstdikte van 460 punten.
Palet
Merk
- Midnight Wine
#421d24— De belangrijkste actieknoppen, banneradvertentie en footer zijn uitgevoerd in een warme, bijna zwarte bordeauxrode kleur die meer aan inkt dan aan rood doet denken, waardoor het kleurenpalet een solide basis krijgt zonder overheersend te zijn. - Royal Violet
#714cb6— Paars wordt gebruikt om links, tags en korte zinnen te benadrukken. Het mag niet als primaire kleur voor call-to-actions worden gebruikt.
Neutrale
- Lilac Mist
#d4c7ff— De secundaire oppervlaktevulling, de lichte pictogrammen en de achtergrond van de transparante knoppen hebben allemaal een ingetogen paarse kleur die de stijl van het merk subtiel weergeeft zonder al te veel de aandacht op zichzelf te vestigen. - Deep Lagoon
#0c4243— De donkere achtergrond van de strip, die als belangrijkste narratieve element dient, is het enige donkere oppervlak in het systeem, gecombineerd met een geometrisch patroon dat eroverheen is gelegd. - Warm Parchment
#f2f0eb— Het werkoppervlak van de pagina is het dominante element; een warme crèmekleur vervangt wit als basis, wat het geheel een redactionele warmte geeft. - Soft Mist
#e3e3e2— Fijne randen, kaartcontouren, scheidingslijnen – een warm, lichtgrijs dat samensmelt met het perkament, maar de randen duidelijk afbakent. - Ink Charcoal
#292827— Tekst, kopjes, contouren van pictogrammen - een warme, bijna zwarte kleur met voldoende bruin om aan inkt op papier te doen denken, nooit koud #000 - Stone Gray
#666666— Secundaire tekst, ondersteunende teksten, afzonderlijke beschrijvingen - één enkele middengrijze kleur, spaarzaam gebruikt zodat deze nooit concurreert met de hoofdtekst.
Typografie
van 12 tot 64px · 8 stappen
- Super Sans VF — vervanging: Inter (closest open equivalent for variable weight range) · overzichten 460, 500, 540, 600, 700 · Eén enkel lettertype in het hele systeem. De asvariabelen bestrijken het bereik van 460 (een kenmerkend, licht bijgesneden lettertype voor alle grote kopteksten) tot 540 (benadrukte hoofdtekst) en 700 (kleine, vetgedrukte bijschriften). Een speciaal ontworpen VF zorgt ervoor dat kopteksten met gewicht 460 er doordachter uitzien dan willekeurig – bij een lettergrootte van 48-64px en een kleine spatiëring wordt het "licht bijgesneden" effect als zelfverzekerd ervaren in plaats van dun.
Intervallen en vorm
| Doel | Betekenis |
|---|---|
| Dikte | gespannen |
| Basisstap | 8px |
| Knopradius | 16px |
| Kaartradius | 16px |
| Schaduwen | geen randen in plaats van schaduwen |
| Tussen secties | 64-96px |
| Paginabreedte | 1200px |
AI bouwt je website in de stijl Superhuman en vult deze in.
- Vul het account aan met producten en berichten via de link - Instagram, TikTok, Facebook.
- Neem de inhoud van je oude website over; geef gewoon het adres op.
- Modern design op de beste engine: React ( Next.js) met server-side rendering en SEO-optimalisatie direct uit de doos.
- Volledig geautomatiseerde SEO-optimalisatie voor zoekresultaten en aanbevelingen op basis van neurale netwerken.
Vergelijkbare stijlen
- AI for Business — Brutalistische redactionele showroom in warme grijstinten
- Jeton — Een redactioneel artikel over fintech op Warm Marble.
- Airtable — Een gezellig seminar met hoofdstukken die in verschillende kleuren zijn gemarkeerd.
- Osmo — Het ontwikkelaarsmuseum op grijs beton
- Linktr — De redactionele posters liggen opgestapeld als snoepjes. De website is ontworpen met kleurblokken, met felgroene koppen tegen kobaltblauwe achtergronden en witte, pilvormige navigatie-elementen die boven bordeauxrode velden zweven.
- Outsource Consultants — Een groot architectonisch drukwerk op beenderpapier. Een monografische esthetiek, waarbij een enkele heldere indigovlek het verder warme, typografisch maximalistische raster doorbreekt.
- Streamtime — Tastbaar creatief moodboard - Designer scrapbooktafel
- Switch-Lit — Redactionele raster gedrukt met inkt op crèmekleurig papier
- HubSpot — Een warme crèmekleur met een enkel oranje accent. HubSpot lijkt op een designmagazine gedrukt op zwaar papier: schreefletters in de koptekst, warme crèmekleurige pagina's en een enkel fel oranje accent dat alleen de belangrijkste punten benadrukt.
- Granola — Veldnotities op warm perkamentpapier – Granola leest als een veelgelezen Moleskine-notitieboekje dat openligt op een bureau in de zon: de schreefletters op de kopjes geven een gevoel van degelijkheid, organische groene accenten doen denken aan inkt op plantaardige basis, en de fijne lijntjes in de marges van de kaartjes lijken op handgeschreven notities.
- Secure — Een gesprek in een Europees café bij zacht daglicht is een warme, stijlvolle variant op videobellen, waarbij de titels in schreeflettertype meer lijken op een doordacht tijdschriftartikel dan op een productpagina van een technologiebedrijf.
- Mockups made easy — Redactioneel ontwerpstudio op wit papier