Stripe
ഫ്രോസ്റ്റഡ് ഗ്ലാസിൽ ഇൻഡിഗോ മഷിയിൽ എഴുതിയ ഒരു അക്കൗണ്ട് പുസ്തകം
സാമ്പത്തിക ഉപകരണങ്ങൾക്കായി Stripe ഏതാണ്ട് മോണോക്രോം ഭാഷയാണ് ഉപയോഗിക്കുന്നത്: കടും നീല തലക്കെട്ടുകളുള്ള മൃദുവായ, തണുത്ത വെളുത്ത ക്യാൻവാസ്, അലങ്കാര ക്രോം ഘടകങ്ങളൊന്നുമില്ല, ഒരു ബട്ടൺ, ലിങ്ക് അല്ലെങ്കിൽ ഐക്കൺ ഔട്ട്ലൈൻ ആയി നിയമാനുസൃതമായി ഉപയോഗിക്കാൻ കഴിയുന്ന ഒരു തിളക്കമുള്ള ഇൻഡിഗോ (#533afd). ടൈപ്പോഗ്രാഫി അസാധാരണമാംവിധം നേർത്തതാണ്, 300-പോയിന്റ് ഭാരം - 56px-ൽ പോലും - ഇത് പരസ്യമായി കോർപ്പറേറ്റ് എന്നതിലുപരി ആത്മവിശ്വാസത്തോടെ കുറച്ചുകാണുന്നു; വലുപ്പം കൂടുന്നതിനനുസരിച്ച് അക്ഷരങ്ങളുടെ അകലം കുത്തനെ കുറയുന്നു. ബട്ടണുകൾ ചെറുതും ചതുരാകൃതിയിലുള്ളതുമാണ് (4px), കൂടാതെ പർപ്പിൾ ഫില്ലുകൾ അല്ലെങ്കിൽ ഏറ്റവും നേർത്ത പർപ്പിൾ ഔട്ട്ലൈനുകൾ ഉപയോഗിക്കുന്നു. സിസ്റ്റം നിഴലുകൾ പൂർണ്ണമായും ഒഴിവാക്കുന്നു; എലവേഷനിലൂടെയല്ല, പശ്ചാത്തല നിറങ്ങൾ മാറ്റുന്നതിലൂടെയാണ് ആഴം കൈവരിക്കുന്നത് (വെള്ള → #f8fafd → #e5edf5 → പർപ്പിൾ നിറങ്ങൾ). മുഴുവൻ ഇന്റർഫേസും ഒരു അക്കൗണ്ടിംഗ് ലെഡ്ജർ അല്ലെങ്കിൽ ഒരു ടെർമിനൽ പോലെയാണ് പ്രവർത്തിക്കുന്നത്: ഇടതൂർന്ന വിവരങ്ങൾ, വ്യക്തമായ വരകൾ, വിഭാഗങ്ങൾക്കിടയിൽ മതിയായ ഇടം, ഒരു പ്രവർത്തനം ആവശ്യമുള്ളപ്പോൾ മാത്രമേ നിറം ദൃശ്യമാകൂ.
വെളുത്ത കാൻവാസിൽ കേന്ദ്രീകൃതമായ ഒരു ഉള്ളടക്ക കോളത്തിന് പരമാവധി വീതി ~1320px ആണ്. ഹീറോ എന്നത് പൂർണ്ണ വലുപ്പത്തിൽ (56px) ഇടതുവശത്തേക്ക് അലൈൻ ചെയ്ത ഒരു ടെക്സ്റ്റ് ബ്ലോക്കാണ്, താഴെ രണ്ട് കോൾ ടു ആക്ഷൻ ഉണ്ട്, ഹീറോ ഇമേജ് ഇല്ല—ടൈപ്പോഗ്രാഫിയാണ് ഹീറോ. വിഭാഗങ്ങൾ തുല്യമായ 96px ഗട്ടറുകളും 1px #e5edf5 ഡിവൈഡറുകളും ഉപയോഗിച്ച് ലംബമായി ക്രമീകരിച്ചിരിക്കുന്നു; ഒന്നിടവിട്ട ഇരുണ്ട/വെളിച്ചം വരകളൊന്നുമില്ല. ഓരോ വിഭാഗവും ആവർത്തിക്കുന്ന ഒരു പാറ്റേൺ പിന്തുടരുന്നു: എല്ലാ വലിയക്ഷരങ്ങളിലും ഒരു ചെറിയ വിഭാഗ ശീർഷകം (സ്മോക്കി കളർ, 12px), തുടർന്ന് 32-48px തലക്കെട്ട്, തുടർന്ന് ഒരു 22px ഖണ്ഡിക, തുടർന്ന് ഉൽപ്പന്ന കാർഡുകളുടെ ഒരു ഗ്രിഡ് (ഡെസ്ക്ടോപ്പിൽ 3 നിരകൾ) അല്ലെങ്കിൽ വിഷ്വൽ ആർട്ടുള്ള 2-കോളം ടെക്സ്റ്റ് ബ്ലോക്ക്. ക്ലയന്റ് ലോഗോകൾ ഇടത്തേക്ക് അലൈൻ ചെയ്ത ഒരു ഇടുങ്ങിയ ലംബ സ്ട്രിപ്പിൽ ദൃശ്യമാകുന്നു. ലിങ്കുകളുടെ മൾട്ടി-കോളം ലിസ്റ്റുകളുള്ള ഒരു വീതിയുള്ള #f8fafd സ്ട്രിപ്പാണ് അടിക്കുറിപ്പ്. നീളമുള്ള സ്ക്രോൾ ദൈർഘ്യം ഉണ്ടായിരുന്നിട്ടും മൊത്തത്തിലുള്ള താളം മന്ദഗതിയിലുള്ളതും അളന്നതും പ്രധാനമായും വാചകപരവുമാണ്—വിവര സാന്ദ്രത കുറവാണ്.
ഇമേജറികൾ നിയന്ത്രിതവും ഡോക്യുമെന്ററി ശൈലിയിലുള്ളതുമാണ്. മുകളിൽ നിന്നോ നാടകീയ കോണുകളിലോ, സ്വാഭാവിക നിറങ്ങൾ ഉപയോഗിച്ച് - ഡ്യുവോടോണോ കളർ പ്രോസസ്സിംഗ് ഇല്ലാതെ - എടുത്ത കേസ് സ്റ്റഡികൾ (ഉദാ. ഹെർട്സിനുള്ള ഏരിയൽ ട്രാഫിക് ഫോട്ടോഗ്രാഫി) ഉൾപ്പെടുന്ന വിഭാഗങ്ങളിൽ മാത്രമേ മുഴുവൻ പേജ് ഫോട്ടോകൾ ദൃശ്യമാകൂ. ഉൽപ്പന്നത്തിന്റെ ഉപയോക്തൃ ഇന്റർഫേസിന്റെ സ്ക്രീൻഷോട്ടുകൾ ഫീച്ചർ കാർഡുകൾക്കുള്ളിൽ ഉപയോഗിക്കുന്നു, മൂർച്ചയുള്ള കോണുകളും വ്യക്തമായ ബോർഡറുകളും ഉപയോഗിച്ച്, ഉപകരണ ഫ്രെയിമുകൾ ഇല്ലാതെ റെൻഡർ ചെയ്തിരിക്കുന്നു. പങ്കാളി ലോഗോകൾ അവയുടെ സ്വന്തം നിറങ്ങളിൽ, കണ്ടെയ്നറുകൾ ഇല്ലാതെ പ്രദർശിപ്പിക്കും. ചിത്രീകരണങ്ങളോ 3D റെൻഡറുകളോ അലങ്കാര അമൂർത്ത ഗ്രാഫിക് ഘടകങ്ങളോ ഇല്ല. ഐക്കണുകൾ ഏകീകൃതമാണ്: ലൈൻ വെയ്റ്റ് 1, ലൈൻ വെയ്റ്റ് 2 വെളുത്ത പശ്ചാത്തലത്തിൽ, ജ്യാമിതീയ ലൈൻ ആർട്ട് (ഷെവ്റോണുകൾ, അമ്പുകൾ, ചെക്ക്മാർക്കുകൾ, ഡോക്യുമെന്റ് ചിഹ്നങ്ങൾ) ഉപയോഗിച്ച്. പേജിൽ പ്രധാനമായും വാചകവും വെളുത്ത ഇടവും അടങ്ങിയിരിക്കുന്നു; ചിത്രങ്ങൾ മൊത്തം ദൃശ്യ മേഖലയുടെ 3% ൽ താഴെയാണ്.
പാലറ്റ്
ബ്രാൻഡ്
- Indigo Ink
#533afd— ഫിൽ ചെയ്ത ബട്ടണുകൾ, തിരഞ്ഞെടുത്ത നാവിഗേഷൻ അവസ്ഥകൾ, ഫോക്കസ്-ഡ്രൈവൺ കൺവേർഷൻ നിമിഷങ്ങൾ എന്നിവയ്ക്കായി പർപ്പിൾ ഉപയോഗിക്കുന്നു. - Indigo Hover
#7389ff— ലിങ്കുകൾ, ടാഗുകൾ, ചെറിയ വാക്യങ്ങൾ എന്നിവ ഹൈലൈറ്റ് ചെയ്യാൻ പർപ്പിൾ ഉപയോഗിക്കുന്നു. കോൾ ടു ആക്ഷന് പ്രാഥമിക നിറമായി ഇത് ഉപയോഗിക്കരുത്.
നിഷ്പക്ഷം
- Midnight Ink
#061b31— പ്രധാന തലക്കെട്ടും ബോഡി ടെക്സ്റ്റും തണുത്ത നീല നിറമുള്ള ആഴത്തിലുള്ള, മിക്കവാറും കറുത്ത നിറമാണ്, ഇത് മുഴുവൻ ഫോണ്ട് സിസ്റ്റത്തിന്റെയും അടിസ്ഥാനമായി വർത്തിക്കുന്നു. - Slate
#64748d— ചാരനിറത്തിലുള്ള വാചകം ലിങ്കുകൾ, ടാഗുകൾ, ചെറിയ ശൈലികൾ എന്നിവ ഹൈലൈറ്റ് ചെയ്യുന്നു. - Steel
#50617a— സബ്ലൈസൻസുകളിൽ ഉപയോഗിക്കുന്ന സ്ലേറ്റിനും മ്യൂട്ടുചെയ്ത പർപ്പിൾ ടോണുകൾക്കും ഇടയിലാണ് അധിക വാചകവും അനുബന്ധ സാമഗ്രികളും സ്ഥാപിച്ചിരിക്കുന്നത്. - Smoke
#839bc8— വലിയ അലങ്കാര തലക്കെട്ടുകൾക്കും അനുബന്ധ വാചകത്തിനും, ഒരു മ്യൂട്ടഡ് പർപ്പിൾ ഷേഡ് ഉപയോഗിക്കുന്നു - ബോഡി പാരഗ്രാഫുകളിൽ ഒരിക്കലും ഉപയോഗിക്കില്ല. - Pure White
#ffffff— പേജ് ക്യാൻവാസും കാർഡുകളുടെ ഉയർത്തിയ പ്രതലങ്ങളും; മറ്റെല്ലാം അളക്കുന്ന സ്ഥിരസ്ഥിതി പശ്ചാത്തലം. - Mist
#f8fafd— ദൃശ്യമായ ബോർഡറില്ലാത്ത പ്രദേശങ്ങളെ വേർതിരിക്കുന്ന സൂക്ഷ്മമായ തണുത്ത ഷേഡാണ് ഫൂട്ടർ പശ്ചാത്തലവും സെക്ഷൻ ഡിവൈഡറും.
ടൈപ്പോഗ്രാഫി
12 മുതൽ 56px വരെ · 9 ചുവടുകൾ
- sohne-var — മാറ്റിസ്ഥാപിക്കൽ: Inter Tight (variable · രൂപരേഖകൾ 300, 400 · മുഴുവൻ ഇന്റർഫേസിലും ഉപയോഗിച്ചിരിക്കുന്ന ഫോണ്ട് തലക്കെട്ടുകൾ, ബോഡി ടെക്സ്റ്റ്, നാവിഗേഷൻ, ബട്ടണുകൾ, ലേബലുകൾ എന്നിവയ്ക്കാണ്. 56px എന്ന സ്ക്രീൻ വലുപ്പത്തിൽ പോലും 300 വെയ്റ്റ് നിലനിൽക്കുന്നു, ഇത് ഒരു വ്യതിരിക്ത സവിശേഷതയാണ്: തലക്കെട്ടുകൾ ആർപ്പുവിളിക്കുന്നതിനുപകരം മന്ത്രിക്കുന്നു, വോളിയത്തിനുപകരം നിയന്ത്രണത്തിലൂടെ അധികാരം സ്ഥാപിക്കുന്നു. നാവിഗേഷനും ബട്ടൺ ടെക്സ്റ്റിനും 400 വെയ്റ്റ് 14–16px ൽ മാത്രമേ ദൃശ്യമാകൂ, ഇവിടെ ചെറിയ വലുപ്പങ്ങളിൽ വ്യക്തതയ്ക്കായി ഒരു അധിക സ്ട്രോക്ക് ആവശ്യമാണ്.
ഇടവേളകളും രൂപവും
| ഉദ്ദേശ്യം | അർത്ഥം |
|---|---|
| സാന്ദ്രത | വിശാലമായ |
| അടിസ്ഥാന ഘട്ടം | 8px |
| ബട്ടൺ ആരം | 4px |
| കാർഡ് ആരം | 4px |
| ഷാഡോകൾ | ഷാഡോകൾക്ക് പകരം ബോർഡറുകൾ ഇല്ല |
| വിഭാഗങ്ങൾക്കിടയിൽ | 96px |
| പേജ് വീതി | 1320px |
AI നിങ്ങളുടെ വെബ്സൈറ്റ് Stripe ശൈലിയിൽ നിർമ്മിച്ച് അത് പൂരിപ്പിക്കും.
- Instagram, TikTok, Facebook ലിങ്കുകൾ വഴി ഉൽപ്പന്നങ്ങളും പോസ്റ്റുകളും പൂരിപ്പിക്കുക.
- നിങ്ങളുടെ പഴയ സൈറ്റിൽ നിന്ന് ഉള്ളടക്കം കൈമാറുക—വിലാസം മാത്രം വ്യക്തമാക്കുക.
- മികച്ച എഞ്ചിനിൽ ആധുനിക ഡിസൈൻ: സെർവർ റെൻഡറിംഗും SEO ഒപ്റ്റിമൈസേഷനും ഉള്ള React ( Next.js).
- തിരയൽ ഫലങ്ങൾക്കും ന്യൂറൽ നെറ്റ്വർക്ക് ശുപാർശകൾക്കുമായി പൂർണ്ണമായും ഓട്ടോമേറ്റഡ് SEO ഒപ്റ്റിമൈസേഷൻ.
സമാനമായ ശൈലികൾ
- Ui — മാറ്റ് പേപ്പറിൽ ക്ലിനിക്കൽ പ്ലാൻ
- monopo saigon — എഡിറ്റോറിയൽ നിശബ്ദതയ്ക്ക് പിന്നിൽ ഒരു ദ്രാവകവും തിളക്കമുള്ളതുമായ തിളക്കം - ഉരുകിയ വെളിച്ചത്തിൽ പൊങ്ങിക്കിടക്കുന്ന ഒരു മോണോക്രോം എഡിറ്റോറിയൽ ഗാലറി.
- Ventriloc — ചൂടുള്ള കടലാസിൽ ഡാറ്റയുടെ ഒരു എഡിറ്റോറിയൽ നിരീക്ഷണാലയം - മോണോക്രോം കൃത്യത എടുത്തുകാണിക്കുന്ന ഒരു ഓറഞ്ച് കനൽ.
- Hyer Aviation — കോക്ക്പിറ്റിൽ പാർക്കിംഗ് ഏരിയയിൽ സന്ധ്യ. ഫ്യൂസ്ലേജ് വലിപ്പമുള്ള സെരിഫ് ലോഗോയിൽ വിളറിയ പ്രഭാത ആകാശം കാണാം, ഒപ്പം ഒരു ചൂടുള്ള കളിമൺ ആക്സന്റ് മോണോക്രോം നിയന്ത്രണത്തെ തകർക്കുന്നു.
- Family — ക്രീം നിറത്തിലുള്ള കടലാസിൽ ഒരു യക്ഷിക്കഥയിൽ നിന്നുള്ള ഒരു സ്പ്രെഡ്
- OFF+BRAND. — ചൂടുള്ള കടലാസിൽ തിളങ്ങുന്ന ഗോളം
- Geniestudio — ഒരു മൃദുവായ പകൽ വെളിച്ച നോട്ട്ബുക്ക് - വീതിയേറിയ അരികുകളും ഒരു കട്ടിയുള്ള പേന സ്ട്രോക്കും ഉള്ള തരം
- xAI — കറുത്ത ഗുളികയോടുകൂടിയ വാം ക്രീം ലാബ്
- Seed — ലബോറട്ടറി ഗ്ലാസിന് കീഴിലുള്ള ഒരു ജീവജാലം
- Cosmos — ലിനൻ കൊണ്ട് നിരത്തി പോളറോയിഡുകൾ കൊണ്ട് തൂക്കിയിട്ടിരിക്കുന്ന ഒരു ഗാലറി മതിൽ.
- Cal — മോണോക്രോം പ്രായോഗികത, ഒരു മാനുഷിക സമീപനം. കർശനമായ കറുപ്പും വെളുപ്പും പാലറ്റിലൂടെ വ്യക്തതയ്ക്കും പ്രവർത്തനക്ഷമതയ്ക്കും മുൻഗണന നൽകുന്ന ഒരു സിസ്റ്റം, എന്നാൽ സൗഹൃദപരമായ ടൈപ്പോഗ്രാഫിയും വൃത്താകൃതിയിലുള്ള ആകൃതികളും ഉപയോഗിച്ച് അതിനെ മൃദുവാക്കുന്നു.
- T1 Energy — ചൂടുള്ള കടലാസിൽ ഒരു ഉൽപാദന സൗകര്യത്തിന്റെ ചിത്രം വരയ്ക്കുന്നത്, വ്യാവസായിക തലത്തിലും സൂക്ഷ്മമായ ടൈപ്പോഗ്രാഫിയിലും മുഴുവൻ ബ്രാൻഡും ഉൾക്കൊള്ളുന്ന ഒരു നിശബ്ദവും മോണോക്രോം രംഗവുമാണ്.