Substack
oranssia mustetta toimituksen pöydällä
Substack näyttää kuluneelta uutishuoneen kojelaudalta – valkoinen kangas, lämmin, lähes musta teksti ja yksi kirkkaan oranssi aksentti, joka merkitsee sisällöntuotannon jokaista vaihetta. Visuaalinen hierarkia perustuu tiheyteen eikä koristeluun: ohuet harmaat viivat erottavat syöteelementtejä, avatarit ovat pieniä, metatiedot on vaimennettu ja lukijan silmä on tottunut keskittymään oranssiin toimintakehotukseen, oranssiin logoon, oranssiin "Tilaa"-linkkiin ja oranssiin "Luo"-painikkeeseen. Pinnat pidetään tasaisina ja hillittöminä – ei korttien varjoja, ei kromipaneelielementtejä – jolloin typografia (kompakti kromijärjestelmän käyttöliittymäelementti yhdistettynä mukautettuun serif-otsikkofonttiin) kantaa toimituksellisen painon. Tyylille on ominaista hillityt kromielementit ja eloisat, yksiväriset ponnahdusvalot: lukusovellus, joka tuntuu julkaisutyökalulta.
Kolmipalstainen työpöytäasettelu: kiinteä vasen sivupalkki (~200 pikseliä, navigointi kuvakkeilla ja otsikoilla, paikallaan pysyvä), keskisyöte (suurin leveys ~600 pikseliä, pystysuunnassa vierivä viestiluettelo) ja kiinteä oikea sivupalkki (~300 pikseliä, haku + suositukset + rekisteröinti). Keskisyöte on toimituksellinen ydin – ei kortteja, vain päällekkäin pinottuja viestejä ohuilla jakajilla ja 32 pikselin väleillä osioiden välillä. Pääbanneri sijaitsee syötteen yläosassa yhtenä täysleveänä korttina. Vasemmassa sivupalkissa on brändilogo (oranssi merkki päällekkäisillä viivoilla), kuusi navigointikohtaa ja täysleveä oranssi "Luo"-painike alareunassa. Oikeassa sivupalkissa on hakukenttä, rekisteröintikortti ja "Seuraavaksi"-luettelo lukemista varten. Navigointi on minimaalista – ei yläpalkkia, ei navigointipolkuja; sivupalkki ON navigointi. Sisältötiheys on korkea: viestit käyttävät 12–13 pikselin metatietoja ja 15–19 pikselin leipätekstiä, mikä luo sanomalehtimäisen rytmin markkinapaikan korttiruudukon tuntuman sijaan.
Kuvat ovat käyttäjien luomaa sisältöä (kirjoittajien avatarit, postausten pikkukuvat, postausten kuvat) – Substack ei tarjoa omia koristevalokuviaan. Pääkortissa käytetään turkoosista vihreään vaihtelevaa liukuväriä, jonka taustalla on abstrakteja havainnollistavia elementtejä (geometrisia muotoja, tyyliteltyjä esineitä, kuten kyniä ja muistiinpanoja). Oikean sivupalkin postausten pikkukuvat ovat pieniä (64 pikseliä), 8 pikselin säteellä ja toimivat lukulistan esikatseluna. Visuaalinen kieli on yleisesti ottaen tekstipohjainen: käyttöliittymä on kuin lukualusta, ja kuvat toimivat pieninä visuaalisina ankkureina tunnelman luomisen sijaan.
Paletti
Merkki
- Signal Orange
#ff6719— Oranssia käytetään toissijaisena aksenttina koristeellisissa yksityiskohdissa ja korostamaan harvinaisia vihjeitä. Sitä ei tule käyttää ensisijaisena värinä toimintakehotuksissa.
Neutraali
- Ink
#363737— Leipäteksti – pääteksti, otsikot, viestien otsikot, aikaleimat ja kirjoittajien nimet; lämmin, lähes musta väri pelkän #000:n sijaan helpomman lukemisen takaamiseksi. - Paper
#ffffff— Sivun pohja, korttipinnat, syöttökentät ja navigoinnin tausta ovat hallitsevia pintoja, jotka täyttävät suurimman osan käyttöliittymästä. - Charcoal
#232525— Lisätekstin ja linkkien kohdalla, joilla on korkeat valintatasot, kursorin päällä -tila; syvempi kuin mustetilassa koodilohkoille ja valintalohkoille. - Stone
#777777— Neutraalia väriä tuetaan käyttöliittymän toissijaisissa elementeissä, jakajissa ja vaimennettuissa otsikoissa. Sitä ei tule käyttää toimintakehotuksen ensisijaisena värinä. - Ash
#b6b6b6— Ohuet reunaviivat, painikkeiden ääriviivat, kuvakkeiden ääriviivat, käytöstä poistettujen säätimien reunat. - Mist
#c8c8c8— Jakoviivat, huomaamaton tausta kuvakkeille, tyhjien solujen täyttäminen luurangon muodossa.
Typografia
12:sta 32 pikseliin · 5 vaihetta
- system-ui — korvaava: -apple-system · ääriviivat 400, 500, 600 · Käyttöliittymän ja leipätekstin ensisijaista fonttia käytetään navigointitunnisteissa, painikkeissa, viestitekstissä, metatiedoissa, syöttökentissä ja kaikissa käyttöliittymäelementeissä. Kompaktit 12–13 pikselin koot metatiedoille ja 15–19 pikselin koot leipätekstille luovat tiheän uutisvirran vaikutelman. Leipätekstin paino on 400, navigointielementtien ja painikkeiden otsikoiden 500 ja korostettujen viestien otsikoiden ja osioiden otsikoiden 600.
- Cahuenga — korvaava: Charter · ääriviivat 500 · Tuotetason otsikoihin (sivupalkin otsikot, rekisteröintikorttien otsikot, pääteksti) tarkoitettu koristeellinen serif-fontti. Sen keskipaksu ja pieni rivikorkeus antavat sille erottuvan ulkonäön tuntumatta kömpelöltä; se on ainoa fontti, joka oranssin värin lisäksi viestii Substackin identiteetistä.
- Spectral — korvaava: Charter · ääriviivat 400 · Pitkien viestien serif-fontti – käytetään lukusaleissa ja uutissyötteiden sisällössä parantamaan toimituksellisten materiaalien luettavuutta. Hieman tiheämpi riviväli (1,20) varmistaa mukavan kappaleiden lukemisen säilyttäen samalla uutistoimituksille tyypillisen kompaktiuden.
Intervallit ja muoto
| Tarkoitus | Merkitys |
|---|---|
| Tiheys | tiheä |
| Perusvaihe | 8px |
| Painikkeen säde | 9999px |
| Kortin säde | 12px |
| Varjot | ei - reunoja varjojen sijaan |
| Osioiden välillä | 32px |
| Sivun leveys | 1200px |
Tekoäly rakentaa verkkosivustosi Substack -tyyliin ja täyttää sen
- Täytä tuotteilla ja julkaisuilla linkin kautta - Instagram, TikTok, Facebook.
- Siirrä sisältöä vanhalta sivustoltasi – määritä vain osoite.
- Moderni design parhaalla hakukonemoottorilla: React ( Next.js) palvelinrenderöinnillä ja SEO-optimoinnilla suoraan paketista.
- Täysin automatisoitu hakukoneoptimointi hakutuloksille ja neuroverkkosuosituksille.
Samankaltaisia tyylejä
- ElevenLabs — Lämpimin kermanvärisin sävyin kirjoitettu valokuvaessee hienovaraisilla otsikoilla. Bauhaus-tyylinen muistikirja – kananmunankuorenväristä paperia, mustaa mustetta ja yksi violetti-oranssi tehoste tuote-esittelyä varten.
- Awesomic — Toimituksellinen sinkkiverkko, jossa on oransseja konfettimaisisia välimerkkejä
- Monad — toimituksellinen tekninen aikakauslehti lämpimällä pergamentilla
- Dub — Linkin mattapintainen riisipaperista valmistettu ohjauspaneeli
- Seline Analytics — Hiljainen analyyttinen pöytä lämpimällä paperilla
- Notion — Lämmin paperinen muistikirja keskipäivän auringossa
- Anthropic — Tieteellinen kenttälehti lämpimällä pergamentilla – rauhallisilla norsunluunvärisillä pinnoilla, serifioiduilla otsikoilla ja yhdellä savesta tehdyllä aksentilla, joka ilmestyy vain silloin, kun toimintaa tarvitaan.
- Calendly — Tummansininen muste kylmällä marmorilla
- Augen Pro — Applen valkoisessa esitystavassa on kliininen, painoton, sähkönsininen ainoana aksenttina yksivärisessä tilassa.
- Antimetal — Pääkirjoituskronikka kermanvärisellä paperilla – hiljainen aamu tieteellisessä aikakauslehdessä, jossa hillitty tyyli välittää itsevarmuutta ja serifit tekevät raskaan työn.
- Perk — Sähkölime lämpimällä pergamenttipaperilla
- Ditto — Auringon valaisema työpaja, jossa luodaan luonnonkukkien näytteitä. Lämpimän kermanväriset pinnat, eloisan keltainen pohjaväri, syvän tummansiniset musteet, orgaaniset värimuodot kukkivat teoksen takana.