Substack
tinta taronja a l'escriptori de la redacció
Substack sembla un quadre de comandament de redacció desgastat: un llenç blanc, text càlid, gairebé negre, i un únic accent taronja brillant que marca cada etapa de la creació de contingut. La jerarquia visual es basa en la densitat en lloc de la decoració: línies grises primes separen els elements del feed, els avatars són petits, les metadades estan silenciades i l'ull del lector s'entrena per centrar-se en la crida a l'acció taronja, el logotip taronja, l'enllaç "Subscriu-te" taronja i el botó "Crea" taronja. Les superfícies es mantenen planes i sense restriccions (sense ombres de targetes, sense elements de panell cromats), cosa que permet que la tipografia (un element compacte d'IU del sistema cromat combinat amb una font de títol serif personalitzada) porti la major part del pes editorial. L'estil característic són elements cromats restringits i tocs vibrants d'un sol color: una aplicació de lectura que sembla una eina de publicació.
Un disseny d'escriptori de tres columnes: una barra lateral esquerra fixa (~200 px, navegació amb icones i etiquetes, fixa), un canal central (amplada màxima ~600 px, llista de publicacions amb desplaçament vertical) i una barra lateral dreta fixa (~300 px, cerca + recomanacions + registre). El canal central és el nucli editorial: no hi ha targetes, només publicacions apilades una sobre l'altra amb divisors prims i espais de 32 px entre seccions. El bàner principal es troba a la part superior del canal com una única targeta d'amplada completa. La barra lateral esquerra conté el logotip de la marca (un signe taronja amb línies superposades), sis elements de navegació i un botó "Crea" taronja d'amplada completa a la part inferior. La barra lateral dreta conté un camp de cerca, una targeta de registre i una llista "A continuació" per llegir. La navegació és mínima: no hi ha barra superior, ni rutes de navegació; la barra lateral ÉS la navegació. La densitat de contingut és alta: les publicacions utilitzen metadades de 12-13 px i text del cos de 15-19 px, creant un ritme semblant al d'un diari en lloc de la sensació de la quadrícula de targetes d'un mercat.
Les fotos són contingut generat per l'usuari (avatars d'autors, miniatures de publicacions, imatges de publicacions): Substack no proporciona les seves pròpies fotos decoratives. La targeta principal utilitza un degradat de color turquesa a verd amb elements il·lustratius abstractes (formes geomètriques, objectes estilitzats com bolígrafs i notes) com a fons. Les miniatures de publicacions a la barra lateral dreta són petites (64 px), estan incloses en un radi de 8 px i funcionen com a vista prèvia de la llista de lectura. El llenguatge visual general està basat en text: la interfície és un llenç de lectura i les imatges serveixen com a petites àncores visuals en lloc de crear atmosfera.
Paleta
Marca
- Signal Orange
#ff6719— El taronja s'utilitza com a accent secundari per a detalls decoratius i per ressaltar senyals poc freqüents. No s'hauria d'utilitzar com a color principal per a crides a l'acció.
Neutral
- Ink
#363737— Text del cos: el text principal, els encapçalaments, els títols de les entrades, les marques de temps i els noms dels autors; un color càlid, gairebé negre, en lloc del #000 pur, per facilitar la lectura. - Paper
#ffffff— El llenç de la pàgina, les superfícies de les targetes, els camps d'entrada i el fons de navegació són les superfícies dominants que ocupen la gran majoria de la interfície. - Charcoal
#232525— Estat de pas del cursor per a text addicional i enllaços amb nivells de selecció alts; més profund que el mode de tinta per a blocs de codi i blocs de selecció. - Stone
#777777— S'admet un color neutre per a elements secundaris de la interfície d'usuari, divisors i etiquetes apagades. No s'ha d'utilitzar com a color principal per a les crides a l'acció. - Ash
#b6b6b6— Línies de vora primes, contorns de botons, contorns d'icones, vores de controls desactivats. - Mist
#c8c8c8— Línies divisòries, fons discret per a icones, omplint cel·les buides en forma d'esquelet.
Tipografia
de 12 a 32px · 5 passos
- system-ui — reemplaçament: -apple-system · esquemes 400, 500, 600 · La font principal per a la interfície d'usuari i el text del cos s'utilitza per a les etiquetes de navegació, els botons, el text dels missatges, les metadades, els camps d'entrada i tots els elements de la interfície. Les mides compactes de 12-13 px per a les metadades i de 15-19 px per al text del cos creen la sensació d'un canal de notícies dens. El pes és de 400 per al text del cos, 500 per als elements de navegació i les etiquetes dels botons i 600 per als títols dels missatges i els encapçalaments de secció ressaltats.
- Cahuenga — reemplaçament: Charter · esquemes 500 · Una font serif decorativa característica per a encapçalaments a nivell de producte (encapçalaments de barra lateral, encapçalaments de targetes de registre, text principal). El seu pes mitjà i la seva lleugera alçada de línia li donen un aspecte distingit sense semblar voluminós; és l'única font que, a més del color taronja, indica la identitat de Substack.
- Spectral — reemplaçament: Charter · esquemes 400 · Una font serif per a publicacions llargues, que s'utilitza a les sales de lectura i al contingut de les notícies per millorar la llegibilitat dels materials editorials. Un interlineat lleugerament més ajustat (1,20) garanteix una lectura còmoda dels paràgrafs, tot mantenint la compacitat típica de les sales de redacció.
Intervals i forma
| Propòsit | Significat |
|---|---|
| Densitat | dens |
| Pas bàsic | 8px |
| Radi del botó | 9999px |
| Radi de la targeta | 12px |
| Ombres | sense vores en comptes d'ombres |
| Entre seccions | 32px |
| Amplada de la pàgina | 1200px |
La IA crearà el vostre lloc web a l'estil Substack i l'omplirà.
- Omple amb productes i publicacions a través de l'enllaç: Instagram, TikTok, Facebook.
- Transfereix contingut del teu lloc web antic; només cal que especifiquis l'adreça.
- Disseny modern en el millor motor: React ( Next.js) amb renderització de servidor i optimització SEO des del primer moment.
- Optimització SEO totalment automatitzada per a resultats de cerca i recomanacions de xarxes neuronals.
Estils similars
- ElevenLabs — Un assaig fotogràfic en tons crema càlids amb titulars subtils. Un quadern d'estil Bauhaus: paper color closca d'ou, tinta negra i un únic detall morat i taronja per a la presentació del producte.
- Awesomic — Malla de zinc editorial amb signes de puntuació taronges que recorden confeti
- Monad — revista tècnica editorial en pergamí calent
- Dub — Tauler de control de paper d'arròs mat de Link
- Seline Analytics — Una taula analítica silenciosa sobre paper calent
- Notion — Un quadern de paper calent al sol del migdia
- Anthropic — Una revista científica de camp sobre vitel·la càlida: superfícies d'ivori tranquil·les, encapçalaments editorials amb serigrafia i un únic accent d'argila que només apareix quan cal actuar.
- Calendly — Tinta blava fosca sobre marbre fred
- Augen Pro — La presentació blanca d'Apple presenta un blau elèctric clínic, ingràvid i com a únic accent en un espai monocrom.
- Antimetal — Una crònica editorial en paper crema: un matí tranquil en una revista científica, on la contenció transmet confiança i les serifes fan la feina més pesada.
- Perk — Llima elèctrica sobre paper de forn calent
- Ditto — Un taller assolellat creant mostres de flors silvestres. Superfícies crema càlides, un color base groc vibrant, tintes blau marí intens, formes de color orgàniques que floreixen darrere la peça.