Superlist

பவளத் தணல்களுடன் கூடிய ஒரு இரவு நேரப் பணியிடம் — ஒவ்வொரு செயலையும் உணர்த்தும் ஒற்றை, இதமான ஆரஞ்சு நிறப் பொறியைக் கொண்ட ஓர் அமைதியான கத்தரிக்காய் நிறச் செயலி மேற்பரப்பு.

சூப்பர்லிஸ்ட், நள்ளிரவு ஊதா நிற டோன்களில் ஒரு உற்பத்தித்திறன் மொழியைப் பயன்படுத்துகிறது: அடர் கத்தரிப்பூ நிறம், ஒரே முதன்மை நிறமாக வெதுவெதுப்பான பவள நிறம், மற்றும் முழு சூழலையும் படம்பிடிக்கும் பெரிய சான்ஸ்-செரிஃப் தலைப்புகள். இந்த இடைமுகம், இரவு நேரக் கவனமான வேலையின் உணர்வைத் தூண்டுகிறது—அமைதியான, அடுக்குகள் கொண்ட, மற்றும் நம்பிக்கையானதாக, செயல் அழைப்புகள், செயல்பாட்டு நிலைகள், மற்றும் முக்கிய குறிப்புகளில் செயல்பாட்டு நிறுத்தற்குறிகளாக மட்டுமே நிறம் பயன்படுத்தப்படுகிறது. மேற்பரப்புகள், ஊதா நிறத்தின் சாயலுடன் கூடிய நுட்பமான அடர் டோன்களில் (#181824 → #26253b) அடுக்கப்பட்டுள்ளன; ஆழம் உயிரற்றதாகத் தோன்றுவதற்குப் பதிலாக வெதுவெதுப்பாக உணரப்படுவதை உறுதிசெய்ய, தூய கருப்பு நிறம் தவிர்க்கப்பட்டுள்ளது. கூறுகள் தாராளமான வட்டமான வடிவங்களைக் (20px கார்டுகள், பில் பட்டன்கள்) கொண்டுள்ளன, மென்மையான நிழல்கள், மற்றும் இறுக்கமான கட்டங்களுக்குப் பதிலாக வசதியான 10-16px இடைவெளிகள் மூலம் "சுவாசிக்கின்றன". தலைப்பின் குரலே எல்லாமே: 70-88px அளவில் 600-பாயிண்ட் தடிமன் மற்றும் -0.02em என்ற இறுக்கமான எழுத்து இடைவெளி, உரையை UI ஆகக் கருதாமல் அச்சுக்கலையாகக் கருதுகிறது—இது SaaS-ஐ விட தலையங்க நகலுக்கு நெருக்கமாக உள்ளது.

பக்கத்தின் முழு அகலத்திற்கும் அடர் நிறப் பகுதிகள் பரவியுள்ளன, மேலும் அவை மையப்படுத்தப்பட்ட, அதிகபட்ச அகல உள்ளடக்கக் கொள்கலன்களைக் கொண்டுள்ளன. முக்கியப் பகுதி செங்குத்தாக மையப்படுத்தப்பட்டுள்ளது, மேலும் அதில் ஒரு தலைப்பு, துணை உரை மற்றும் செயலுக்கான அழைப்பு (CTA) ஆகியவை உள்ளன. அதனைத் தொடர்ந்து, அடுத்த பகுதியின் மீது படியும் வகையில் ஒரு பெரிய தயாரிப்புத் திரைக்காட்சி இடம்பெற்றுள்ளது. அடுத்தடுத்த பகுதிகள், மையப்படுத்தப்பட்ட உரைத் தொகுதிகள் மற்றும் அட்டைக் கட்டங்களுக்கு இடையில் மாறி மாறி வருகின்றன. மதிப்புரைகள் பகுதி, மதிப்புரை அட்டைகள் மற்றும் 16 இடைவெளிகளுடன் கூடிய மூன்று-நெடுவரிசைக் கட்டத்தைப் பயன்படுத்துகிறது. வழிசெலுத்தல் என்பது இடதுபுறத்தில் சின்னம், மையப்படுத்தப்பட்ட இணைப்புகள் மற்றும் வலதுபுறத்தில் உள்நுழைவுச் செயல்பாடுகளைக் கொண்ட ஒற்றை மேல் பட்டையாகும்—நிலையான பக்கப் பட்டி அல்லது மெகா-மெனு எதுவும் இல்லை. பிரிவுகளுக்கு இடையேயான இடைவெளிகள் தாராளமாக (16 இடைவெளிகள்) உள்ளன, இது அடர்த்தியான தயாரிப்புக் கட்டத்திற்குப் பதிலாக ஒரு விசாலமான, தலையங்கத் தாளத்தை உருவாக்குகிறது.

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

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

https://superlist.com

வண்ணத் தட்டு

பிராண்ட்

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

நடுநிலை

Aubergine Canvas #181824 — பக்கத்தின் பிரதான திரையான பின்னணியானது, தூய கருப்பு நிறத்திற்குப் பதிலாக ஒரு இதமான, அடர் நிறத்தைக் கொண்டிருப்பதால், பயனர் இடைமுகம் தட்டையாகத் தோன்றாமல் அடுக்குகள் கொண்டதாகத் தோன்றுகிறது.
Elevated Plum #26253b — அட்டைப் பரப்புகள், உள்ளீட்டுப் புலங்கள், வழிசெலுத்தல் கொள்கலன்கள்—தெளிவான எல்லை இல்லாமல் ஆழத்தை உருவாக்க, கேன்வாஸை விட இது ஒரு படி எளிதானது.
Pure White #ffffff — முக்கியத் தலைப்புகள், பொத்தான் உரை மற்றும் சின்னங்களின் வெளிக்கோடுகள்—அடர்த்தியான பின்னணியில் அதிகபட்ச வேறுபாட்டுடன்.
Fog Text #696f81 — முதன்மை உரை, துணைத் தலைப்புகள் மற்றும் மங்கலான ஓரங்கள்—கத்தரிக்காய் நிறப் பின்னணியில் வசதியாகப் படிப்பதற்கான 7:1 வண்ண வேறுபாடு விகிதம்.
Ash Text #8e8da0 — இரண்டாம் நிலை UI கூறுகள், பிரிப்பான்கள் மற்றும் மங்கலான லேபிள்களுக்கு நடுநிலை நிறம் ஆதரிக்கப்படுகிறது. அதைச் செயல் அழைப்புகளுக்கான முதன்மை நிறமாகப் பயன்படுத்தக் கூடாது.
Mist Highlight #a3a3a7 — நுட்பமான எல்லைகள், பிரிப்பான்கள் மற்றும் செயலற்ற வழிசெலுத்தல் கூறுகள் ஆகியவை, ஓவியத் திரையில் தனித்துத் தெரியும் ஒரு மென்மையான நடுநிலைத் தொனியை உருவாக்குகின்றன.

அச்சுக்கலை

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

sans-serif — மாற்று: Inter · வெளிப்புறங்கள் 400 · sans-serif - பிரித்தெடுக்கப்பட்ட தரவுகளில் காணப்படுகிறது, ஆனால் செயற்கை நுண்ணறிவால் விவரிக்கப்படவில்லை.
Haffer XH SemiBold — மாற்று: Inter Tight · வெளிப்புறங்கள் 400, 600 · காட்சி மற்றும் தலைப்புகளுக்கான முதன்மை எழுத்துரு. இது முதன்மைத் தலைப்புகளுக்கு 70–88px அளவில், -0.02em எழுத்து இடைவெளி மற்றும் 600 தடிமனுடன் பயன்படுத்தப்படுகிறது. இதன் குறுகிய எழுத்து இடைவெளி மற்றும் பெரிய எழுத்து உயரம், தலைப்புகளுக்கு ஒரு தலையங்கத் தோற்றத்தை அளித்து, இந்த இருண்ட இடைமுகத்தை ஒரு டாஷ்போர்டை விட பத்திரிகை அட்டைப்படம் போலக் காட்டுகிறது. இதற்குப் பதிலாக, தடித்த தடிமனில் இன்டர் டைட் அல்லது ஜெனரல் சான்ஸ் எழுத்துருவைப் பயன்படுத்தவும்.
Jersey 10 — மாற்று: Anybody · வெளிப்புறங்கள் 400 · முக்கிய எண்கள் மற்றும் சிறப்பம்சங்களுக்கான ஒரு பெரிய, அலங்கார எழுத்துரு. அச்சுக்கலை சார்ந்த சிறப்பம்சங்களை உருவாக்க, மிகப் பெரிய அளவுகளில் அளவோடு பயன்படுத்தப்படுகிறது. இதற்குப் பதிலாக Anybody அல்லது Cabinet Grotesk-ஐப் பயன்படுத்தலாம்.

இடைவெளிகள் மற்றும் வடிவம்

நோக்கம்	பொருள்
அடர்த்தி	சராசரி
அடிப்படை படி	10-16px
பொத்தான் ஆரம்	100px
அட்டை ஆரம்	20px
நிழல்கள்	மென்மையான நிழல்கள்
பிரிவுகளுக்கு இடையில்	80px
பக்க அகலம்	1200px

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

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

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

ஒத்த பாணிகள்

DNA — துகள் வில்லை வழியாகக் காணப்படும் நள்ளிரவு வானாய்வகம்
Abetterlou — சேணத் தோலில் தீப்பொறிகள் - அடர் காபி-கருப்புப் பின்னணியில் ஒளிரும் ஒரு இதமான, கிரீம் நிற எழுத்துரு; தாளில் சூடான உலோகம் அழுத்தப்பட்டது போன்ற உணர்வைத் தரும் அம்பர்-தங்க நிறப் பொத்தான்கள்.
Galileo-ft — மின்சார நீல சமிக்ஞைகளைக் கொண்ட ஒரு ஆழ்விண்வெளி கட்டளைத் தளம்
Decide AI — நள்ளிரவில் வானிலை ஆய்வு மையம் - புதினா சமிக்ஞை
Redis Agency — வேலை நேரம் முடிந்த பிறகும் திறந்திருக்கும் அந்த எடிட்டோரியல் பட்டறை, கும்மிருட்டான ஓர் இடமாகும்; அங்கு பிராண்டிங் தொடர்பான அனைத்துப் பணிகளும் செரிஃப் எழுத்துருக்களையும் ஒரேயொரு சிவப்பு முள்ளங்கியையும் கொண்டு செய்யப்படுகின்றன.
Spellbook — பவள நிற மையால் ஒளியூட்டப்பட்ட ஒரு நள்ளிரவு நீதிமன்றம்—வெப்பமான ஆரஞ்சு நிறப் பேனாவின் கோடுகளின் ஓசை மட்டுமே கேட்கும் ஓர் இருண்ட தலையங்கப் பரப்பு.
Linear — நள்ளிரவு துல்லியமான கருவி
Origin Financial — அமைதியான செழுமையின் ஓர் நள்ளிரவுக் கலைக்கூடம். பெரிய செரிஃப் எழுத்துருக்களும், ஒளியூட்டப்பட்ட சில வண்ணப் பலகைகளும் நிதித்துறை என்பது கவனமாகத் தொகுக்கப்பட்ட ஒரு கலைப்படைப்பு என்ற உணர்வை உருவாக்கும் ஓர் அமைதியான, கிட்டத்தட்ட இருண்ட அறை.
Hyperstudio — அந்த வடிவமைப்பு கருங்கற் பாறையில் கீறப்பட்டுள்ளது. எழுத்துக்களும் மெல்லிய கோடுகளும், தூய கருப்பு நிறத்திலான ஒரு வெற்று வெளியைச் சூழ்ந்துள்ளன; அதில் ஆங்காங்கே காணப்படும் பொன்னிற திசைகாட்டிக் குறிகள் வழியைக் காட்டுகின்றன.
Air — "கண்ணாடி வழியே நள்ளிரவு வானம்" என்ற சிற்பம்
Raycast — நள்ளிரவு கட்டளை மையம், கோரல் நியான்
dope.security — ஊதா நிற ஒளிவிளக்குகளுடன் கூடிய நள்ளிரவு முனையம்