Column
குளிர்ந்த விடியலின் கீழ் ஒரு அடர் நீலப் பதிவேடு
காலம், கிட்டத்தட்ட வெள்ளை நிறப் பின்னணியில், ஒரு நிறுவனத்திற்கே உரிய அடர் நீல நிறத்தைப் பயன்படுத்துகிறது: இந்தப் பக்கம் முதலில் ஒரு வலுவான வங்கித் தயாரிப்புத் தளம் போலவும், இரண்டாவதாக ஒரு டெவலப்பர் விளையாட்டுத் தளம் போலவும் உணரவைக்கிறது. பிராண்ட் நிறம் என்பது ஒரே நிறம் அல்ல, மாறாக ஒருங்கிணைக்கப்பட்ட ஒரு ஜோடி—கம்பீரமான கட்டமைப்பிற்கு அடர் நீலம் #111a4a, தரவு மற்றும் குறியீட்டிற்கு புதினா பச்சை #44b48b—மற்றும் பிரெக்ஸ் கார்டு போன்ற அதிக அடர்த்தி கொண்ட முக்கிய மேற்பரப்புகளுக்காக ஒரு இதமான ஆரஞ்சு (#ec652b) நிறம் ஒதுக்கப்பட்டுள்ளது. எழுத்துரு வடிவமைப்பில் SuisseIntl ஆதிக்கம் செலுத்துகிறது; இது 300 (இணைப்புகள்) முதல் 600 (காட்சி) வரையிலான முழு தடிமன் வரம்பிலும் பயன்படுத்தப்படும் ஒரு வடிவியல் சான்ஸ் செரிஃப் ஆகும். இது பெரும்பாலான ஃபின்டெக் நிறுவனங்களில் இல்லாத ஒரு நேர்த்தியான, தலையங்கப் பாணியை இந்த அமைப்புக்கு அளிக்கிறது. கார்டுகள் பெரிய வெள்ளை மேற்பரப்புகளில் நுட்பமான, அடுக்கடுக்கான நிழல்களுடன் மிதக்கின்றன; பெரும்பாலான இடைமுகக் கூறுகள் தட்டையாக உள்ளன, கார்டு ஒரு பௌதீகப் பொருள் போல உணரப்பட வேண்டிய இடங்களில் (பரிவர்த்தனை விட்ஜெட்டுகள், தயாரிப்பு மாதிரிகள்) மட்டுமே ஆழம் தோன்றுகிறது. குறியீடு மற்றும் நிதித் தரவுகள் ஒரே வண்ணத்தில், கடல் நுரை நிறத்தில் வழங்கப்படுகின்றன—இது பொறியாளர்களுக்காகப் பொறியாளர்களால் உருவாக்கப்பட்ட ஒரு வங்கி என்பதற்கான காட்சி சமிக்ஞையாகும்.
பக்க அமைப்பு முழு அகலத்திலும், அகலமான பக்க ஓரங்களுடன் (டெஸ்க்டாப்பில் 64–15 செ.மீ) மையப்படுத்தப்பட்டும் உள்ளது. பிரதான திரை ஒரு பிரிக்கப்பட்ட தளவமைப்பு ஆகும்: தலைப்பு மற்றும் செயல் அழைப்புகள் 25 செ.மீ அளவில் இடதுபுறம் சீரமைக்கப்பட்டுள்ளன, அதே நேரத்தில் ஒரு மிதக்கும் பரிவர்த்தனை விட்ஜெட், ஒரு ஹால்ஃப்டோன் வரைபடப் பின்னணியில் 55 செ.மீ அளவில் வலதுபுறம் நிலைநிறுத்தப்பட்டுள்ளது. பிரதான திரைக்குக் கீழே, பிரிவுகள் 6 செ.மீ செங்குத்து இடைவெளிகளுடன் வெள்ளை (4 செ.மீ) மற்றும் வெளிர் கேன்வாஸ் (5 செ.மீ) நிறங்களுக்கு இடையில் மாறி மாறி அமைந்துள்ளன. உள்ளடக்கம் ஒரு ஒற்றை 6-நெடுவரிசை கட்டத்தின்படி அமைக்கப்பட்டுள்ளது: உரைத் தொகுதிகள் 4 நெடுவரிசைகளையும் (7 செ.மீ), படம்/தயாரிப்பு அட்டைகள் 5–6 நெடுவரிசைகளையும் ஆக்கிரமித்துள்ளன, இவை கட்டத்திலிருந்து வேண்டுமென்றே சற்று தள்ளி அமைக்கப்பட்டுள்ளன. அம்சங்களை விவரிக்கும் பிரிவுகள் 2-நெடுவரிசை தளவமைப்பைப் பயன்படுத்துகின்றன: இடதுபுறம் உரை, வலதுபுறம் தயாரிப்பு. நம்பகத்தன்மை புள்ளிவிவரப் பிரிவு, பக்கத்தின் முழு அகலத்திற்கும் 4-நெடுவரிசை கட்டமாகப் பிரிக்கப்பட்டுள்ளது. வாடிக்கையாளர் சின்னங்கள் 48px இடைவெளிகளுடன் மையப்படுத்தப்பட்ட ஒற்றை வரிசையில் அமைந்துள்ளன. அடிக்குறிப்பு ஒரு கச்சிதமான இரண்டு-நெடுவரிசை தளவமைப்பைக் கொண்டுள்ளது. வழிசெலுத்தல் என்பது பிரதான திரையின் மேல் உள்ள, 62 பிக்சல்கள் உயரமுள்ள, நிலையான, ஒளிபுகும் ஒரு மேல் பட்டையாகும். இதன் மங்கலான பின்னணி, நீங்கள் ஸ்க்ரோல் செய்யும்போது வெண்மையாக மங்கிவிடும். பக்கவாட்டுப் பட்டை அல்லது மெகா மெனு எதுவும் இல்லை—கீழ்விரி மெனுக்கள் எளிய அம்புக்குறி வடிவ மெனுக்களாக உள்ளன.
காட்சிப் பாணி எளிமையானதாகவும் செயல்பாட்டுக்கு உகந்ததாகவும் உள்ளது—காலம், ஸ்டாக் புகைப்படங்களை முற்றிலுமாகத் தவிர்க்கிறது. காட்சி மொழி மூன்று மூலங்களை அடிப்படையாகக் கொண்டு கட்டமைக்கப்பட்டுள்ளது: (1) SVG தரவு விளக்கப்படங்கள், குறிப்பாக ஒரு புள்ளியிடப்பட்ட ஹால்ஃப்டோன் உலக வரைபடம், இது இண்டிகோவிலிருந்து ஆரஞ்சு வழியாக டர்க்கைஸ் வரை ஒரு கிரேடியன்ட்டில் ரெண்டர் செய்யப்பட்டு, பிரதான கூறுக்குப் பின்னால் ஒரு உலகளாவிய அளவிலான சூழலை உருவாக்குகிறது; (2) தயாரிப்பு அட்டை தளவமைப்புகள்—கணக்கு இருப்புகள், பரிமாற்ற விவரங்கள் மற்றும் JSON குறியீடு துணுக்குகளைக் காட்டும் மிதக்கும் விட்ஜெட்டுகள், வியத்தகு நிழல்களுடன் கூடிய வெள்ளை அட்டைகளில் காட்டப்படுகின்றன; (3) விளக்கப்படக் காட்சிப்படுத்தல்கள்—நம்பிக்கை/புள்ளிவிவரப் பிரிவில் பயன்படுத்தப்படும் மெல்லிய இணைப்புக் கோடுகளுடன் கூடிய டர்க்கைஸ் கேண்டில்ஸ்டிக் அல்லது பார் விளக்கப்படங்கள். ஹால்ஃப்டோன் வரைபடம் ஒரு தனித்துவமான காட்சி உறுப்பாகும்—அதன் கிரேடியன்ட் #d65620 (ஆரஞ்சு) நிறத்திலிருந்து வயலட், நீலம், அஸூர், டர்க்கைஸ் மற்றும் மஞ்சள் வழியாக மாறி, முழு பிராண்ட் வண்ணத் தொகுப்பையும் ஒரே அலங்கார மேற்பரப்பில் ஒன்றிணைக்கும் ஒரு நிறமாலையை உருவாக்குகிறது. ஐகான்கள் #232730 அல்லது #a9acb6 வகைகளில் 1.5–2px என்ற சீரான வெளிப்புறத் தடிமனைக் கொண்டுள்ளன, மேலும் செயலில் உள்ள நிலைகளுக்கு ஒரு ஃபில் உள்ளது. வாழ்க்கைமுறைப் புகைப்படங்களோ, அருவமான முப்பரிமாணப் படங்களோ இல்லை—தயாரிப்பு மற்றும் தரவுகளின் மீது கவனத்தைக் குவிப்பதற்காகவே இந்தக் கட்டுப்பாடு வேண்டுமென்றே கடைப்பிடிக்கப்படுகிறது.
வண்ணத் தட்டு
பிராண்ட்
- Indigo Navy
#111a4a— முதன்மை பிராண்ட் நிறமானது, நிரப்பப்பட்ட செயல் அழைப்புகள், செயலில் உள்ள வழிசெலுத்தல் நிலைகள், தலைப்பு மற்றும் சின்னம் ஆகியவற்றிற்குப் பயன்படுத்தப்படுகிறது. அடர் ஊதா-நீல நிறம், தளத்திற்கு திடமான அதே சமயம் செழுமையான கருப்பு நிறச் சாயலை அளிக்கிறது; வெள்ளை எழுத்துகளுடன் இணையும்போது, இது தளத்தின் மிகவும் ஆளுமைமிக்க பொத்தானை உருவாக்குகிறது. - Seafoam 600
#44b48b— குறியீடு மற்றும் தரவு நிறம் என்பது குறியீட்டுத் துண்டுகளில் உள்ள JSON விசைகள், அடையாளங்காட்டிகள் மற்றும் நிதி மதிப்புகளுக்கான பிராண்ட் நிறமாகும். இது விளக்கப்படங்கள் மற்றும் வளர்ச்சி காட்சிப்படுத்தல்களில் உள்ள தரவுப் புள்ளிகளுக்கும் பயன்படுத்தப்படுகிறது. - Seafoam 700
#167e6c— தரவுச் சூழலில் உள்ள வெளிக்கோடு, விளக்கப்படக் கோடுகள் மற்றும் சின்னங்களின் சிறப்பம்சங்களுக்கு அடர் கடல் நுரை நிறம் பயன்படுத்தப்பட்டுள்ளது. இது, அடர் பின்னணிக்கு எதிராக கடல் நுரை அளவுகோலை நிலைநிறுத்துகிறது. - Seafoam 400
#94efb7— சிறப்பித்துக் காட்டப்பட்ட குறியீட்டுப் பகுதியானது, குறியீட்டுத் தொகுதிகளுக்குள் சர மதிப்புகள், URL-கள் மற்றும் API முனையங்களைக் கொண்டுள்ளது. மிகவும் இலேசான கடல் நுரை நிறமானது, பச்சை நிறச் சாயலுடன் கூடிய ஒரு மோனோஸ்பேஸ்டு எழுத்துருவாகத் தெரிகிறது. - Deep Sea
#023247— இந்த விளக்கப்படத்தின் அலங்கார வெளிப்புறக் கோடு மற்றும் முக்கிய நிறமானது, கடல் நுரை வண்ண அளவுகோலுடன் சேர்த்து, SVG விளக்கப்படங்கள் மற்றும் தரவு காட்சிப்படுத்தல்களில் பயன்படுத்தப்படும் அடர் நீலப்பச்சை நிறமாகும்.
நடுநிலை
- Midnight Ink
#011821— அடர் நிற மேற்பரப்பு மற்றும் சிறப்பித்துக் காட்டப்பட்ட உரை – தயாரிப்பு அட்டைப் பின்னணி, அதிக மாறுபாடு கொண்ட முக்கிய உரை. குளிர்ச்சியான நீல-பச்சை சாயலுடன் கூடிய சாம்பல் நிறத்திற்கு நெருக்கமானது; ஒரு பகுதியைத் தலைகீழாக்க வேண்டியிருக்கும் போது, டார்க் மோடுக்கு அடிப்படையாகப் பயன்படுத்தப்படுகிறது. - Slate Ink
#3b3e47— வெளிர் நிற கேன்வாஸில் தூய கருப்பு மிகவும் கடுமையாகத் தோன்றும் இடங்களில், துணைத் தலைப்பும் முக்கிய உரையும் 'மிட்நைட் இங்க்'கை விடச் சற்று இதமான வண்ணத்தில் பயன்படுத்தப்பட்டுள்ளன. - Steel
#7c7f88— முக்கிய உரை மற்றும் இணைப்பு உரை ஆகியவற்றில் ஒரு மென்மையான நிறம் ஆதிக்கம் செலுத்துகிறது (இது முக்கிய உரையில் 245 முறை பயன்படுத்தப்பட்டுள்ளது). இது ஒரு நடுநிலையான சாம்பல்-நீல நிறமாகும், இது அமைதியானதாக உணரப்படுகிறது, ஒருபோதும் வெளிறிய பிம்பமாகத் தோன்றுவதில்லை. - Fog
#a9acb6— சின்னங்களின் வெளிக்கோடுகள், மூன்றாம் நிலை எல்லைகள் மற்றும் இடம்பிடிக்கும் உரை. உரையுடன் போட்டியிடாமல் அதைப் பிரிக்கும் ஒரு நடுத்தர சாம்பல் நிறம். - Mist
#cbcccf— கையொப்பங்கள், பொறுப்புத் துறப்புகள் மற்றும் சிறிய எழுத்துக்கள் அடங்கிய முக்கிய உரை, வெள்ளைப் பின்னணியில் தெளிவாகத் தெரிகிறது, ஆனால் பார்ப்பதற்கு அவ்வளவாகக் கவனத்தை ஈர்ப்பதில்லை. - Silver Lining
#e3e4e8— அட்டை ஓரங்கள், உள்ளீட்டுப் புல ஓரங்கள், பிரிக்கும் கோடுகள். இரண்டு பரப்புகளை நிழல்கள் இல்லாமல் பிரிக்க வேண்டிய இடங்களில், இந்த கட்டமைப்பு சார்ந்த, நுட்பமான நிறம் பயன்படுத்தப்படுகிறது.
அச்சுக்கலை
10 முதல் 60px வரை · 10 படிகள்
- SuisseIntl — மாற்று: Inter · வெளிப்புறங்கள் 300, 400, 500, 600 · முதன்மை எழுத்துரு – அனைத்துத் தலைப்புகள், உள்ளடக்க உரை, பொத்தான்கள், வழிசெலுத்தல், இணைப்புகள் மற்றும் அட்டை உரை ஆகியவற்றிற்குப் பயன்படுத்தப்படுகிறது. இதன் தனித்துவமான வடிவியல் சான்ஸ் செரிஃப், 'காலம்' எழுத்துருவிற்கு ஒரு தனித்துவமான தலையங்கப் பாணியை அளித்து, பிரத்தியேகமாக இன்டர்-மட்டும் எழுத்துருக்களுடன் பணிபுரியும் மற்ற ஃபின்டெக் நிறுவனங்களிலிருந்து இதை வேறுபடுத்திக் காட்டுகிறது. இதன் தடிமன், தலைப்புகளுக்கு 52–60px அளவில் 600, துணைத் தலைப்புகளுக்கு 500, உள்ளடக்க உரைக்கு 400 மற்றும் குறைந்த முக்கியத்துவம் வாய்ந்த இணைப்புகளுக்கு 300 ஆகும்.
- SuisseIntlMono — மாற்று: JetBrains Mono · வெளிப்புறங்கள் 400 · SuisseIntl-ஐப் போன்ற ஒரு மோனோஸ்பேஸ்டு எழுத்துரு, இது தொழில்நுட்ப லேபிள்கள், API அடையாளங்காட்டிகள் மற்றும் UI கூறுகளில் உட்பொதிக்கப்பட்ட தரவுகளுக்குப் பயன்படுத்தப்படுகிறது. இது SuisseIntl-இன் அதே விகிதாச்சாரத்தைப் பராமரிப்பதால், மோனோஸ்பேஸ்டு மற்றும் விகிதாச்சார உரைகள் கலவையான சூழல்களில் சரியாகப் பொருந்துகின்றன.
- SFMono — மாற்று: Fira Code · வெளிப்புறங்கள் 400 · குறியீட்டுத் துணுக்கு காட்சி – இது JSON எடுத்துக்காட்டுகள் மற்றும் API ஆவணத் தொகுதிகளில் காட்டப்படுகிறது. குறியீட்டை UI உரையிலிருந்து பார்வைக்கு வேறுபடுத்திக் காட்ட கடல் நுரை நிறம் பயன்படுத்தப்படுகிறது.
இடைவெளிகள் மற்றும் வடிவம்
| நோக்கம் | பொருள் |
|---|---|
| அடர்த்தி | சராசரி |
| அடிப்படை படி | 8px |
| பொத்தான் ஆரம் | 8px |
| அட்டை ஆரம் | 8px |
| நிழல்கள் | நிழல்களுக்குப் பதிலாக எல்லைகள் இல்லை |
| பிரிவுகளுக்கு இடையில் | 72px |
| பக்க அகலம் | 1200px |
செயற்கை நுண்ணறிவு உங்கள் வலைத்தளத்தை Column பாணியில் உருவாக்கி, அதை நிரப்பும்.
- Instagram, TikTok, Facebook இணைப்புகளின் வழியாக தயாரிப்புகளையும் பதிவுகளையும் நிரப்பவும்.
- உங்கள் பழைய தளத்திலிருந்து உள்ளடக்கத்தை மாற்றவும்—முகவரியைக் குறிப்பிட்டால் போதும்.
- சிறந்த இன்ஜினான React ( Next.js)-இல், சர்வர் ரெண்டரிங் மற்றும் உள்ளமைக்கப்பட்ட SEO மேம்படுத்தலுடன் கூடிய நவீன வடிவமைப்பு.
- தேடல் முடிவுகளுக்கான முழுமையாகத் தானியங்குபடுத்தப்பட்ட SEO உகப்பாக்கம் மற்றும் நியூரல் நெட்வொர்க் பரிந்துரைகள்.
ஒத்த பாணிகள்
- dope.security — ஊதா நிற ஒளிவிளக்குகளுடன் கூடிய நள்ளிரவு முனையம்
- Leonardo — ஒரு தலைகீழான தலையங்கக் காட்சிக்கூடம். கருப்புச் சுவர்களைக் கொண்ட ஓர் அருங்காட்சியகம்; அங்கு ஊதா நிறத் தலைப்புச் செய்திகள் சுவர் அலங்காரங்களாகச் செயல்படுகின்றன, மேலும் அவற்றுக்குக் கீழே செயற்கை நுண்ணறிவால் உருவாக்கப்பட்ட உருவப்படங்கள் ஒரு அடர்த்தியான கட்டத்தில் தொங்குகின்றன.
- VEED — நியான் பச்சை ஒளி பொத்தான்கள் கொண்ட வெள்ளை கேலரி சுவர்
- Craft Docs — ஸ்கிராப்புக்கிங்கிற்கான ஒரு டிஜிட்டல் படத்தொகுப்பு. இந்த வடிவமைப்பு, நேர்த்தியான டிஜிட்டல் குறிப்புகள் மென்மையான, இயற்கையான இழைகளுடன் இணையும் ஒரு சிந்தனைமிக்க, தொட்டுணரக்கூடிய ஸ்கிராப்புக்கை ஒத்திருக்கிறது.
- Letter — சேமிப்பிடத்திலிருந்து எடுக்கப்பட்ட பளபளக்கும் கலைப்பொருட்களைக் காட்சிப்படுத்தும் ஒரு தனியார் கலைக்கூடம். கருப்புச் சுவர்களைக் கொண்ட ஒரு கண்காட்சி அரங்கம்; அதன் வண்ணமூட்டப்பட்ட சுவர்களில் உள்ள குரோம் சிற்பங்களுக்கு மேலே, செரிஃப் எழுத்துருவில் அமைந்த தலைப்புச் செய்திகள் மிதக்கின்றன.
- Railway — அண்ட நள்ளிரவு விரைவுச்சாலை. தெளிவான சமிக்ஞைகளால் வழிநடத்தப்படும், இருண்ட, விண்மீன்கள் நிறைந்த விண்வெளி வழியான ஒரு அமைதியான, சிலிர்ப்பூட்டும் பயணம்.
- Garden Eight — வெளிர் பழுப்பு நிறக் காகிதத்தில் ஒரு பிரம்மாண்டமான தலையங்கம். 215px செரிஃப் எழுத்துருவில் உள்ள அந்தத் தலைப்பு, இதமான அந்தத் தோல் சுருளில் தனித்து நிற்கிறது; அதைச் சுற்றி மிதக்கும் சிற்ப வடிவங்களும், கடல் காற்றை நினைவூட்டும் வெற்றிடங்களும் சூழ்ந்துள்ளன — இந்தப் பக்கம் ஒரு டாஷ்போர்டை விட, ஒரு கலை ஆய்வு நூலின் அட்டைப்படத்தைப் போலவே காட்சியளிக்கிறது.
- Steep — வெதுவெதுப்பான காகிதத்தில் செரிஃப் எழுத்துருக்களின் பகுப்பாய்வு
- ElevenLabs — மென்மையான தலைப்புகளுடன், இதமான கிரீம் வண்ணங்களில் அமைந்த ஒரு புகைப்படக் கட்டுரை. ஒரு பௌஹாஸ் பாணி நோட்டுப்புத்தகம்—முட்டை ஓட்டு நிறக் காகிதம், கருப்பு மை, மற்றும் பொருளைக் காட்சிப்படுத்த ஒற்றை ஊதா மற்றும் ஆரஞ்சு வண்ண அலங்காரம்.
- Awesomic — காகிதத் துண்டுகளை நினைவூட்டும் ஆரஞ்சு நிற நிறுத்தற்குறிகளுடன் கூடிய தலையங்க துத்தநாக வலை.
- Monad — வெதுவெதுப்பான தோல் காகிதம் குறித்த தலையங்க தொழில்நுட்ப இதழ்
- AI for Business — வெதுவெதுப்பான சாம்பல் நிறத் தொனிகளில் அமைந்த ப்ரூட்டலிஸ்ட் தலையங்கக் காட்சியகம்