Substack

ஆசிரியர் அலுவலக மேசையில் ஆரஞ்சு மை

சப்ஸ்டாக், நன்கு பயன்படுத்தப்பட்ட ஒரு செய்தி அறை டாஷ்போர்டைப் போலத் தோற்றமளிக்கிறது—ஒரு வெள்ளைத் தளம், இதமான, கிட்டத்தட்ட கருப்பு நிற எழுத்துக்கள், மற்றும் உள்ளடக்க உருவாக்கத்தின் ஒவ்வொரு கட்டத்தையும் குறிக்கும் ஒரே ஒரு பிரகாசமான ஆரஞ்சு நிறக் குறியீடு. இதன் காட்சிப் படிநிலை, அலங்காரத்தை விட அடர்த்தியின் அடிப்படையில் கட்டமைக்கப்பட்டுள்ளது: மெல்லிய சாம்பல் நிறக் கோடுகள் ஃபீட் கூறுகளைப் பிரிக்கின்றன, அவதார்கள் சிறியதாக உள்ளன, மெட்டாடேட்டா மங்கலாகக் காட்டப்பட்டுள்ளது, மேலும் வாசகரின் பார்வை ஆரஞ்சு நிறச் செயல் அழைப்பு, ஆரஞ்சு நிற லோகோ, ஆரஞ்சு நிற "சந்தா சேர்" இணைப்பு, மற்றும் ஆரஞ்சு நிற "உருவாக்கு" பொத்தான் ஆகியவற்றில் கவனம் செலுத்தப் பழக்கப்படுத்தப்பட்டுள்ளது. மேற்பரப்புகள் தட்டையாகவும் கட்டுப்பாடற்றதாகவும் வைக்கப்பட்டுள்ளன—கார்டு நிழல்கள் இல்லை, குரோம் பேனல் கூறுகள் இல்லை—இது அச்சுக்கலையை (ஒரு தனிப்பயன் செரிஃப் தலைப்பு எழுத்துருவுடன் இணைக்கப்பட்ட ஒரு கச்சிதமான குரோம் சிஸ்டம் UI கூறு) தலையங்கத்தின் பெரும் சுமையைச் சுமக்க அனுமதிக்கிறது. இதன் தனித்துவமான பாணி, கட்டுப்படுத்தப்பட்ட குரோம் கூறுகளும், துடிப்பான, ஒற்றை வண்ணத் துளிகளும் ஆகும்: இது ஒரு பதிப்புக் கருவி போன்ற உணர்வைத் தரும் ஒரு வாசிப்புச் செயலியாகும்.

மூன்று-பத்தி டெஸ்க்டாப் தளவமைப்பு: ஒரு நிலையான இடது பக்கப் பட்டி (~200px, சின்னங்கள் மற்றும் லேபிள்களுடன் கூடிய வழிசெலுத்தல், ஒட்டிக்கொள்ளும்), ஒரு மைய ஊட்டம் (அதிகபட்ச அகலம் ~600px, செங்குத்தாக உருளும் பதிவுகளின் பட்டியல்), மற்றும் ஒரு நிலையான வலது பக்கப் பட்டி (~300px, தேடல் + பரிந்துரைகள் + பதிவு). மைய ஊட்டம் என்பது தலையங்கத்தின் மையமாகும்—அதில் அட்டைகள் இல்லை, மெல்லிய பிரிப்பான்கள் மற்றும் பிரிவுகளுக்கு இடையில் 32px இடைவெளிகளுடன் பதிவுகள் ஒன்றன் மேல் ஒன்றாக அடுக்கப்பட்டுள்ளன. முக்கிய பேனர், ஊட்டத்தின் மேலே ஒரு முழு அகல அட்டையாக அமைந்துள்ளது. இடது பக்கப் பட்டியில் பிராண்ட் லோகோ (மேல் பதிக்கப்பட்ட கோடுகளுடன் கூடிய ஆரஞ்சு நிற அடையாளம்), ஆறு வழிசெலுத்தல் உருப்படிகள், மற்றும் கீழே ஒரு முழு அகல ஆரஞ்சு நிற "உருவாக்கு" பொத்தான் ஆகியவை உள்ளன. வலது பக்கப் பட்டியில் ஒரு தேடல் புலம், ஒரு பதிவு அட்டை, மற்றும் படிப்பதற்கான "அடுத்து வரவிருப்பவை" பட்டியல் ஆகியவை உள்ளன. வழிசெலுத்தல் மிகக் குறைவு—மேல் பட்டி இல்லை, வழித்தடங்கள் இல்லை; பக்கப் பட்டியே வழிசெலுத்தலாக உள்ளது. உள்ளடக்க அடர்த்தி அதிகமாக உள்ளது: பதிவுகள் 12-13px மெட்டாடேட்டாவையும் 15-19px முக்கிய உரையையும் பயன்படுத்துவதால், இது ஒரு சந்தையின் கார்டு கிரிட் போன்ற தோற்றத்திற்குப் பதிலாக, செய்தித்தாள் போன்ற ஒரு தாள அமைப்பை உருவாக்குகிறது.

புகைப்படங்கள் பயனரால் உருவாக்கப்பட்ட உள்ளடக்கமாகும் (ஆசிரியர் அவதாரங்கள், இடுகை சிறுபடங்கள், இடுகை படங்கள்) — சப்ஸ்டாக் அதன் சொந்த அலங்காரப் புகைப்படங்களை வழங்குவதில்லை. பிரதான அட்டையானது, பின்னணியாக அருவ விளக்கக் கூறுகளுடன் (வடிவியல் வடிவங்கள், பேனாக்கள் மற்றும் குறிப்புகள் போன்ற பாணியமைக்கப்பட்ட பொருள்கள்) நீலப்பச்சையிலிருந்து பச்சை வரையிலான வண்ணச் சரிவைப் பயன்படுத்துகிறது. வலது பக்கப் பட்டியில் உள்ள இடுகை சிறுபடங்கள் சிறியவை (64px), 8px ஆரத்திற்குள் அமைந்துள்ளன, மேலும் அவை வாசிப்புப் பட்டியலின் முன்னோட்டமாகச் செயல்படுகின்றன. ஒட்டுமொத்த காட்சி மொழியும் உரை அடிப்படையிலானது: இடைமுகம் ஒரு வாசிப்புத் தளமாக உள்ளது, மேலும் படங்கள் ஒரு சூழலை உருவாக்குவதற்குப் பதிலாக சிறிய காட்சி நங்கூரங்களாகச் செயல்படுகின்றன.

குறைந்தபட்சவாதம்தூய சாஸ்தலையங்கம்

https://substack.com

வண்ணத் தட்டு

பிராண்ட்

Signal Orange #ff6719 — ஆரஞ்சு நிறம், அலங்கார விவரங்களுக்கு ஒரு துணை நிறமாகவும், அரிதான குறிப்புகளை முன்னிலைப்படுத்தவும் பயன்படுத்தப்படுகிறது. செயல் அழைப்புகளுக்கு இதை முதன்மை நிறமாகப் பயன்படுத்தக் கூடாது.

நடுநிலை

Ink #363737 — உள்ளடக்க உரை—முக்கிய உரை, தலைப்புகள், இடுகைத் தலைப்புகள், நேரக்குறிப்புகள் மற்றும் ஆசிரியர் பெயர்கள்; எளிதாகப் படிப்பதற்காக, தூய #000 நிறத்திற்குப் பதிலாக, இதமான, கிட்டத்தட்ட கருப்பு நிறம் பயன்படுத்தப்பட்டுள்ளது.
Paper #ffffff — பக்கக் கேன்வாஸ், கார்டு பரப்புகள், உள்ளீட்டுப் புலங்கள் மற்றும் வழிசெலுத்தல் பின்னணி ஆகியவை இடைமுகத்தின் பெரும்பகுதியை ஆக்கிரமிக்கும் முக்கியப் பரப்புகளாகும்.
Charcoal #232525 — உயர் தேர்வு நிலைகளைக் கொண்ட கூடுதல் உரை மற்றும் இணைப்புகளுக்கு ஹோவர் நிலை; குறியீட்டுத் தொகுதிகள் மற்றும் தேர்வுத் தொகுதிகளுக்கு இங்க் பயன்முறையை விட ஆழமானது.
Stone #777777 — இரண்டாம் நிலை UI கூறுகள், பிரிப்பான்கள் மற்றும் மங்கலான லேபிள்களுக்கு நடுநிலை நிறம் ஆதரிக்கப்படுகிறது. அதைச் செயல் அழைப்புகளுக்கான முதன்மை நிறமாகப் பயன்படுத்தக் கூடாது.
Ash #b6b6b6 — மெல்லிய எல்லைக் கோடுகள், பொத்தான் வெளிக்கோடுகள், ஐகான் வெளிக்கோடுகள், செயலிழந்த கட்டுப்பாடுகளுக்கான எல்லைகள்.
Mist #c8c8c8 — பிரிக்கும் கோடுகள், சின்னங்களுக்கான கண்ணுக்கு உறுத்தாத பின்னணி, வெற்று கலங்களை ஒரு எலும்புக்கூடு வடிவில் நிரப்புதல்.

அச்சுக்கலை

12 முதல் 32px வரை · 5 படிகள்

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

செயற்கை நுண்ணறிவு உங்கள் வலைத்தளத்தை Substack பாணியில் உருவாக்கி, அதை நிரப்பும்.

Instagram, TikTok, Facebook இணைப்புகளின் வழியாக தயாரிப்புகளையும் பதிவுகளையும் நிரப்பவும்.
உங்கள் பழைய தளத்திலிருந்து உள்ளடக்கத்தை மாற்றவும்—முகவரியைக் குறிப்பிட்டால் போதும்.
சிறந்த இன்ஜினான React ( Next.js)-இல், சர்வர் ரெண்டரிங் மற்றும் உள்ளமைக்கப்பட்ட SEO மேம்படுத்தலுடன் கூடிய நவீன வடிவமைப்பு.
தேடல் முடிவுகளுக்கான முழுமையாகத் தானியங்குபடுத்தப்பட்ட SEO உகப்பாக்கம் மற்றும் நியூரல் நெட்வொர்க் பரிந்துரைகள்.

இந்த பாணியில் ஒரு வலைத்தளத்தை உருவாக்கவும்

ஒத்த பாணிகள்

ElevenLabs — மென்மையான தலைப்புகளுடன், இதமான கிரீம் வண்ணங்களில் அமைந்த ஒரு புகைப்படக் கட்டுரை. ஒரு பௌஹாஸ் பாணி நோட்டுப்புத்தகம்—முட்டை ஓட்டு நிறக் காகிதம், கருப்பு மை, மற்றும் பொருளைக் காட்சிப்படுத்த ஒற்றை ஊதா மற்றும் ஆரஞ்சு வண்ண அலங்காரம்.
Awesomic — காகிதத் துண்டுகளை நினைவூட்டும் ஆரஞ்சு நிற நிறுத்தற்குறிகளுடன் கூடிய தலையங்க துத்தநாக வலை.
Monad — வெதுவெதுப்பான தோல் காகிதம் குறித்த தலையங்க தொழில்நுட்ப இதழ்
Dub — லிங்கின் மேட் அரிசி காகித கட்டுப்பாட்டுப் பலகம்
Seline Analytics — சூடான காகிதத்தில் ஒரு அமைதியான பகுப்பாய்வு அட்டவணை
Notion — நண்பகல் வெயிலில் ஒரு சூடான காகித நோட்டுப்புத்தகம்
Anthropic — வெதுவெதுப்பான தோல் தாளில் அச்சிடப்பட்ட ஒரு அறிவியல் கள ஆய்விதழ்—அமைதியான தந்த நிற மேற்பரப்புகள், செரிஃப் வடிவ தலையங்கத் தலைப்புகள், மற்றும் செயல்பாடு தேவைப்படும்போது மட்டும் தோன்றும் ஒரு களிமண் நிறச் சின்னம்.
Calendly — குளிர்ந்த பளிங்குக் கல்லின் மீது அடர் நீல மை
Augen Pro — ஆப்பிளின் வெள்ளை நிறக் காட்சியமைப்பில், ஒரே வண்ணமுடைய இடத்தில், நேர்த்தியான, எடையற்ற, மின்னல் நீல நிறம் மட்டுமே தனிச்சிறப்பாக இடம்பெற்றுள்ளது.
Antimetal — வெளிர் நிறத் தாளில் ஒரு தலையங்கக் குறிப்பு—ஒரு அறிவியல் இதழில் ஓர் அமைதியான காலைப் பொழுது; அங்கே நிதானம் தன்னம்பிக்கையை வெளிப்படுத்த, செரிஃப் எழுத்துருக்கள் கடினமான வேலையைச் செய்கின்றன.
Perk — சூடான காகிதத்தோல் மீது மின்சார சுண்ணாம்பு
Ditto — சூரிய ஒளி நிறைந்த ஒரு பட்டறையில் காட்டுப்பூ மாதிரிகள் உருவாக்கப்படுகின்றன. வெதுவெதுப்பான கிரீம் நிறப் பரப்புகள், துடிப்பான மஞ்சள் நிற அடிப்பூ, அடர் கடற்படை நீல மைகள், படைப்பிற்குப் பின்னால் மலரும் இயற்கையான வண்ண வடிவங்கள்.