Substack
તંત્રી કાર્યાલયમાં ડેસ્ક પર નારંગી શાહી
સબસ્ટેક એક સારી રીતે ઘસાઈ ગયેલા ન્યૂઝરૂમ ડેશબોર્ડ જેવું લાગે છે—એક સફેદ કેનવાસ, ગરમ, લગભગ કાળો ટેક્સ્ટ, અને સામગ્રી નિર્માણના દરેક તબક્કાને ચિહ્નિત કરતો એક તેજસ્વી નારંગી ઉચ્ચાર. દ્રશ્ય વંશવેલો સુશોભન કરતાં ઘનતા પર બનેલો છે: પાતળી રાખોડી રેખાઓ ફીડ તત્વોને અલગ કરે છે, અવતાર નાના હોય છે, મેટાડેટા મ્યૂટ હોય છે, અને વાચકની આંખ નારંગી કોલ ટુ એક્શન, નારંગી લોગો, નારંગી "સબ્સ્ક્રાઇબ" લિંક અને નારંગી "બનાવો" બટન પર ધ્યાન કેન્દ્રિત કરવા માટે તાલીમ પામેલી હોય છે. સપાટીઓ સપાટ અને અનિયંત્રિત રાખવામાં આવે છે—કોઈ કાર્ડ શેડો નથી, કોઈ ક્રોમ પેનલ તત્વો નથી—ટાઇપોગ્રાફી (કસ્ટમ સેરીફ હેડલાઇન ફોન્ટ સાથે જોડાયેલ કોમ્પેક્ટ ક્રોમ સિસ્ટમ UI તત્વ) ને સંપાદકીય વજનનો ભાર વહન કરવા દે છે. સિગ્નેચર શૈલી સંયમિત ક્રોમ તત્વો અને વાઇબ્રન્ટ, સિંગલ-કલર પોપ્સ છે: એક વાંચન એપ્લિકેશન જે પ્રકાશન સાધન જેવી લાગે છે.
ત્રણ-સ્તંભ ડેસ્કટોપ લેઆઉટ: એક નિશ્ચિત ડાબી સાઇડબાર (~200px, ચિહ્નો અને લેબલ્સ સાથે નેવિગેશન, સ્ટીકી), એક મધ્ય ફીડ (મહત્તમ પહોળાઈ ~600px, પોસ્ટ્સની ઊભી સ્ક્રોલિંગ સૂચિ), અને એક નિશ્ચિત જમણી સાઇડબાર (~300px, શોધ + ભલામણો + નોંધણી). મધ્ય ફીડ એ સંપાદકીય મુખ્ય ભાગ છે—કોઈ કાર્ડ નથી, ફક્ત પાતળા વિભાજકો સાથે એકબીજાની ઉપર સ્ટેક કરેલી પોસ્ટ્સ અને વિભાગો વચ્ચે 32px ગાબડા. મુખ્ય બેનર ફીડની ટોચ પર એક પૂર્ણ-પહોળાઈ કાર્ડ તરીકે બેસે છે. ડાબી સાઇડબારમાં બ્રાન્ડ લોગો (ઓવરલેડ લાઇનો સાથે નારંગી ચિહ્ન), છ નેવિગેશન આઇટમ્સ અને તળિયે પૂર્ણ-પહોળાઈ નારંગી "બનાવો" બટન છે. જમણી સાઇડબારમાં એક શોધ ક્ષેત્ર, નોંધણી કાર્ડ અને વાંચન માટે "અપ નેક્સ્ટ" સૂચિ છે. નેવિગેશન ન્યૂનતમ છે—કોઈ ટોચનો બાર નથી, કોઈ બ્રેડક્રમ્સ નથી; સાઇડબાર નેવિગેશન છે. સામગ્રી ઘનતા ઊંચી છે: પોસ્ટ્સ 12-13px મેટાડેટા અને 15-19px બોડી ટેક્સ્ટનો ઉપયોગ કરે છે, જે માર્કેટપ્લેસના કાર્ડ ગ્રીડની લાગણીને બદલે અખબાર જેવી લય બનાવે છે.
ફોટા એ યુઝર-જનરેટેડ કન્ટેન્ટ છે (લેખક અવતાર, પોસ્ટ થંબનેલ્સ, પોસ્ટ છબીઓ)—સબસ્ટેક તેના પોતાના સુશોભન ફોટા પ્રદાન કરતું નથી. મુખ્ય કાર્ડ પૃષ્ઠભૂમિ તરીકે અમૂર્ત ચિત્રાત્મક તત્વો (ભૌમિતિક આકારો, પેન અને નોંધો જેવા શૈલીયુક્ત પદાર્થો) સાથે પીરોજથી લીલા રંગના ગ્રેડિયન્ટનો ઉપયોગ કરે છે. જમણી સાઇડબારમાં પોસ્ટ થંબનેલ્સ નાના (64px) છે, જે 8px ત્રિજ્યામાં બંધ છે, અને વાંચન સૂચિના પૂર્વાવલોકન તરીકે કાર્ય કરે છે. એકંદર દ્રશ્ય ભાષા ટેક્સ્ટ-આધારિત છે: ઇન્ટરફેસ વાંચન કેનવાસ છે, અને છબીઓ વાતાવરણ બનાવવાને બદલે નાના દ્રશ્ય એન્કર તરીકે સેવા આપે છે.
પેલેટ
બ્રાન્ડ
- Signal Orange
#ff6719— નારંગી રંગનો ઉપયોગ સુશોભન વિગતો માટે અને દુર્લભ સંકેતોને પ્રકાશિત કરવા માટે ગૌણ ઉચ્ચારણ તરીકે થાય છે. કોલ ટુ એક્શન માટે તેનો ઉપયોગ પ્રાથમિક રંગ તરીકે થવો જોઈએ નહીં.
તટસ્થ
- Ink
#363737— મુખ્ય ટેક્સ્ટ - મુખ્ય ટેક્સ્ટ, શીર્ષકો, પોસ્ટ શીર્ષકો, ટાઇમસ્ટેમ્પ અને લેખકના નામ; સરળ વાંચન માટે શુદ્ધ #000 ને બદલે ગરમ, લગભગ કાળો રંગ. - Paper
#ffffff— પેજ કેનવાસ, કાર્ડ સપાટીઓ, ઇનપુટ ફીલ્ડ્સ અને નેવિગેશન પૃષ્ઠભૂમિ એ મુખ્ય સપાટીઓ છે જે ઇન્ટરફેસના મોટા ભાગ પર કબજો કરે છે. - Charcoal
#232525— ઉચ્ચ પસંદગી સ્તરો સાથે વધારાના ટેક્સ્ટ અને લિંક્સ માટે હોવર સ્ટેટ; કોડ બ્લોક્સ અને પસંદગી બ્લોક્સ માટે ઇંક મોડ કરતાં વધુ ઊંડા. - Stone
#777777— ગૌણ UI ઘટકો, વિભાજકો અને મ્યૂટ કરેલા લેબલ્સ માટે તટસ્થ રંગ સપોર્ટેડ છે. કૉલ્સ ટુ એક્શન માટે તેનો પ્રાથમિક રંગ તરીકે ઉપયોગ થવો જોઈએ નહીં. - Ash
#b6b6b6— પાતળી સરહદ રેખાઓ, બટન રૂપરેખાઓ, ચિહ્ન રૂપરેખાઓ, અક્ષમ નિયંત્રણો પર સરહદો. - Mist
#c8c8c8— વિભાજન રેખાઓ, ચિહ્નો માટે સ્વાભાવિક પૃષ્ઠભૂમિ, હાડપિંજરના રૂપમાં ખાલી કોષો ભરવા.
ટાઇપોગ્રાફી
૧૨ થી ૩૨ પિક્સેલ સુધી · ૫ પગલાં
- system-ui — રિપ્લેસમેન્ટ: -apple-system · રૂપરેખા 400, 500, 600 · યુઝર ઇન્ટરફેસ અને બોડી ટેક્સ્ટ માટેના પ્રાથમિક ફોન્ટનો ઉપયોગ નેવિગેશન લેબલ્સ, બટનો, મેસેજ ટેક્સ્ટ, મેટાડેટા, ઇનપુટ ફીલ્ડ્સ અને બધા ઇન્ટરફેસ તત્વો માટે થાય છે. મેટાડેટા માટે 12-13px અને બોડી ટેક્સ્ટ માટે 15-19px ના કોમ્પેક્ટ કદ ગાઢ ન્યૂઝ ફીડની લાગણી બનાવે છે. બોડી ટેક્સ્ટ માટે વજન 400, નેવિગેશન તત્વો અને બટન લેબલ્સ માટે 500 અને હાઇલાઇટ કરેલા મેસેજ ટાઇટલ અને સેક્શન હેડિંગ માટે 600 છે.
- Cahuenga — રિપ્લેસમેન્ટ: Charter · રૂપરેખા 500 · પ્રોડક્ટ-લેવલ હેડિંગ (સાઇડબાર હેડિંગ, રજીસ્ટ્રેશન કાર્ડ હેડિંગ, મુખ્ય ટેક્સ્ટ) માટે એક સિગ્નેચર ડેકોરેટિવ સેરીફ ફોન્ટ. તેનું મધ્યમ વજન અને થોડી લાઇન ઊંચાઈ તેને ભારે લાગ્યા વિના એક વિશિષ્ટ દેખાવ આપે છે; તે એકમાત્ર ફોન્ટ છે જે, નારંગી રંગ ઉપરાંત, સબસ્ટેકની ઓળખ દર્શાવે છે.
- Spectral — રિપ્લેસમેન્ટ: Charter · રૂપરેખા 400 · લાંબી પોસ્ટ્સ માટે સેરીફ ફોન્ટ - સંપાદકીય સામગ્રીની વાંચનક્ષમતા સુધારવા માટે વાંચન ખંડ અને ન્યૂઝફીડ સામગ્રીમાં ઉપયોગમાં લેવાય છે. થોડું કડક લાઇન અંતર (1.20) ન્યૂઝરૂમની લાક્ષણિક કોમ્પેક્ટનેસ જાળવી રાખીને આરામદાયક ફકરા વાંચનની ખાતરી આપે છે.
અંતરાલો અને સ્વરૂપ
| હેતુ | અર્થ |
|---|---|
| ઘનતા | ગાઢ |
| મૂળભૂત પગલું | 8px |
| બટન ત્રિજ્યા | 9999px |
| કાર્ડ ત્રિજ્યા | 12px |
| પડછાયાઓ | પડછાયાને બદલે ના - સરહદો |
| વિભાગો વચ્ચે | 32px |
| પૃષ્ઠ પહોળાઈ | 1200px |
AI તમારી વેબસાઇટ Substack શૈલીમાં બનાવશે અને તેને ભરી દેશે.
- લિંક દ્વારા ઉત્પાદનો અને પોસ્ટ્સ ભરો - Instagram, TikTok, Facebook.
- તમારી જૂની સાઇટ પરથી સામગ્રી ટ્રાન્સફર કરો—ફક્ત સરનામું સ્પષ્ટ કરો.
- શ્રેષ્ઠ એન્જિન પર આધુનિક ડિઝાઇન: સર્વર રેન્ડરિંગ અને SEO ઑપ્ટિમાઇઝેશન સાથે React ( Next.js).
- શોધ પરિણામો અને ન્યુરલ નેટવર્ક ભલામણો માટે સંપૂર્ણપણે સ્વચાલિત SEO ઑપ્ટિમાઇઝેશન.
સમાન શૈલીઓ
- ElevenLabs — ગરમ ક્રીમ ટોનમાં સૂક્ષ્મ હેડલાઇન્સ સાથે ફોટો નિબંધ. બૌહાઉસ-શૈલીની નોટબુક - ઇંડાના રંગનો કાગળ, કાળી શાહી, અને ઉત્પાદન પ્રદર્શન માટે એક જ જાંબલી અને નારંગી ઉચ્ચાર.
- Awesomic — નારંગી વિરામચિહ્નો સાથે સંપાદકીય ઝીંક મેશ જે કોન્ફેટીની યાદ અપાવે છે
- Monad — ગરમ ચર્મપત્ર પર સંપાદકીય ટેકનિકલ જર્નલ
- Dub — લિંકનું મેટ રાઇસ પેપર કંટ્રોલ પેનલ
- Seline Analytics — ગરમ કાગળ પર એક શાંત વિશ્લેષણાત્મક ટેબલ
- Notion — બપોરના તડકામાં ગરમ કાગળની નોટબુક
- Anthropic — ગરમ વેલ્મ પર એક વૈજ્ઞાનિક ક્ષેત્ર જર્નલ - શાંત હાથીદાંતની સપાટીઓ, સેરિફ્ડ સંપાદકીય શીર્ષકો, અને એક જ માટીનો ઉચ્ચાર જે ફક્ત ત્યારે જ દેખાય છે જ્યારે ક્રિયાની જરૂર હોય.
- Calendly — ઠંડા આરસપહાણ પર ઘેરા વાદળી શાહી
- Augen Pro — એપલના સફેદ રંગમાં મોનોક્રોમ જગ્યામાં એકમાત્ર ઉચ્ચારણ તરીકે ક્લિનિકલ, વજનહીન, ઇલેક્ટ્રિક વાદળી રંગનો સમાવેશ થાય છે.
- Antimetal — ક્રીમ પેપર પર એક સંપાદકીય ઘટનાક્રમ - એક વૈજ્ઞાનિક જર્નલમાં એક શાંત સવાર, જ્યાં સંયમ આત્મવિશ્વાસ વ્યક્ત કરે છે અને સેરીફ ભારે કામ કરે છે.
- Perk — ગરમ ચર્મપત્ર કાગળ પર ઇલેક્ટ્રિક ચૂનો
- Ditto — સૂર્યપ્રકાશથી પ્રકાશિત વર્કશોપ, જંગલી ફૂલોના નમૂનાઓ બનાવે છે. ગરમ ક્રીમ સપાટીઓ, તેજસ્વી પીળો રંગ, ઘેરો વાદળી શાહી, ટુકડાની પાછળ ખીલેલા કાર્બનિક રંગના સ્વરૂપો.