Telegram, WhatsApp+380637610482
Valery Danyuk
Valery DanyukontwikkelaarAI-tools ontwikkelen voor bedrijven. Hoogwaardig. Betaalbaar.Stuur een Telegram-bericht
Substack — een voorbeeld van een site in deze stijl

Substack

Oranje inkt op het bureau in de redactie.

Substack oogt als een vertrouwd dashboard van een nieuwsredactie: een wit canvas, warme, bijna zwarte tekst en een enkele feloranje accentstreep die elke fase van contentcreatie markeert. De visuele hiërarchie is gebaseerd op compactheid in plaats van decoratie: dunne grijze lijnen scheiden de elementen in de feed, avatars zijn klein, metadata is subtiel en de aandacht van de lezer wordt getrokken door de oranje call-to-action, het oranje logo, de oranje 'Abonneren'-link en de oranje 'Maken'-knop. De oppervlakken zijn vlak en onbelemmerd gehouden – geen schaduwen van kaarten, geen chromen paneelelementen – waardoor de typografie (een compact chromen systeem-UI-element in combinatie met een aangepast schreeflettertype voor koppen) de belangrijkste redactionele taak op zich neemt. De kenmerkende stijl bestaat uit ingetogen chromen elementen en levendige, monochrome accenten: een lees-app die aanvoelt als een publicatietool.

Een desktoplay-out met drie kolommen: een vaste linkerzijbalk (~200px, navigatie met pictogrammen en labels, vastgezet), een centrale feed (maximale breedte ~600px, verticaal scrollende lijst met berichten) en een vaste rechterzijbalk (~300px, zoeken + aanbevelingen + registratie). De centrale feed vormt de redactionele kern – geen kaarten, alleen berichten boven elkaar gestapeld met dunne scheidingslijnen en 32px ruimte tussen de secties. De hoofdbanner staat bovenaan de feed als één kaart over de volledige breedte. De linkerzijbalk bevat het merklogo (een oranje teken met overlappende lijnen), zes navigatie-items en een oranje 'Maken'-knop over de volledige breedte onderaan. De rechterzijbalk bevat een zoekveld, een registratiekaart en een 'Volgende'-lijst om te lezen. De navigatie is minimaal – geen bovenste balk, geen kruimelpaden; de zijbalk IS de navigatie. De contentdichtheid is hoog: berichten gebruiken metadata van 12-13px en tekst van 15-19px, waardoor een krantenachtig ritme ontstaat in plaats van de lay-out van een marktplaats met een overzichtelijke kaartindeling.

Foto's zijn door gebruikers gegenereerde content (avatars van auteurs, miniatuurafbeeldingen van berichten, afbeeldingen bij berichten) – Substack levert zelf geen decoratieve foto's. De hoofdpagina gebruikt een turquoise-groene kleurovergang met abstracte illustratieve elementen (geometrische vormen, gestileerde objecten zoals pennen en notities) als achtergrond. De miniatuurafbeeldingen van berichten in de rechterzijbalk zijn klein (64px), omgeven door een straal van 8px, en fungeren als een preview van de leeslijst. De algehele visuele stijl is tekstgebaseerd: de interface is een leescanvas en afbeeldingen dienen als kleine visuele ankers in plaats van sfeer te creëren.

Palet

Merk

  • Signal Orange #ff6719 — Oranje wordt gebruikt als secundair accent voor decoratieve details en om minder vaak voorkomende aanwijzingen te benadrukken. Het mag niet als primaire kleur worden gebruikt voor oproepen tot actie.

Neutrale

  • Ink #363737 — De hoofdtekst—de inhoud, kopjes, titels van berichten, tijdstempels en auteursnamen; een warme, bijna zwarte kleur in plaats van puur #000 voor betere leesbaarheid.
  • Paper #ffffff — Het paginacanvas, de kaartoppervlakken, de invoervelden en de navigatieachtergrond zijn de dominante oppervlakken die het overgrote deel van de interface in beslag nemen.
  • Charcoal #232525 — Zweefstand voor extra tekst en links met een hoog selectieniveau; uitgebreider dan de inktmodus voor codeblokken en selectieblokken.
  • Stone #777777 — Een neutrale kleur wordt ondersteund voor secundaire UI-elementen, scheidingslijnen en gedempte labels. Deze kleur mag niet worden gebruikt als primaire kleur voor call-to-action-knoppen.
  • Ash #b6b6b6 — Dunne randlijnen, knopcontouren, pictogramcontouren, randen rond uitgeschakelde besturingselementen.
  • Mist #c8c8c8 — Scheidingslijnen, een onopvallende achtergrond voor pictogrammen, het opvullen van lege cellen in de vorm van een skelet.

Typografie

van 12 tot 32px · 5 stappen

  • system-ui — vervanging: -apple-system · overzichten 400, 500, 600 · Het primaire lettertype voor de gebruikersinterface en de hoofdtekst wordt gebruikt voor navigatielabels, knoppen, berichttekst, metadata, invoervelden en alle interface-elementen. Compacte lettergroottes van 12-13px voor metadata en 15-19px voor hoofdtekst creëren de indruk van een compacte nieuwsfeed. Het gewicht is 400 voor hoofdtekst, 500 voor navigatie-elementen en knoplabels, en 600 voor gemarkeerde berichttitels en sectiekoppen.
  • Cahuenga — vervanging: Charter · overzichten 500 · Een kenmerkend decoratief schreeflettertype voor productkopjes (kopjes in de zijbalk, kopjes op registratiekaarten, hoofdtekst). De gemiddelde dikte en geringe regelafstand geven het een voorname uitstraling zonder dat het te zwaar aanvoelt; het is het enige lettertype dat, naast de oranje kleur, de identiteit van Substack uitstraalt.
  • Spectral — vervanging: Charter · overzichten 400 · Een schreeflettertype voor lange berichten – gebruikt in leesruimtes en nieuwsfeeds om de leesbaarheid van redactionele artikelen te verbeteren. Een iets kleinere regelafstand (1,20) zorgt voor een prettige leeservaring per alinea, terwijl de compactheid die kenmerkend is voor nieuwsredacties behouden blijft.

Intervallen en vorm

DoelBetekenis
Diktegespannen
Basisstap8px
Knopradius9999px
Kaartradius12px
Schaduwengeen randen in plaats van schaduwen
Tussen secties32px
Paginabreedte1200px

AI bouwt je website in de stijl Substack 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

  • ElevenLabs — Een fotoreportage in warme crèmekleuren met subtiele titels. Een notitieboek in Bauhaus-stijl – gebroken wit papier, zwarte inkt en een enkel paars en oranje accent voor productpresentatie.
  • Awesomic — Redactioneel zinkgaas met oranje accenten die aan confetti doen denken
  • Monad — redactioneel technisch tijdschrift op warm perkament
  • Dub — Link's matte rijstpapier bedieningspaneel
  • Seline Analytics — Een rustige, analytische tabel op warm papier.
  • Notion — Een warm papieren notitieboekje in de middagzon.
  • Anthropic — Een wetenschappelijk veldnotitieboek op warm perkamentpapier – rustige ivoorkleurige oppervlakken, redactionele koppen in schreeflettertype en een enkel klei-accent dat alleen verschijnt wanneer actie vereist is.
  • Calendly — Donkerblauwe inkt op koud marmer
  • Augen Pro — De witte presentatie van Apple kenmerkt zich door een klinisch, gewichtloos, elektrisch blauw als enig accent in een monochrome omgeving.
  • Antimetal — Een redactioneel verslag op crèmekleurig papier – een rustige ochtend bij een wetenschappelijk tijdschrift, waar ingetogenheid vertrouwen uitstraalt en schreefletters het zware werk doen.
  • Perk — Elektrisch kalk op warm perkamentpapier
  • Ditto — Een zonovergoten atelier waar wilde bloemen worden geschilderd. Warme crèmekleurige oppervlakken, een levendige gele basiskleur, diep donkerblauwe inkt, organische kleurvormen die achter het werk tot bloei komen.