
Linear
သန်းခေါင်ယံတိကျမှုကိရိယာ
Linear ဒီဇိုင်းစနစ်သည် ညဘက်တွင် အသုံးပြုသည့် command center တစ်ခုဖြစ်ပြီး (#08090a) တွင် ကြည်လင်သော အဖြူရောင်စာလုံးနှင့် တစ်ခုတည်းသော lime-green accent (#e4f222) ပါရှိပြီး လုပ်ဆောင်နိုင်သော flashlight အဖြစ် လုပ်ဆောင်ပေးပါသည်။ interface သည် မှောင်မိုက်မှုကို theme အဖြစ် မဟုတ်ဘဲ foundation အဖြစ် သဘောထားပါသည်- စာသားသည် စာလုံးအကွာအဝေးကျဉ်းမြောင်းသော (-0.022em) ကြည်လင်သော အဖြူရောင်ဖြစ်ပြီး font weight များသည် bold ထက် 400–510 range တွင်ရှိပြီး border များသည် အလွန်ပါးလွှာသည် (0.5px) ဖြစ်သောကြောင့် geometry သည် shadow များဖြင့် ပုံမှန်လုပ်ဆောင်လေ့ရှိသော အလုပ်ကို လုပ်ဆောင်နိုင်ပါသည်။ components များသည် တိကျစွာ ဖန်တီးထားသည်ဟု ခံစားရပါသည်- 6px နှင့် 12px radii၊ 8–12px margin များ ကျစ်လျစ်ပြီး အလှဆင်ပစ္စည်းများ လုံးဝနီးပါး ချို့တဲ့ခြင်း- ထုတ်ကုန် UI (task card များ၊ Kanban board များ၊ AI agent panel များ) ကို တည်ငြိမ်သော system တွင် တစ်ခုတည်းသော visual texture ဖြစ်စေပါသည်။
အပြင်အဆင်တွင် အများဆုံးအကျယ်မှာ 1200px ခန့်ရှိပြီး အလယ်ဗဟိုတွင်ရှိပြီး နောက်ခံမှောင်မိုက်သည် viewport ၏အနားများအထိ ကျယ်ပြန့်သည်။ အဓိကအစိတ်အပိုင်းမှာ ဘယ်ဘက်ညှိထားသော (64–72px) ခေါင်းစဉ်ကြီးတစ်ခုဖြစ်ပြီး ညာဘက်ညှိထားသော လုပ်ဆောင်ချက်ခေါ်ဆိုမှု (CTA) နှင့် တွဲဖက်ထားကာ အများဆုံးအကျယ်ထက် အနည်းငယ်ကျော်လွန်သော ထုတ်ကုန်ဖန်သားပြင်ဓာတ်ပုံကြီးတစ်ခု ပါရှိသည်။ အပိုင်းများ၏ စည်းချက်သည် ဘယ်ဘက်တွင် စာသားနှင့် ညာဘက်တွင် ရုပ်ပုံပါသော ကော်လံနှစ်ခုပါ ဖွဲ့စည်းပုံများနှင့် 96px ဒေါင်လိုက် gutters များဖြင့် ပိုင်းခြားထားသော အကျယ်အပြည့် ထုတ်ကုန်ပြသမှု strips များအကြား အလှည့်ကျပြောင်းလဲသည်။ client ၏ logo ပါသော strip သည် အလျားလိုက်အတန်းတစ်ခုတည်းဖြစ်သည်။ စာမျက်နှာသည် ကော်လံသုံးခုပါ ကတ် grid များ သို့မဟုတ် tile ဖွဲ့စည်းပုံများကို ဘယ်သောအခါမှ အသုံးမပြုပါ - သတင်းအချက်အလက်သိပ်သည်းဆမှာ နည်းပါးနေဆဲဖြစ်ပြီး အပိုင်းအများစုသည် အဖြူရောင်နေရာလွတ်များစွာနှင့် မျက်နှာပြင်ပေါ်တွင် တစ်ခုတည်းသော focal element ကို အသုံးပြုသည်။ navigation သည် sidebar သို့မဟုတ် mega-menu မပါဘဲ ဘယ်ဘက်ညှိထားသော logo နှင့် ညာဘက်ညှိထားသော link များပါသော fixed top bar ဖြစ်သည်။
Linear ရဲ့ visual language ဟာ product screenshots တွေကို အခြေခံထားပါတယ်- အစနဲ့ အပိုင်းတွေမှာ ပါတဲ့ ပုံတွေက Linear app ရဲ့ user interface ရဲ့ တကယ့်ပုံတွေဖြစ်ပြီး အသေးစိတ် ရိုက်ကူးထားတဲ့ task card တွေ၊ Kanban board တွေ၊ AI agent dashboard တွေ၊ command palettes တွေလိုမျိုး ပါးလွှာတဲ့ frame တွေနဲ့ ထားထားပါတယ်။ stock photo တွေ၊ lifestyle image တွေ၊ abstract image တွေ မပါဝင်ပါဘူး။ လိုဂိုတွေကို customer တွေအတွက် တစ်ပြေးညီ အရွယ်အစားရှိတဲ့ neutral gray stripe (#8a8f98) အနေနဲ့ ပြသထားပါတယ်။ Icon တွေက monochromatic gray scale ရှိတဲ့ minimalist linear SVG image တွေပါ။ စာမျက်နှာရဲ့ အပေါ်ဆုံးမှာရှိတဲ့ screenshot က သိမ်မွေ့တဲ့ linear gradient (မှောင်တာကနေ လင်းတာအထိ) ပေါ်မှာ ပေါ်နေပြီး တကယ့် landscape တွေကို မသုံးဘဲ atmospheric depth ကို ဖန်တီးပေးပါတယ်။ visual element တိုင်းဟာ product ရဲ့ functional element တစ်ခုပါ။
ရောင်စုံ
အမှတ်တံဆိပ်
- Acid Lime
#e4f222— အဓိက ထိန်းချုပ်ခလုတ်များနှင့် active navigation indicators များသည် monochrome အရောင်ပေါင်းစပ်မှုကို ဖောက်ထွက်စေသည့် တောက်ပသော အသားပေးပုံစံဖြစ်သည်။
ကြားနေ
- Mist
#d0d6e0— ဒုတိယခေါင်းစဉ်များ၊ မှောင်သောမျက်နှာပြင်များပေါ်ရှိ ခလုတ်စာသား - Void
#08090a— စာမျက်နှာကင်းဗတ်စ်၊ အကျယ်အပြည့်နောက်ခံပုံ - မူရင်းအားဖြင့်၊ အစိတ်အပိုင်းအားလုံးကို ဤနောက်ခံတွင် ထားရှိသည်။ - Carbon
#0f1011— ကတ်မျက်နှာပြင်များ၊ လမ်းညွှန်ဘားများသည် ကတ်များအတွင်း အကြောင်းအရာထည့်ရန်အတွက် ပတ္တူအထက်တွင် တစ်ဆင့်ရှိသည်။ - Obsidian
#161718— မျက်နှာပြင်မြင့်မားခြင်း၊ ကတ်ထူပြားများ ပိုမိုနက်ရှိုင်းခြင်း - Graphite
#23252a— သိမ်မွေ့သော ဘောင်များ၊ ပိုင်းခြားကိရိယာများ၊ သိမ်မွေ့သော ခလုတ်မျဉ်းကြောင်းများ - ဆန့်ကျင်ဘက်အရောင်နည်းသော အသွင်အပြင်ရှိသော အနားများ - Smoke
#383b3f— အနားသတ်ပါးများသည် ဂရပ်ဖိုက် - အပိုင်းခွဲကိရိယာများထက် ဆန့်ကျင်ဘက်ပိုမိုမြင့်မားသည်။
စာလုံးပုံစံ
၁၃ မှ ၇၂px အထိ · အဆင့် ၈ ဆင့်
- Inter Variable — အစားထိုးခြင်း: Inter (variable) · မျဉ်းကြောင်းများ 300, 400, 510, 590 · အဓိက UI နှင့် Header ဖောင့် - လမ်းညွှန်၊ ကိုယ်ထည်စာသား၊ ခေါင်းစဉ်များ၊ ခလုတ်များနှင့် ကတ်များတွင် အသုံးပြုသည်။
- Berkeley Mono — အစားထိုးခြင်း: JetBrains Mono · မျဉ်းကြောင်းများ 400 · ကုဒ်နှင့်ကပ်လျက် UI စာသား - ထုတ်ဝေမှု အမှတ်အသားများ (ENG-2703)၊ ကီးဘုတ်အတိုကောက်များ၊ monospace ဖောင့် မက်တာဒေတာ
ကြားကာလများနှင့်ပုံစံ
| ရည်ရွယ်ချက် | အဓိပ္ပာယ် |
|---|---|
| သိပ်သည်းဆ | ကျယ်ဝန်းသော |
| အခြေခံအဆင့် | 8px |
| ခလုတ်အချင်းဝက် | 6px |
| ကတ်အချင်းဝက် | 12px |
| အရိပ်များ | အရိပ်များအစား ဘောင်မရှိပါ |
| အပိုင်းများအကြား | 96px |
| စာမျက်နှာအကျယ် | 1200px |
AI က သင့်ဝက်ဘ်ဆိုက်ကို Linear ပုံစံနဲ့ တည်ဆောက်ပြီး ဖြည့်စွက်ပေးပါလိမ့်မယ်
- Instagram ၊ TikTok ၊ Facebook လင့်ခ်မှတစ်ဆင့် ထုတ်ကုန်များနှင့် ပို့စ်များကို ဖြည့်ပါ။
- သင့်ဆိုက်ဟောင်းမှ အကြောင်းအရာကို လွှဲပြောင်းပါ—လိပ်စာကို သတ်မှတ်ပါ။
- အကောင်းဆုံးအင်ဂျင်ပေါ်တွင် ခေတ်မီဒီဇိုင်း- server rendering နှင့် SEO optimization ပါဝင်သော React ( Next.js)။
- ရှာဖွေမှုရလဒ်များနှင့် neural network အကြံပြုချက်များအတွက် အပြည့်အဝ အလိုအလျောက် SEO အကောင်းဆုံးဖြစ်အောင်ပြုလုပ်ခြင်း။
အလားတူပုံစံများ
- Aaru — သန်းခေါင်ယံတွင် အမှုန်ကွင်း စောင့်ကြည့်ရေးဌာန
- Atlas Card — နီလာရောင်တစ်ခုတည်းရှိသော သန်းခေါင်ယံအခေါင်းပေါက်သည် ပိန်းပိတ်အောင်မှောင်မိုက်နေသော ကျယ်ပြန့်သောနေရာတစ်ခုဖြစ်ပြီး အရေးကြီးဆုံးမှာ နက်ရှိုင်းသောလျှပ်စစ်အပြာရောင်သာရှိသည်။
- Checkly — နက်ရှိုင်းသောပတ်လမ်း မစ်ရှင် ထိန်းချုပ်ရေးစင်တာ
- Savee — အမြင်အာရုံ ထိန်းသိမ်းရေး ပညာရှင်များအတွက် အနက်ရောင် ပတ္တူ
- Inngest — တူရိယာများဖြင့် အလုပ်လုပ်ရန် တပ်ဆင်ထားသော မှောင်မိုက်ပြီး တိတ်ဆိတ်ငြိမ်သက်သော နက္ခတ်တာရာကြည့် အဆောက်အအုံတစ်ခု၊ အဝါရောင် မီးလုံးတစ်လုံးတည်းဖြင့် ထွန်းလင်းထားသည်
- Dala — အနက်ရောင်ကတ္တီပါပေါ်တွင် ဝဲပျံနေသော ကြယ်စုတစ်ခု
- Origin Financial — တိတ်ဆိတ်ငြိမ်သက်သော ခမ်းနားထည်ဝါမှု၏ သန်းခေါင်ယံပြခန်း။ ကြီးမားသော serif စာလုံးများနှင့် တောက်ပသော ရောင်စုံပြားအနည်းငယ်သည် ဘဏ္ဍာရေးသည် ဂရုတစိုက်ရွေးချယ်ထားသော အနုပညာလက်ရာတစ်ခုဖြစ်သည်ဟု ခံစားချက်ကို ဖန်တီးပေးသည့် တိတ်ဆိတ်ပြီး မှောင်မိုက်လုနီးပါးရှိသော အခန်းတစ်ခန်း။
- Hyperstudio — ဒီဇိုင်းကို obsidian ကျောက်ဖြင့် ကုတ်ခြစ်ထားသည်။ စာသားနှင့် ချောမွေ့သော မျဉ်းကြောင်းများသည် စစ်မှန်သော အနက်ရောင် အဖြူရောင်နေရာကို ဘောင်ခတ်ထားပြီး တစ်ခါတစ်ရံတွင် ရွှေရောင် သံလိုက်အိမ်မြှောင် အမှတ်အသားများက လမ်းညွှန်ပေးနေသည်။
- Air — ရုပ်တု "ဖန်ခွက်မှတစ်ဆင့် သန်းခေါင်ယံကောင်းကင်"
- Resend — ခရမ်းရောင်နီယွန်အရောင်နဲ့ အနက်ရောင်ကတ္တီပါ
- Raycast — သန်းခေါင်ယံ ကွပ်ကဲရေးစင်တာ၊ ကိုရယ်နီယွန်
- Dimension — မှောင်ရီပျိုးစပြုချိန်တွင် အလင်းရောင်ကောင်းစွာရသော အလုပ်စခန်းတစ်ခု