Ui
മാറ്റ് പേപ്പറിൽ ക്ലിനിക്കൽ പ്ലാൻ
shadcn/ui എന്നത് ഒരു മോണോക്രോം ഡിസൈൻ സിസ്റ്റം സൃഷ്ടിക്കുന്നതിനുള്ള ഒരു വർക്ക്ഷോപ്പാണ്: വൃത്തിയുള്ള വെളുത്ത ക്യാൻവാസ്, മൃദുവായ ചൂടുള്ള ചാരനിറത്തിലുള്ള പ്രതലങ്ങൾ, ഏറ്റവും സൂക്ഷ്മമായ ബോർഡറുകളിൽ സ്ഥാപിച്ചിരിക്കുന്ന വലിയ-റേഡിയസ് കാർഡുകൾ. ഇന്റർഫേസ് ഏതാണ്ട് പൂർണ്ണമായും അക്രോമാറ്റിക് ആണ് - കറുത്ത വാചകം, വെളുത്ത പ്രതലങ്ങൾ, ചാരനിറത്തിലുള്ള ദ്വിതീയ ടോണുകൾ - പിശക് അവസ്ഥകൾക്കായി നീക്കിവച്ചിരിക്കുന്ന ഒറ്റ, തടസ്സപ്പെടുത്തുന്ന ചുവപ്പ് നിറം, മറ്റൊന്നിനും. ടൈപ്പോഗ്രാഫി സ്ക്രീനുകളിൽ ഇടുങ്ങിയ അക്ഷര-ഉയരമുള്ള ഗീസ്റ്റിന്റെ ജ്യാമിതീയ നിഷ്പക്ഷതയെ ആശ്രയിച്ചിരിക്കുന്നു, ഇത് ഒരു ഉപഭോക്തൃ ഉൽപ്പന്നത്തേക്കാൾ ഡെവലപ്പർ ഇൻഫ്രാസ്ട്രക്ചർ പോലെ തോന്നിക്കുന്ന ശാന്തവും കോഡ് പോലുള്ളതുമായ ഒരു അനുഭവം സൃഷ്ടിക്കുന്നു.
ഏറ്റവും കുറഞ്ഞ ഇമേജുകൾ—സിസ്റ്റത്തിൽ ഏതാണ്ട് പൂർണ്ണമായും ഉപയോക്തൃ ഇന്റർഫേസ് അടങ്ങിയിരിക്കുന്നു. പ്രധാന ഫോട്ടോകളോ ചിത്രീകരണങ്ങളോ അലങ്കാര ഗ്രാഫിക്സോ ഇല്ല. ഉൽപ്പന്ന ഡെമോകൾ ഒരു ഗ്രിഡിലെ ഘടക മോക്കപ്പുകളായി (കാർഡുകൾ, ഇൻപുട്ട് ഫീൽഡുകൾ, ബട്ടണുകൾ) അവതരിപ്പിക്കുന്നു, ഇത് ഡോക്യുമെന്റേഷനായും ദൃശ്യ ഉള്ളടക്കമായും പ്രവർത്തിക്കുന്നു. ഐക്കണുകൾ #0a0a0a അല്ലെങ്കിൽ #737373-ൽ 1.5–2px കട്ടിയുള്ള നേർത്ത ജ്യാമിതീയ വരകളാണ് (ലൂസിഡിൽ നിന്ന് കടമെടുത്തതാകാം), ഫങ്ഷണൽ സൂചനകളായി വളരെ കുറച്ച് മാത്രമേ ഉപയോഗിക്കുന്നുള്ളൂ. ദൃശ്യ ഭാഷ UI ഘടകങ്ങൾ തന്നെയാണ്—പേജ് ഒരു ലിവിംഗ് സ്റ്റൈൽ ഗൈഡായി പ്രവർത്തിക്കുന്നു, ഇവിടെ ഓരോ ദൃശ്യ ഘടകങ്ങളും ദൃശ്യമായ ഒരു ഡിസൈൻ ഘടകമാണ്.
പാലറ്റ്
നിഷ്പക്ഷം
- Canvas
#f5f5f5— പേജ് പശ്ചാത്തലം, മ്യൂട്ടുചെയ്ത പ്രതല ഫിൽ, അധിക ബട്ടണുകൾ. - Paper
#ffffff— കാർഡ് പ്രതലങ്ങൾ, പോപ്പ്-അപ്പ് പശ്ചാത്തലങ്ങൾ, പ്രാഥമിക ബട്ടൺ ഫില്ലുകൾ - Surface Alt
#fafafa— സൈഡ്ബാർ പശ്ചാത്തലം, വ്യക്തമല്ലാത്ത കാർഡ് ഓപ്ഷൻ, ഇൻപുട്ട് ഫീൽഡിന്റെ നിഷ്ക്രിയ അവസ്ഥ. - Ink
#0a0a0a— പ്രധാന വാചകം, തലക്കെട്ടുകൾ, ബട്ടൺ ലേബലുകൾ, ഐക്കൺ രൂപരേഖകൾ. - Ink Soft
#171717— ഫിൽ ഉള്ള ബട്ടൺ പശ്ചാത്തല ചിത്രങ്ങൾ, ലൈറ്റ് പ്രതലങ്ങളിൽ അധിക ടെക്സ്റ്റ്. - Mid Gray
#737373— പ്രധാന വാചകം, പ്ലെയ്സ്ഹോൾഡർ വാചകം, ഓക്സിലറി ലേബലുകൾ, വിശ്രമത്തിലുള്ള ഐക്കൺ ഫിൽ എന്നിവയെല്ലാം നിശബ്ദമാക്കിയിരിക്കുന്നു.
ടൈപ്പോഗ്രാഫി
12 മുതൽ 48px വരെ · 8 ചുവടുകൾ
- Geist — മാറ്റിസ്ഥാപിക്കൽ: Inter · രൂപരേഖകൾ 400, 500, 600 · എല്ലാ ഇന്റർഫേസ് ടെക്സ്റ്റുകളും - 14px/400 എന്ന വരിയുടെ ഭാരമുള്ള ബോഡി ടെക്സ്റ്റ്, 24–48px/600 എന്ന വരിയുടെ ഭാരമുള്ള തലക്കെട്ടുകൾ, 13–14px/500 എന്ന വരിയുടെ ഭാരമുള്ള ബട്ടണുകൾ. ഗീസ്റ്റിന്റെ ജ്യാമിതീയ അക്ഷരരൂപങ്ങളും ഏകീകൃത രേഖയുടെ ഭാരവും ഡെവലപ്പർ ഉപകരണങ്ങൾക്ക് ഒരു നിഷ്പക്ഷ അനുഭവം സൃഷ്ടിക്കുന്നു; 48px അക്ഷര അകലവും -0.05em അക്ഷര അകലവും ഉള്ള 600 വരി അകലവും വ്യക്തവും ആത്മവിശ്വാസമുള്ളതുമായ തലക്കെട്ടുകൾ ഉറപ്പാക്കുന്നു, എഡിറ്റ് ചെയ്യുന്നതിനുപകരം ചിന്തനീയമായി കാണപ്പെടുന്നു.
ഇടവേളകളും രൂപവും
| ഉദ്ദേശ്യം | അർത്ഥം |
|---|---|
| സാന്ദ്രത | ഇടതൂർന്ന |
| അടിസ്ഥാന ഘട്ടം | 8px |
| ബട്ടൺ ആരം | 18px |
| കാർഡ് ആരം | 24px |
| ഷാഡോകൾ | ഷാഡോകൾക്ക് പകരം ബോർഡറുകൾ ഇല്ല |
| വിഭാഗങ്ങൾക്കിടയിൽ | 48-80px |
| പേജ് വീതി | 1280px |
AI നിങ്ങളുടെ വെബ്സൈറ്റ് Ui ശൈലിയിൽ നിർമ്മിച്ച് അത് പൂരിപ്പിക്കും.
- Instagram, TikTok, Facebook ലിങ്കുകൾ വഴി ഉൽപ്പന്നങ്ങളും പോസ്റ്റുകളും പൂരിപ്പിക്കുക.
- നിങ്ങളുടെ പഴയ സൈറ്റിൽ നിന്ന് ഉള്ളടക്കം കൈമാറുക—വിലാസം മാത്രം വ്യക്തമാക്കുക.
- മികച്ച എഞ്ചിനിൽ ആധുനിക ഡിസൈൻ: സെർവർ റെൻഡറിംഗും SEO ഒപ്റ്റിമൈസേഷനും ഉള്ള React ( Next.js).
- തിരയൽ ഫലങ്ങൾക്കും ന്യൂറൽ നെറ്റ്വർക്ക് ശുപാർശകൾക്കുമായി പൂർണ്ണമായും ഓട്ടോമേറ്റഡ് SEO ഒപ്റ്റിമൈസേഷൻ.
സമാനമായ ശൈലികൾ
- Ventriloc — ചൂടുള്ള കടലാസിൽ ഡാറ്റയുടെ ഒരു എഡിറ്റോറിയൽ നിരീക്ഷണാലയം - മോണോക്രോം കൃത്യത എടുത്തുകാണിക്കുന്ന ഒരു ഓറഞ്ച് കനൽ.
- Geniestudio — ഒരു മൃദുവായ പകൽ വെളിച്ച നോട്ട്ബുക്ക് - വീതിയേറിയ അരികുകളും ഒരു കട്ടിയുള്ള പേന സ്ട്രോക്കും ഉള്ള തരം
- xAI — കറുത്ത ഗുളികയോടുകൂടിയ വാം ക്രീം ലാബ്
- Cal — മോണോക്രോം പ്രായോഗികത, ഒരു മാനുഷിക സമീപനം. കർശനമായ കറുപ്പും വെളുപ്പും പാലറ്റിലൂടെ വ്യക്തതയ്ക്കും പ്രവർത്തനക്ഷമതയ്ക്കും മുൻഗണന നൽകുന്ന ഒരു സിസ്റ്റം, എന്നാൽ സൗഹൃദപരമായ ടൈപ്പോഗ്രാഫിയും വൃത്താകൃതിയിലുള്ള ആകൃതികളും ഉപയോഗിച്ച് അതിനെ മൃദുവാക്കുന്നു.
- Scale — ഉയർന്ന നിലവാരമുള്ള മ്യൂസിയം-നിലവാരമുള്ള ഫോട്ടോ ലാബ്, ഒരു സാങ്കേതിക പ്രോജക്റ്റിനൊപ്പം.
- Contractbook — അൾട്രാമറൈൻ ആകാശത്തിനു കീഴെ ക്രീം പേപ്പറിന്റെ കരാറുകൾ
- AutoSend — ഒറ്റ പർപ്പിൾ വെളിച്ചമുള്ള ഒരു സുഖകരമായ സ്റ്റോൺ സ്റ്റുഡിയോ - സെരിഫ് തലക്കെട്ടുകളും തിളക്കമുള്ള ഇൻഡിഗോ കോളുകളും ഒരു നിശബ്ദമായ, മിക്കവാറും വെളുത്ത സ്ഥലത്ത് ഒരുമിച്ച് നിൽക്കുന്നു.
- Air — "ഗ്ലാസിലൂടെയുള്ള അർദ്ധരാത്രി ആകാശം" എന്ന ശില്പം
- SpatialChat — വെളുത്ത കടലാസിൽ പർപ്പിൾ പൾസ്
- Squarespace — സിനിമാറ്റിക് മോണോക്രോം ഗാലറി
- Giga — മഞ്ഞുമൂടിയ ഒബ്സിഡിയന് മുകളിലുള്ള അർദ്ധരാത്രി ചക്രവാളം
- Supabase — അർദ്ധരാത്രിയിൽ ഒരു കോഡ് എഡിറ്റർ, അതിൽ ഒരു ഫോസ്ഫോറസെന്റ് പച്ച ഡോട്ട് ഉണ്ട് - കൽക്കരി പൊടിയുടെ കടലിൽ ഒരൊറ്റ ക്രോമാറ്റിക് സ്പന്ദനം.