Modal
เทอร์มินัลเรืองแสงในห้องเซิร์ฟเวอร์ที่มืดมิด - แหล่งกำเนิดแสงเพียงแหล่งเดียวคือแสงสีเขียวสดใส
Modal ทำงานคล้ายกับเทอร์มินัลเรืองแสงในห้องเซิร์ฟเวอร์ที่มืดมิด: พื้นหลังเกือบดำ ตัวอักษรสีเขียวอ่อน และสีเขียวมะนาวสดใสเพียงจุดเดียวที่ทำหน้าที่เป็นไฟแสดงสถานะ LED ภาษาการออกแบบเน้นไปที่นักพัฒนา—หน้าต่างโค้ดแบบตัวอักษรคงที่พร้อมจุดไฟจราจร ไอคอน 3 มิติแบบไอโซเมตริกในสีเขียวอันเป็นเอกลักษณ์ และพื้นที่ว่างสีขาวมากมาย ทำให้องค์ประกอบหนึ่งในแต่ละส่วนเรืองแสงได้ การจัดวางตัวอักษรแบ่งออกเป็นแบบอักษรที่กำหนดเอง (Goga) สำหรับหัวข้อและแบบอักษรแปรผัน (Inter) สำหรับองค์ประกอบ UI ทั้งหมด โดยทั้งสองแบบตั้งค่าการติดตามแบบติดลบแคบ สีถูกกระจายอย่างสม่ำเสมอ: หน้าจอส่วนใหญ่เป็นสีขาวดำ และสีเขียวมะนาวสดใสจะปรากฏเฉพาะในการกระทำที่สำคัญ โลโก้ ภาพประกอบ 3 มิติ และช่วงเวลาที่ต้องการเน้นย้ำ ส่วนประกอบต่างๆ แบนราบและไม่มีกรอบ โดยสร้างความลึกผ่านขอบสีเขียวที่ละเอียดอ่อนและการเบลอพื้นหลังแทนที่จะใช้เงา
หน้าต่างป๊อปอัพใช้เลย์เอาต์สีเข้มเต็มความกว้าง โดยมีความกว้างสูงสุด 1280 พิกเซล เพื่อรองรับเนื้อหา หน้าต่างส่วนหัวอยู่ตรงกลาง: ชื่อเรื่อง (ประโยคแรกเป็นสีเขียวมะนาว), หัวข้อย่อย, ปุ่มกระตุ้นการดำเนินการสองปุ่ม และวัตถุ 3 มิติหนึ่งชิ้นเป็นจุดยึดภาพ โดยไม่แยกเลย์เอาต์ออกจากแถบด้านข้าง ส่วนเนื้อหามีจังหวะที่สม่ำเสมอ: ส่วนหัว (ตัวพิมพ์ใหญ่, Moss 70) → ชื่อเรื่อง Goga → ข้อความเนื้อหาสีอ่อน จากนั้นจะเป็นเลย์เอาต์สองคอลัมน์พร้อมคำอธิบายคุณสมบัติ (ข้อความ + โค้ด/การ์ดภาพ) หรือตารางการ์ดสามคอลัมน์ ช่องว่างระหว่างส่วนต่างๆ ค่อนข้างกว้าง — 80 พิกเซล หน้าเว็บสลับระหว่างแถบว่างสีเข้ม (#000000) และแถบพื้นหลังสีอ่อนกว่าเล็กน้อย (#181818) โดยมีส่วนสีอ่อนหนึ่งส่วน (#def0dd) ปรากฏอยู่ตรงกลางหน้าเพื่อเป็นช่วงพักสายตา การนำทางประกอบด้วยแถบด้านบนคงที่เพียงแถบเดียวที่มีพื้นหลังเบลอ — ไม่มีแถบด้านข้างหรือเมนูขนาดใหญ่ ส่วนท้ายเว็บไซต์มีขนาดกะทัดรัดและสีเข้ม โดยมีคอลัมน์ลิงก์สีเขียวอ่อน การจัดวางข้อความมีความเหมาะสม: แต่ละส่วนมีพื้นที่เพียงพอ และตารางการ์ดใช้ไม่เกินสามคอลัมน์
ภาษาภาพของ Modal แบ่งออกเป็นสองโหมด: ภาพเรนเดอร์ผลิตภัณฑ์เรืองแสงแบบ 3 มิติ และภาพจำลองหน้าต่างโค้ดสีเข้ม จุดเด่นคือลูกบาศก์ 3 มิติเดี่ยวที่เรนเดอร์โดยใช้การไล่ระดับสีทางการตลาด (จากสีเขียวมะนาวไปจนถึงสีเขียวมรกต) ตั้งอยู่ภายในรัศมีไล่ระดับสีที่อาบแสงสีเขียวให้กับพื้นที่ว่าง ซึ่งเป็นสไตล์ภาพที่เป็นเอกลักษณ์ของแบรนด์ การ์ดงานประกอบด้วยไอคอน 3 มิติแบบไอโซเมตริก (ลูกบาศก์โครงร่าง, บันไดทึบ, เลเยอร์) ที่เรนเดอร์ด้วยสีเขียวมะนาวเดียวกันบนพื้นหลังสีเข้ม โค้ดและผลลัพธ์การวัดประสิทธิภาพจะแสดงเป็นการ์ดหน้าต่างเทอร์มินัลที่มีจุดไฟจราจร การเน้นไวยากรณ์แบบตัวอักษรคงที่ในจานสีเรืองแสง และขอบสีเขียวอ่อนๆ ซึ่งดูคล้ายกับภาพหน้าจอของอินเทอร์เฟซบรรทัดคำสั่งจริง โลโก้ของลูกค้าจะแสดงเป็นป้ายสีเขียวเทาที่ลดความอิ่มตัวลงในแถวเดียวที่มีความคมชัดต่ำ บ่งบอกถึงความน่าเชื่อถือโดยไม่มีการแข่งขันทางภาพ ความหนาแน่นโดยรวมต่ำ - หน้าส่วนใหญ่มีข้อความเป็นหลัก และรูปภาพจะแสดงเป็นจุดโฟกัสแต่ละจุดแทนที่จะเป็นตารางภาพถ่าย ไม่มีรูปถ่าย ระบบภาพทั้งหมดถูกแสดงผลในรูปแบบเรขาคณิตและเปล่งประกาย
จานสี
ยี่ห้อ
- Lime Pulse
#7fee64— องค์ประกอบหลักของเอกลักษณ์องค์กร ได้แก่ โลโก้ คำกระตุ้นการตัดสินใจหลัก (CTA) การเติมคำในแท็ก สถานะการใช้งาน และสีพื้นฐานของภาพประกอบ
เป็นกลาง
- Phosphor White
#ddffdc— ข้อความหลัก สีของหัวเรื่อง เส้นขอบของไอคอน และข้อความที่เติมสีลงบนปุ่ม คือพื้นผิวหลักที่สามารถอ่านได้ - Void Black
#000000— พื้นที่หน้ากระดาษ ซึ่งเป็นชั้นพื้นหลังที่ลึกที่สุด - Ground Iron
#181818— การเติมสีปุ่มหลัก พื้นผิวการ์ดในบริเวณสีเข้ม พื้นผิวฐานของส่วนติดต่อผู้ใช้ - Carbon Veil
#212525— พื้นผิวที่สูงขึ้น ใช้เป็นพื้นหลังสำหรับการนำทาง มีสีอ่อนกว่าพื้นดินเล็กน้อย - Circuit Border
#485346— เส้นขอบ/กรอบการเคลื่อนไหวแบบโปร่งแสง ซึ่งเป็นเส้นบางๆ หลักที่ใช้ในการโต้ตอบ มีสีเทาอมเขียวอ่อนๆ - Phosphor Blue-Black
#1f2a33— เส้นประบางๆ รองลงมา ทำหน้าที่แบ่งเส้นระหว่างแถบสีเข้ม
การจัดพิมพ์
จาก 12 เป็น 64 พิกเซล · 8 ขั้นตอน
- Goga — ทดแทน: Inter Tight or Space Grotesk · โครงร่าง 400, 500 · แบบอักษรสำหรับหัวเรื่องและหัวเรื่องย่อย – ใช้สำหรับหัวเรื่อง H1–H4 และการ์ดทั้งหมด Goga เป็นแบบอักษร sans-serif เรขาคณิตแบบกำหนดเองที่มีช่องว่างแคบและปลายเหลี่ยมเล็กน้อย น้ำหนักปานกลาง (500) สงวนไว้สำหรับการเน้นหัวเรื่องระดับการ์ด น้ำหนักปกติ (400) ใช้สำหรับหัวเรื่องหลักและหัวเรื่องส่วนต่างๆ ในการเข้าถึงรูปทรงตัวอักษรทางเลือกที่กำหนดเอกลักษณ์ของ Modal ต้องเปิดใช้งานชุดรูปแบบ 'ss01' ระยะห่างระหว่างตัวอักษรติดลบจะค่อยๆ ลดลงจาก -0.007em ที่ 48px ถึง -0.017em ที่ 21px
- Inter Variable — ทดแทน: Inter · โครงร่าง 400, 500 · ส่วนติดต่อผู้ใช้และเนื้อหาหลัก – การนำทาง ปุ่ม เนื้อหาหลัก ป้ายกำกับ และส่วนท้าย โดยค่าเริ่มต้นจะใช้ความหนาปานกลาง (500) สำหรับองค์ประกอบแบบโต้ตอบและการนำทาง และใช้ความหนาปกติ (400) สำหรับย่อหน้า ระยะห่างระหว่างตัวอักษรลดลงอย่างเห็นได้ชัดแม้ในขนาดเล็ก (-0.026em ที่ 14px, -0.022em ที่ 16px) ทำให้ส่วนติดต่อผู้ใช้ดูแน่นและหนาแน่น สำหรับการใช้เครื่องหมายวรรคตอนแบบอื่น ควรใส่ตัวอักษร 'cv11' ป้ายกำกับตัวพิมพ์ใหญ่ทั้งหมดที่ขนาด 12px ใช้ระยะห่างระหว่างตัวอักษร +0.05em เพื่อชดเชยความหนาแน่นของเนื้อหาหลัก
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | เฉลี่ย |
| ขั้นตอนพื้นฐาน | 20px |
| รัศมีปุ่ม | 12px |
| รัศมีการ์ด | 8px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 80px |
| ความกว้างของหน้า | 1280px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Modal และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Slash — ห้องนิรภัยเที่ยงคืนพร้อมสมุดบัญชีปิดทอง
- AgentQL — แสงเหนือเหนืออาคารผู้โดยสารในเวลากลางคืน
- GitHub — แผงควบคุมอวกาศที่มีจุดควบคุมเรืองแสงชีวภาพ—พื้นที่ทำงานที่มืดมิดและสร้างบรรยากาศ โดยมีแสงสีเขียวเพียงจุดเดียวชี้บอกทิศทางไปข้างหน้า
- Doppler — แสงสีม่วงส่องสว่างภายในห้องนิรภัยยามเที่ยงคืน พื้นผิวสีดำสนิทเรืองรองด้วยสัญญาณสีลาเวนเดอร์เพียงดวงเดียวและแสงสีเขียวเพื่อยืนยัน ทุกพื้นผิวโค้งมนพอที่จะจับต้องได้
- Basedash — เทอร์มินัลข้อมูลยามเที่ยงคืนพร้อมตัวอักษรแบบด้าน หอดูดาวมืดมิดที่ซึ่งตัวชี้วัดเรืองแสงสีม่วงและสีเขียว หัวข้อแบบมีเชิงลอยอยู่เหนือเสียงรบกวน และปุ่มสีขาวรูปทรงแคปซูลเป็นสิ่งเดียวที่สว่างไสวในห้องที่มีพื้นผิวสีดำนุ่มนวล
- Superwhisper — แสงเหนือจางหายไปเหนือกระจกยามเที่ยงคืน
- Better Stack — คอนโซล SRE เที่ยงคืน
- Langbase — คอนโซล Midnight Northern Lights
- Astro — ศูนย์ควบคุมภารกิจห้วงอวกาศลึก พร้อมแสงสีม่วงเรืองรองเพียงดวงเดียวจากเนบิวลา
- Wayfinder — หน้าจอภาพยนตร์สีดำที่มีชื่อเรื่องปรากฏอยู่เหนือภาพประกอบที่เคลื่อนไหวได้ โดยแทบไม่ได้ยินเสียง ส่วนติดต่อผู้ใช้เป็นแบบแถบเลื่อนปรับความสว่าง แทนที่จะเป็นแผงควบคุม
- HashiCorp — ห้องควบคุมในยามเที่ยงคืนที่ส่องสว่างด้วยแสงนีออนสีม่วง เป็นพื้นผิวทางเทคนิคที่มืดมิด โดยมีลูกบาศก์หกเหลี่ยมเรืองแสงเป็นจุดอ้างอิงสีเพียงอย่างเดียว
- Umbrel — เตาผิงอบอุ่นในห้องเซิร์ฟเวอร์กลางคืน—ห้องมืดที่แสงสีพีชอ่อนๆ ส่องสว่างเน้นสิ่งที่สำคัญอย่างแท้จริง