Vercel
வெள்ளைக் காகிதத்தில் அச்சிடப்பட்ட முனையம்
வெர்செல் வடிவமைப்பு முறையானது, ஒழுங்குபடுத்தப்பட்ட ஒற்றை வண்ணத்தின் ஒரு எடுத்துக்காட்டாகும்: கிட்டத்தட்ட வெள்ளை நிறத் தளம் (#fafafa), கருப்பு எழுத்துரு, மெல்லிய ஓரங்கள், மற்றும் அலங்கார வண்ணங்கள் முற்றிலும் இல்லாதிருத்தல். இதன் காட்சி மொழி, ஒரு டெவலப்பரின் டெர்மினலை அச்சு வடிவில் வழங்குவதை நினைவூட்டுகிறது—கெய்ஸ்ட் சான்ஸ் (Geist Sans) எழுத்துருவானது, 400-450 தடிமன் மற்றும் -0.06em எழுத்து இடைவெளியுடன் அதன் "பெரிய" அளவில் படிக்கவே கடினமாக உள்ளது, அதேசமயம் கெய்ஸ்ட் மோனோ (Geist Mono) எழுத்துருவானது, லேபிள்கள், மெட்டாடேட்டா மற்றும் குறியீடு மாதிரிகளை 11-13px பெரிய எழுத்துக்களில் பயன்படுத்துகிறது. பொத்தான்கள், வெள்ளையின் மீது தூய கருப்பு அல்லது கருப்பின் மீது வெள்ளை நிறத்தில், கூர்மையான 6px ஆரங்களைக் கொண்ட செவ்வகங்களாக உள்ளன. இந்த முறையானது, வண்ணத்தை விட மாறுபாடு மற்றும் அச்சுக்கலை படிநிலையைச் சார்ந்துள்ளது; முக்கோணச் சின்னம் (▲) மற்றும் இரண்டு வரி வார்த்தைக்குறி ஆகியவற்றை மட்டுமே பிராண்டிங் கூறுகளாகப் பயன்படுத்துகிறது. #fafafa → #ebebeb → #171717 என்ற வரிசையில் பரப்புகள் ஒன்றன் மேல் ஒன்றாக அடுக்கப்பட்டுள்ளன. இது, நிழல் அல்லது வண்ணத்திற்குப் பதிலாக, மாறும் வண்ண மதிப்புகள் மூலம் ஆழத்தை உருவாக்குகிறது. ஒவ்வொரு உறுப்பும் ஒரு கச்சிதமான அடர்த்தியுடன் கூடிய 4px கட்டத்தில் கட்டமைக்கப்பட்டுள்ளது. இதன் விளைவாக, ஒரு பொறியாளரின் குறிப்பேட்டை நினைவூட்டும் இடைமுகம் உருவாகிறது—அது துல்லியமானது, செயல்பாட்டுக்கு உகந்தது, மற்றும் வெற்று இடைவெளிகளுக்கு அஞ்சாதது.
கண்டெய்னர் 1280px அகலமும், மையப்படுத்தப்பட்ட அமைப்பும் கொண்டது, மேலும் தாராளமான கிடைமட்ட இடைவெளியுடன் (24-48px) உள்ளது. பிரதான பிளாக் ஒரு சமச்சீரற்ற மூன்று-மண்டல அமைப்பைப் பயன்படுத்துகிறது: இடதுபுறத்தில் ஒரு பெரிய தலைப்பு, மையத்தில் ஒரு பிராண்ட் குறியீடு, மற்றும் வலதுபுறத்தில் ஒரு "புருவ" பிளாக். பிரதான பிளாக்கிற்குக் கீழே, உள்ளடக்கம் மாறி மாறி வரும் பட்டைகளாக அமைக்கப்பட்டுள்ளது: வாடிக்கையாளரின் லோகோவுடன் கூடிய முழு அகலப் பட்டை, அதைத் தொடர்ந்து இடதுபுறத்தில் தலைப்பு மற்றும் வலதுபுறத்தில் தயாரிப்பு தளவமைப்புடன் கூடிய இரண்டு-பத்தி "ஏஜென்ட் கிரியேட்டர்ஸ்" பகுதி, அதைத் தொடர்ந்து சிறப்பம்சங்களுடன் கூடிய மூன்று கார்டுகளின் கட்டம். பிரிவுகள், பிரிப்பான்கள் அல்லது பின்னணி ஆஃப்செட்கள் இல்லாமல் 96-128px செங்குத்து இடைவெளிகளால் பிரிக்கப்பட்டுள்ளன. நேவிகேஷன் என்பது மங்கலான பின்னணியுடன் கூடிய, 64px அளவுள்ள ஒரு நிலையான பேனல் ஆகும். கார்டு கட்டங்கள் தொடர்ந்து 16-24px இடைவெளிகளுடன் இரண்டு அல்லது மூன்று-பத்தி தளவமைப்பைப் பயன்படுத்துகின்றன. ஒட்டுமொத்த அடர்த்தி கச்சிதமாக உள்ளது—உரையைப் படிப்பது எளிது, போதுமான வெள்ளை இடைவெளி உள்ளது, ஆனால் எழுத்துரு அளவு மற்றும் கூறுகளின் அளவுகள் பக்கம் காற்றோட்டமாக இருப்பதைத் தடுக்கின்றன.
படங்கள் குறைவாகவும், எப்போதும் செயல்பாட்டுக்கு உகந்தவையாகவும் உள்ளன. முக்கிய காட்சி அம்சம் கருப்பு முக்கோணம் (▲) ஆகும்—இது ஒரு வடிவியல் பிராண்ட் சின்னம், இது பெரிய எழுத்து அளவில் மிதக்கும் நிழல் உருவமாகத் தோன்றுகிறது. கருத்தாக்கச் சான்றுப் பட்டையில் உள்ள வாடிக்கையாளர் சின்னங்கள், ஒவ்வொரு பிராண்டின் உண்மையான வார்த்தைச் சின்னங்களையும் சாம்பல் நிறத்தில் பயன்படுத்துகின்றன. தயாரிப்பு மாதிரிகள் (நோஷனின் அரட்டை இடைமுகம், CLI முனைய வெளியீடு, பாஸ்போர்ட் அட்டை) சட்டமிடப்பட்ட அட்டைகளுக்குள் ஒளி-முறை ஸ்கிரீன்ஷாட்களாகப் பதிக்கப்பட்டுள்ளன. புகைப்படங்கள், விளக்கப்படங்கள் அல்லது 3D கூறுகள் எதுவும் இல்லை—இந்த அமைப்பு முழுக்க முழுக்க வெள்ளைக் காகிதத்தில் உள்ள அச்சுக்கலை மற்றும் வடிவியல் வடிவங்களைக் கொண்டது.
வண்ணத் தட்டு
நடுநிலை
- Obsidian
#171717— முதன்மைத் தலைப்புகள், வழிசெலுத்தல் ஓரங்கள், பொத்தான்களின் அடர்நிற நிரப்பு மற்றும் பட்டியல் குறிப்பான்கள் அனைத்தும், கடுமையையும் கண்ணைப் பறிக்கும் வண்ணச்செறிவையும் தவிர்த்து, கிட்டத்தட்ட கருப்பு நிறத்தில் உள்ளன. - Paper White
#fafafa— பக்கத்தின் திரை, அட்டையின் மேற்பரப்புகள், பொத்தான்களின் ஒளி நிரப்பல்கள்—இவைதான் மற்ற அனைத்தும் அமைந்திருக்கும் நிலையான பின்னணியாகும். - Pure White
#ffffff— உயர்த்தப்பட்ட அட்டைப் பரப்புகள், செருகல்கள், உள்ளீட்டுப் புலங்கள். - Hairline
#ebebeb— பொத்தான்கள், இணைப்புகள் மற்றும் கார்டுகளில் உள்ள 1px ஓரங்கள், அதிக ஜூம் அளவுகளில் தெரியும், ஆனால் குறைந்த ஜூம் அளவுகளில் தெரியாது. - Ash
#c9c9c9— செயலிழக்கப்பட்ட உரை, மங்கலான லேபிள்கள், வாடிக்கையாளர் லோகோக்களில் பிராண்ட் பெயர் நீர்க்குறிகள். - Smoke
#a8a8a8— துணை உரை, இடம்பிடிக்கும் உரை, நுட்பமான சின்ன நிரப்புதல்.
அச்சுக்கலை
11 முதல் 64px வரை · 6 படிகள்
- Geist Sans — மாற்று: Inter · வெளிப்புறங்கள் 400, 450, 500 · இடைமுகம் மற்றும் தலைப்புகளுக்கான முதன்மை எழுத்துரு, வெர்செல் நிறுவனத்தால் பிரத்யேகமாக வடிவமைக்கப்பட்ட வடிவியல் சான்ஸ்-செரிஃப் ஆகும். இது பெரிய அளவுகளில் (56-64px அளவில் -0.06em, 30px அளவில் -0.05em) நெருக்கமான எழுத்து இடைவெளியைக் கொண்டுள்ளது. பக்கத்தின் மேற்பகுதியில் உள்ள தலைப்புகளுக்கு, 450 எடை கொண்ட எழுத்துரு தேர்ந்தெடுக்கப்பட்டது: இது 'லைட்' எழுத்துருவை விட தடிமனாகவும், 'செமி-போல்ட்' எழுத்துருவை விட மெல்லியதாகவும் இருந்து, நம்பிக்கையான, ஆனால் மிதமிஞ்சிய ஆதிக்கம் இல்லாத ஒரு தொனியை உருவாக்குகிறது.
- Geist Mono — மாற்று: JetBrains Mono · வெளிப்புறங்கள் 400, 500, 600 · தலைப்புகள், குறியீட்டுத் தொகுதிகள், CLI வெளியீட்டுப் பலகங்கள், மெட்டாடேட்டா மற்றும் பெரிய எழுத்து உரை ஆகியவற்றுக்கான ஒரு மோனோஸ்பேஸ்டு இரண்டாம் நிலை எழுத்துரு. 8px/600px/பெரிய எழுத்துகள் என்ற இதன் கலவையானது, மிகச்சிறிய வார்த்தைக் குறிகளைத் துல்லியமாக வைக்க அனுமதிக்கிறது. மோனோஸ்பேஸ்டு பதிப்பில் உள்ள அகலமான எழுத்து இடைவெளி (0.071em), பெரிய எழுத்து உரைக்குப் போதுமான இடத்தை வழங்குகிறது.
இடைவெளிகள் மற்றும் வடிவம்
| நோக்கம் | பொருள் |
|---|---|
| அடர்த்தி | அடர்த்தியான |
| அடிப்படை படி | 12px |
| பொத்தான் ஆரம் | 6px |
| அட்டை ஆரம் | 6px |
| நிழல்கள் | நிழல்களுக்குப் பதிலாக எல்லைகள் இல்லை |
| பிரிவுகளுக்கு இடையில் | 96-128px |
| பக்க அகலம் | 1280px |
செயற்கை நுண்ணறிவு உங்கள் வலைத்தளத்தை Vercel பாணியில் உருவாக்கி, அதை நிரப்பும்.
- Instagram, TikTok, Facebook இணைப்புகளின் வழியாக தயாரிப்புகளையும் பதிவுகளையும் நிரப்பவும்.
- உங்கள் பழைய தளத்திலிருந்து உள்ளடக்கத்தை மாற்றவும்—முகவரியைக் குறிப்பிட்டால் போதும்.
- சிறந்த இன்ஜினான React ( Next.js)-இல், சர்வர் ரெண்டரிங் மற்றும் உள்ளமைக்கப்பட்ட SEO மேம்படுத்தலுடன் கூடிய நவீன வடிவமைப்பு.
- தேடல் முடிவுகளுக்கான முழுமையாகத் தானியங்குபடுத்தப்பட்ட SEO உகப்பாக்கம் மற்றும் நியூரல் நெட்வொர்க் பரிந்துரைகள்.
ஒத்த பாணிகள்
- Headspace — வெதுவெதுப்பான காகிதத்தில் ஒரு பிரகாசமான நல்வாழ்வு மூலை
- WHOOP — நள்ளிரவில் செயல்திறன் ஆய்வகம் - கருமையான நாடக வெற்றிடத்தின் கீழ் வெள்ளை மருத்துவ ஆய்வக மேசைகள், மின்சாரத்தின் ஒற்றை ஊதாத் துடிப்பு
- Together AI — பனிப்பாறைத் தாளில் ஆராய்ச்சி கன்சோல்
- v0 by Vercel — கடைசல் வரைபடம். துல்லியமும் செயல்பாட்டுத் திறனும் முதன்மையானவை; ஒவ்வொரு உறுப்பும் தூய்மையான, தொழில்நுட்ப ரீதியாகக் குறைபாடற்ற மேற்பரப்பில் ஒரு தெளிவான நோக்கத்தைப் பூர்த்தி செய்கிறது.
- Dovetail — கருநிலவின் கீழ் ஒரு வரைபடம்—கிட்டத்தட்டத் தெரியாத வரைபடக் கோடுகள், வெள்ளை எழுத்துரு, ஒரு ஊதா நிறப் பொறி.
- Glideapps — ஒரு மின்சார டர்க்கைஸ் மினுமினுப்புடன் கூடிய ஒற்றை வண்ண வரைவு மேசை
- Timescale — வெதுவெதுப்பான வரைபடத் தாளில் பொறியியல் வரைபடம்
- UGLYCASH — வெளிர் மஞ்சள் நிறக் காகிதத்தில் ஸ்டிக்கர்கள் ஒட்டப்பட்ட ஒரு நோட்புக், தனது குழப்பத்தை பெருமையுடன் வெளிக்காட்டும் ஒரு துணிச்சலான, அதீத நிதி தொழில்நுட்ப நிறுவனத்தின் சூழலை வெளிப்படுத்துகிறது.
- Sprout Social — கரும்பலகையின் மீது ஒரு பச்சைத் தளிர். கண்டிப்பான ஒற்றை வண்ணப் பின்னணியில், செயலுக்காக மட்டுமே நிறம் பயன்படுத்தப்பட்டு, நம்பிக்கையூட்டும் வடிவியல் எழுத்துரு வழிகாட்டியாகச் செயல்பட, இது ஒரு பிரகாசமான சிறப்பம்சமாக விளங்குகிறது.
- Krea — நள்ளிரவில் கேலரி நொயர்
- Evergreen — லினன் காகிதத்தில் சூரிய ஆற்றல் பசுமைக்குடில்
- Factory — நள்ளிரவில் "போர் அறை" முனையம். "தொழிற்சாலை" என்பது ஒரு பளிச்சிடும் கருப்புக் கட்டுப்பாட்டுப் பலகம்; அதில் கைவிளக்கு ஒளியில் வரும் செய்தி போல ஒற்றை வெள்ளை அட்டை ஒன்று வந்து விழுகிறது—அந்த அறையில் உள்ள ஒரே பொருள் அந்தப் படைப்பு மட்டுமே.