Substack
oranje ink op die lessenaar in die redaksiekantoor
Substack lyk soos 'n verslete nuuskamer-dashboard – 'n wit doek, warm, amper swart teks, en 'n enkele helder oranje aksent wat elke stadium van inhoudskepping aandui. Die visuele hiërargie is gebou op digtheid eerder as versiering: dun grys lyne skei voerelemente, avatars is klein, metadata is gedemp, en die leser se oog word opgelei om te fokus op die oranje oproep tot aksie, oranje logo, oranje "Teken in"-skakel en oranje "Skep"-knoppie. Oppervlaktes word plat en onbeperk gehou – geen kaartskaduwees, geen chroompaneelelemente nie – wat die tipografie (’n kompakte chroom-stelsel-UI-element gepaard met ’n persoonlike serif-opskriflettertipe) die grootste deel van die redaksionele gewig laat dra. Die kenmerkende styl is ingehoue chroomelemente en lewendige, enkelkleurige flikkeringe: ’n lees-app wat soos ’n publiseringsinstrument voel.
'n Drie-kolom lessenaar uitleg: 'n vaste linkerkantbalk (~200px, navigasie met ikone en etikette, kleefbalk), 'n middelste voer (maksimum breedte ~600px, vertikaal blaaiende lys van plasings), en 'n vaste regterkantstekantbalk (~300px, soek + aanbevelings + registrasie). Die middelste voer is die redaksionele kern - geen kaarte nie, net plasings wat bo-op mekaar gestapel is met dun verdelers en 32px gapings tussen afdelings. Die hoofbanier sit bo-aan die voer as 'n enkele volle breedte kaart. Die linkerkantstekantbalk bevat die handelsmerklogo ('n oranje teken met oorvleuelende lyne), ses navigasie-items en 'n volle breedte oranje "Skep" knoppie onderaan. Die regterkantstekantbalk bevat 'n soekveld, 'n registrasie kaart en 'n "Volgende" lys vir lees. Navigasie is minimaal - geen boonste balk, geen broodkrummels nie; die kantbalk IS die navigasie. Inhoudsdigtheid is hoog: plasings gebruik 12-13px metadata en 15-19px liggaamsteks, wat 'n koerantagtige ritme skep eerder as die gevoel van 'n markplek se kaartrooster.
Foto's is gebruikersgegenereerde inhoud (outeur-avatars, plasing-kleinkiekies, plasingbeelde)—Substack verskaf nie sy eie dekoratiewe foto's nie. Die hoofkaart gebruik 'n turkoois tot groen gradiënt met abstrakte illustratiewe elemente (geometriese vorms, gestileerde voorwerpe soos penne en notas) as agtergrond. Plasing-kleinkiekies in die regterkantse sybalk is klein (64px), ingesluit in 'n radius van 8px, en funksioneer as 'n voorskou van die leeslys. Die algehele visuele taal is teksgebaseerd: die koppelvlak is 'n leesdoek, en beelde dien as klein visuele ankers eerder as om atmosfeer te skep.
Palet
Handelsmerk
- Signal Orange
#ff6719— Oranje word as 'n sekondêre aksent vir dekoratiewe besonderhede gebruik en om ongereelde leidrade uit te lig. Dit moet nie as die primêre kleur vir oproepe tot aksie gebruik word nie.
Neutraal
- Ink
#363737— Liggaamsteks—die hoofteks, opskrifte, plasingtitels, tydstempels en outeurname; 'n warm, amper swart kleur in plaas van suiwer #000 vir makliker lees. - Paper
#ffffff— Die bladsydoek, kaartoppervlaktes, invoervelde en navigasie-agtergrond is die dominante oppervlaktes wat die oorgrote meerderheid van die koppelvlak beset. - Charcoal
#232525— Beweeg die modus vir bykomende teks en skakels met hoë seleksievlakke; dieper as Ink-modus vir kodeblokke en seleksieblokke. - Stone
#777777— 'n Neutrale kleur word ondersteun vir sekondêre UI-elemente, verdelers en gedempte etikette. Dit moet nie as die primêre kleur vir oproepe tot aksie gebruik word nie. - Ash
#b6b6b6— Dun randlyne, knoppie-omlyne, ikoon-omlyne, rande op gedeaktiveerde kontroles. - Mist
#c8c8c8— Skeidingslyne, onopvallende agtergrond vir ikone, vul leë selle in die vorm van 'n skelet.
Tipografie
van 12 tot 32px · 5 stappe
- system-ui — vervanging: -apple-system · buitelyne 400, 500, 600 · Die primêre lettertipe vir die gebruikerskoppelvlak en liggaamsteks word gebruik vir navigasie-etikette, knoppies, boodskapteks, metadata, invoervelde en alle koppelvlakelemente. Kompakte groottes van 12-13px vir metadata en 15-19px vir liggaamsteks skep die gevoel van 'n digte nuusvoer. Die gewig is 400 vir liggaamsteks, 500 vir navigasie-elemente en knoppie-etikette, en 600 vir uitgeligte boodskaptitels en afdelingsopskrifte.
- Cahuenga — vervanging: Charter · buitelyne 500 · 'n Kenmerkende dekoratiewe serif-lettertipe vir produkvlak-opskrifte (sybalkopskrifte, registrasiekaartopskrifte, hoofteks). Die medium gewig en effense lynhoogte gee dit 'n kenmerkende voorkoms sonder om lywig te voel; dit is die enigste lettertipe wat, benewens die oranje kleur, Substack se identiteit aandui.
- Spectral — vervanging: Charter · buitelyne 400 · 'n Serif-lettertipe vir lang plasings—gebruik in leeskamers en in nuusvoerinhoud om die leesbaarheid van redaksionele materiaal te verbeter. 'n Effens stywer reëlafstand (1.20) verseker gemaklike paragraaflees terwyl die kompaktheid tipies van nuuskamers behoue bly.
Intervalle en vorm
| Doel | Betekenis |
|---|---|
| Digtheid | dig |
| Basiese stap | 8px |
| Knoppieradius | 9999px |
| Kaartradius | 12px |
| Skaduwees | geen grense in plaas van skaduwees |
| Tussen afdelings | 32px |
| Bladsybreedte | 1200px |
KI sal jou webwerf in Substack -styl bou en dit vul
- Vul met produkte en plasings via die skakel - Instagram, TikTok, Facebook.
- Dra inhoud van jou ou webwerf oor – spesifiseer net die adres.
- Moderne ontwerp op die beste enjin: React ( Next.js) met bedienerweergawe en SEO-optimalisering reg uit die boks.
- Volledig outomatiese SEO-optimering vir soekresultate en neurale netwerkaanbevelings.
Soortgelyke style
- ElevenLabs — 'n Foto-essay in warm roomkleure met subtiele opskrifte. 'n Bauhaus-styl notaboek—eierdopkleurige papier, swart ink en 'n enkele pers en oranje aksent vir produkuitstalling.
- Awesomic — Redaksionele sinkgaas met oranje leestekens wat aan konfetti herinner
- Monad — redaksionele tegniese tydskrif op warm perkament
- Dub — Link se mat ryspapier-beheerpaneel
- Seline Analytics — 'n Stil analitiese tafel op warm papier
- Notion — 'n Warm papiernotaboek in die middagson
- Anthropic — 'n Wetenskaplike veldjoernaal op warm vellum—kalm ivoorkleurige oppervlaktes, gesiferde redaksionele opskrifte en 'n enkele klei-aksent wat slegs verskyn wanneer aksie nodig is.
- Calendly — Donkerblou ink op koue marmer
- Augen Pro — Apple se wit aanbieding bevat 'n kliniese, gewiglose, elektriese blou as die enigste aksent in 'n monochroom ruimte.
- Antimetal — 'n Redaksionele kroniek op roomkleurige papier—'n stil oggend by 'n wetenskaplike tydskrif, waar terughoudendheid selfvertroue oordra en serifs die swaar werk doen.
- Perk — Elektriese lemmetjie op warm perkamentpapier
- Ditto — 'n Sonverligte werkswinkel wat veldblommonsters skep. Warm roomkleurige oppervlaktes, 'n heldergeel basiskleur, diep vlootblou ink, organiese kleurvorms wat agter die stuk blom.