Steep
ပူနွေးသောစက္ကူပေါ်ရှိ Serif ဖောင့်များကို ခွဲခြမ်းစိတ်ဖြာခြင်း
Steep သည် ခွဲခြမ်းစိတ်ဖြာမှုများကို အယ်ဒီတာ့အာဘော်အကြောင်းအရာအဖြစ် တင်ပြသည်—Signifier serif ခေါင်းစဉ်များသည် အဖြူရောင်နီးပါး monochrome ပတ္တူပေါ်တွင် ပေါ်နေပြီး တစ်ခုတည်းသော နွေးထွေးသော peach accent (#fbe1d1) သည် အခြားအရောင်မခွဲခြားနိုင်သောစနစ်ကို အလေးပေးဖော်ပြသည်။ စာမျက်နှာသည် ထုတ်ကုန်မဂ္ဂဇင်းတစ်ခုကဲ့သို့ ဖတ်ရှုနိုင်သည်- ကြီးမားသော cursive fontface၊ ကျယ်ပြန့်သော စာသားနေရာ၊ နူးညံ့သော 24px-radius အနားများပါသည့် ကတ်ကြီးများနှင့် ဆေးပြားပုံသဏ္ဍာန်ထိန်းချုပ်မှုများသည် မျက်နှာပြင်နှင့် တစ်ပြေးညီဖြစ်သည်။ အစိတ်အပိုင်းများသည် ငြိမ်သက်ပြီး အလေးချိန်မရှိဟု ခံစားရသည်—အရိပ်များသည် သိမ်မွေ့ပြီး အနားသတ်များသည် ပါးလွှာပြီး အရောင်ကို လုပ်ဆောင်ချက်ဆိုင်ရာ အလေးပေးမှုအတွက် အသုံးပြုသည် (peach callout၊ peach နောက်ခံပေါ်ရှိ အညိုရောင်ရင့်ရောင်စာလုံးများ)။ ထုတ်ကုန်မျက်နှာပြင်များ (ဒေသဇယားများ၊ activation diagram များ၊ AI builders) ကို dashboard ၏ shell တွင် ထည့်သွင်းမည့်အစား header ပတ်လည်တွင် floating element များအဖြစ် တင်ပြထားသည်။
စာမျက်နှာ အပြင်အဆင်တွင် အများဆုံးအကျယ် 1200px ရှိပြီး အလယ်ဗဟိုတွင်ရှိပြီး အဓိကအပိုင်းများသည် စာမျက်နှာအကျယ်တစ်ခုလုံးနီးပါးကို နေရာယူထားသော်လည်း ကွန်တိန်နာအတွင်း၌သာ ရှိနေပါသည်။ အဓိက အပြင်အဆင်တွင် serif ဖောင့်ကြီးတစ်ခုပါသော အလယ်ဗဟိုတွင် ခေါင်းစဉ်တစ်ခု၊ ခေါင်းစဉ်ခွဲတစ်ခုနှင့် ဆေးပြားခလုတ်တစ်စုံပါဝင်ပြီး အဖြူရောင်ကင်းဗတ်စ်တစ်ခုကို အော့ဖ်ဆက်အမျိုးမျိုးဖြင့် ထပ်နေသည် (ဒေသဇယား ဘယ်ဘက်အပေါ်၊ မှတ်ပုံတင်ကတ် ညာဘက်၊ အသက်သွင်းပုံဇယား ဘယ်ဘက်အောက်၊ AI editor အောက်ခြေအလယ်) တို့ဖြင့် ဝန်းရံထားသည်။ အပိုင်းများသည် Paper White နှင့် Card Mist နောက်ခံများကြားတွင် အလှည့်ကျပြောင်းလဲနေပြီး ဆန့်ကျင်ဘက်အရောင်မရှိဘဲ တည်ငြိမ်သောစည်းချက်ကို ဖန်တီးပေးသည်။ Feature အပိုင်းများသည် စာသားနှင့် UI ၏ ကော်လံနှစ်ခုပါသော အပြင်အဆင်ကို အသုံးပြုထားပြီး 80px ဒေါင်လိုက် gutter ကြီးများပါရှိသည်။ Navigation သည် ဘယ်ဘက်တွင် လိုဂို၊ အလယ်ဗဟိုတွင် navigation link များနှင့် ညာဘက်တွင် လုပ်ဆောင်ချက်ခေါ်ဆိုမှုနှစ်ခု (စာသားလင့်ခ် + ဆေးပြားခလုတ်) ပါရှိသော တစ်ခုတည်းသော ပွင့်လင်းမြင်သာသည့် အပေါ်ဘားတစ်ခုဖြစ်သည်။ ယေဘုယျ အပြင်အဆင်သိပ်သည်းဆသည် ကျယ်ဝန်းသည်—စာမျက်နှာသည် အပိုင်းများအကြား "အသက်ရှူ" ပြီး အကြောင်းအရာသည် အနားသတ်များကို ဘယ်တော့မှ မဖုံးအုပ်ပါ။
အမြင်အာရုံဒီဇိုင်းသည် ထုတ်ကုန်ကို အဓိကထားပြီး လူနေမှုပုံစံကို အဓိကမထားပါ- floating UI အစိတ်အပိုင်းများ (ငါးတန်းဒေတာပါသော ဒေသဆိုင်ရာဇယားများ၊ ဩဂုတ်-နိုဝင်ဘာလတွင် အသက်သွင်းမှုများကို ပြသသည့် မျဉ်းဇယားများ၊ ရေဒီယယ်တိုးတက်မှုကွင်းများ၊ AI ထည့်သွင်းမှုအကွက်များ) ကို အယ်ဒီတာ့အာဘော်ခေါင်းစဉ်များပတ်လည်တွင် ဖြတ်ထားသော ဖန်သားပြင်ဓာတ်ပုံများအဖြစ် စီစဉ်ထားသည်။ ဓာတ်ပုံများ၊ သရုပ်ဖော်ပုံများ သို့မဟုတ် abstract ဂရပ်ဖစ်များ မရှိပါ။ အမြင်အာရုံထုတ်ကုန်အစိတ်အပိုင်းအားလုံးကို အနားသတ်ပါးလွှာပြီး နူးညံ့သောအရိပ်များပါသော အဖြူရောင် floating ကတ်များပေါ်တွင် ထားရှိသည်။ Avatar စက်ဝိုင်းများတွင် cursor လမ်းညွှန်ညွှန်ပြချက်ငယ်တစ်ခုပါရှိသည်—အချိန်နှင့်တပြေးညီ အပြန်အလှန်ဆက်သွယ်မှုကို အချက်ပြသည့် အမြင်အာရုံပုံစံတစ်ခုဖြစ်သည်။ အဓိကဖွဲ့စည်းပုံမှာ စတော့ဓာတ်ပုံပါသော အလယ်ဗဟိုခေါင်းစဉ်ထက် စာသားနှင့် UI ၏ collage ဖြစ်သည်။
ရောင်စုံ
ကြားနေ
- Ink Black
#17191c— အဓိကစာသား၊ ဖြည့်ထားသော ခလုတ်နောက်ခံနှင့် လမ်းညွှန်လိုဂိုတို့သည် စနစ်တွင် တစ်ခုတည်းသော မှောင်မိုက်သော မျက်နှာပြင်များဖြစ်သည်။ အဓိကစာသားရှိ လုပ်ဆောင်ရန် လှုံ့ဆော်မှုများနှင့် ခေါင်းစဉ်များအားလုံးသည် ဤအနက်ရောင်နီးပါးနောက်ခံတွင် ပေါ်လာသည်။ - Paper White
#ffffff— စာမျက်နှာကင်းဗတ်၊ ခလုတ်စာသားနှင့် ဖောင်းကြွထားသောကတ်မျက်နှာပြင်များသည် ခန့်မှန်းခြေအားဖြင့် ကြိမ်နှုန်းအမှတ် ၇၆ ခုပါရှိသော အဓိကနောက်ခံအသံဖြစ်သည်။ - Mist Gray
#f2f2f3— ကတ်မျက်နှာပြင်များ၊ နောက်ခံအပိုများ၊ ထည့်သွင်းရန်အကွက်ဖြည့်မှုများ—ထည့်သွင်းထားသော အကြောင်းအရာအတွက် စက္ကူအောက်တွင် မမြင်ရသောအလွှာ။ - Fog White
#fafafb— မောက်စ်တင်နေစဉ် အပိုင်းများနှင့် မျက်နှာပြင်များကို တစ်လှည့်စီပြောင်းလဲရန်အတွက် အပိုစာမျက်နှာနောက်ခံတစ်ခု - သိမ်မွေ့သော အစင်းကြောင်းပုံစံများကို ဖန်တီးရန် စက္ကူအထက်တွင် တစ်ဆင့်။ - Slate Gray
#777b86— လင့်ခ်အရောင်၊ အသံတိတ်အရန်စာသား၊ အောက်ခြေစာသား - ထည့်သွင်း၍မရသော အဓိကစာသားနှင့် စာသားကြားတွင် အေးမြပြီး desaturated မီးခိုးရောင်ထားရှိသည်။ - Ash Gray
#979799— နောက်ထပ် အညွှန်းများ၊ အမျိုးအစား တဂ်များ (စျေးကွက်ရှာဖွေရေး၊ ဘဏ္ဍာရေး၊ အရောင်း) - လင့်ခ်အရောင်ထက် တစ်ဆင့်ပိုပေါ့ပါးသည်။
စာလုံးပုံစံ
၁၅ မှ ၉၀ px အထိ · အဆင့် ၈ ဆင့်
- Signifier — အစားထိုးခြင်း: GT Sectra · မျဉ်းကြောင်းများ 400 · ခေါင်းစဉ်များနှင့် ခေါင်းစဉ်များအတွက် serif ဖောင့်တစ်ခု—H1/H2 အတွက် သီးသန့်အသုံးပြုသည့် အရွယ်အစားသုံးမျိုး၊ ဖောင့်အလေးချိန်သည် စကေးအားလုံးတွင် 400 (ပုံမှန်) တွင် ရှိနေသည်၊ ထူးခြားသောရွေးချယ်မှုတစ်ခု- serif ဖောင့်သည် ရဲရင့်သောဖောင့်ကဲ့သို့ အော်ဟစ်မည့်အစား တိုးတိုးလေးပြောသည်။
- Sohne — အစားထိုးခြင်း: Inter · မျဉ်းကြောင်းများ 400, 430, 450, 480, 500 · main၊ interface နှင့် navigation ဖောင့်များသည် metadata မှ subheadings အထိ အရာအားလုံးကို လွှမ်းခြုံထားပြီး စွယ်စုံရအသုံးပြုနိုင်သည်။ semi-stepped weights (430, 450, 480) သည် bold သို့ မခုန်တက်ဘဲ သိမ်မွေ့သော အဆင့်ဆင့်ကို ဖန်တီးပေးသည်။
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ပျမ်းမျှ |
| အခြေခံအဆင့် | 8px |
| ခလုတ်အချင်းဝက် | 9999px |
| ကတ်အချင်းဝက် | 24px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 80px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Steep ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Newformcap — အဝတ်လဲခန်းထဲက အယ်ဒီတာ့အာဘော်သတင်းစာ
- Claude — နွေးထွေးသော သားရေစက္ကူပေါ်တွင် ရိုက်နှိပ်ထားသော ရှေးဟောင်းပစ္စည်းတစ်ခု—အရိုးစက္ကူပေါ်တွင် မင်၊ တစ်ခုတည်းသော အရောင်အသက်ရှူအဖြစ် ရွှံ့စေး
- 11x– Digital workers — ရုပ်ရှင်အယ်ဒီတာ့အာဘော် စွန့်ပစ်ရာနေရာ—ဇိမ်ခံမဂ္ဂဇင်းတစ်စောင်ကဲ့သို့ ဖတ်ရှုနိုင်သော ဧရာမ serif ခေါင်းစဉ်များနှင့် ပေါင်းစပ်ထားသော ရှုခင်း၏ မြင်ကွင်းကျယ်ဓာတ်ပုံများ
- Revolut — တိမ်တိုက်များ၏ ဓာတ်ပုံ—အဖြူရောင်မင်၊ ဆေးဘူးခလုတ်များ၊ မီးခိုးရောင်ကမ္ဘာရှိ အပြာရောင်အစင်းတစ်ခုတည်း—ကို အခြေခံထားသည့် monochrome အယ်ဒီတာ့အာဘော်လက်ရာ။
- Scheduling — ခရင်မ်စက္ကူပေါ်တွင် အယ်ဒီတာ့အာဘော်မင်
- Titan — နွေးထွေးသောအရောင်ရှိသော monochrome မော်ကွန်းတိုက်
- Programa — နေ့လည်ခင်းတွင် ဆွစ်ဇာလန်ဒီဇိုင်းစတူဒီယိုတစ်ခု။ အဖြူရောင်ပြခန်းနံရံကို အဝါရောင်စားပွဲတင်မီးအိမ်တစ်လုံးဖြင့် ထွန်းလင်းထားသည် - ခလုတ်၊ အိုင်ကွန် သို့မဟုတ် အသားပေးဖော်ပြချက်တစ်ခုမှ မျက်စိကို ဆွဲဆောင်သည်အထိ အရာအားလုံးသည် မီးခိုးရောင်အရိပ်များဖြစ်ပြီး ထို့နောက် အဝါရောင်အသားပေးဖော်ပြချက်တစ်ခုတည်းသည် အခန်းတစ်ခုလုံးကို ပုံဖော်ပေးသည်။
- Sana Agents — အယ်ဒီတာ့အာဘော်တွင် အဖြူရောင်နောက်ခံပေါ်တွင် ထုံးကျောက်တောက်ပနေသည်
- Visual — နွေးထွေးသော အယ်ဒီတာ့အာဘော် samizdat။ ခရင်မ်စက္ကူ၊ serif ပိုစတာများ၊ monochrome marginalia၊ အဝါရောင်မာကာတစ်ခု။
- Midday — vellum အကြောင်း အယ်ဒီတာ့အာဘော် လက်ကမ်းစာစောင် - နွေးထွေးသော ကျောက်နောက်ခံပေါ်တွင် 72px serif ခေါင်းစဉ်၊ sans-serif ကိုယ်ထည်မိတ္တူတွင် နေရာလွတ်၊ ဆေးပြားပုံသဏ္ဍာန် ထိန်းချုပ်မှုများ၊ အရိပ်များ မပါဝင်ပါ။
- Chat for impact — ပါစတယ်အရောင်အခန်းများပါရှိသော သစ်တောစိမ်းလန်းသော ဆေးခန်း
- Handhold — မကြားရသလောက် serif များအောက်ရှိ နွေးထွေးသော စက္ကူစ - အရောင်ဆူညံသံမပါဘဲ လက်ဖြင့်ပြုလုပ်ထားသော အယ်ဒီတာ့အာဘော် ပျံ့နှံ့မှုတစ်ခုဖြစ်ပြီး အကောင်းဆုံး 200-point serif ဖောင့်က အသံတစ်ခုလုံးကို ဖော်ပြပေးသည်။