Authkit
วิหารกระจกฝ้าในยามเที่ยงคืน
AuthKit สร้างสรรค์สุนทรียภาพในการนำเสนอผลิตภัณฑ์ในยามค่ำคืน: พื้นหลังสีดำสนิทพร้อมพื้นผิวกระจกฝ้า ตารางเส้นที่แทบมองไม่เห็น และข้อความเรืองแสงที่ดูเหมือนส่องสว่างด้วยชั้นกระจก ตัวอักษรเกือบทั้งหมดเป็นสีขาวตัดกับพื้นหลังสีเข้ม โดยมีสีม่วงสดใสเป็นองค์ประกอบเดียวที่ใช้งานได้จริง—พื้นผิวแบบโต้ตอบแต่ละส่วนมีเส้นบางๆ สีฟ้าขาวอ่อนๆ แทนที่จะเป็นกรอบแข็ง ส่วนประกอบต่างๆ ถูกจัดเรียงบนชั้นโปร่งแสง ซ้อนทับอยู่บนแสงเรืองรอง และการ์ดต่างๆ ปรากฏเป็นแผ่นกระจกที่ส่องสว่างจากด้านล่าง แทนที่จะเป็นแผ่นกระดาษ ระยะห่างกว้างและเป็นจังหวะ องค์ประกอบหลักคือโลโก้เรืองแสงเพียงอันเดียวที่ครอบคลุมความกว้างทั้งหมดของหน้า ล้อมรอบด้วยการ์ดกระจกลอยตัว แทนที่จะเป็นเค้าโครงแบบแบ่งหน้าจอแบบดั้งเดิม
พื้นหลังสีเข้มเต็มความกว้าง มีคอนเทนเนอร์เนื้อหาอยู่ตรงกลาง ความกว้างสูงสุด 1200 พิกเซล องค์ประกอบหลักคือโลโก้เรืองแสงเดี่ยวๆ ที่อยู่ตรงกลาง ("AuthKit" ในแบบอักษรไล่ระดับสี) ใต้ข้อความรูปทรงคิ้วขนาดเล็ก ด้านหลัง/ด้านล่างเป็นแผ่นการ์ดแก้วลอยสามแผ่นที่มีแบบฟอร์มล็อกอินกางออก (แผ่นซ้ายเอียงซ้าย แผ่นกลางขยายใหญ่สุด แผ่นขวาเอียงขวา) ปุ่มสลับธีมสว่าง/มืดอยู่ตรงกลางใต้องค์ประกอบหลัก แถวไฮไลท์เป็นไทม์ไลน์แนวนอนของไอคอน 6 ไอคอน โดยมีเส้นเชื่อมบางๆ ระหว่างไอคอนวงกลม จังหวะของแต่ละส่วน: แต่ละส่วนเริ่มต้นด้วยข้อความรูปทรงคิ้วที่อยู่ตรงกลาง ล้อมรอบด้วยเส้นแนวนอนที่จางลง ตามด้วยชื่อเรื่องขนาดใหญ่ที่อยู่ตรงกลาง (44-48 พิกเซล) ตามด้วยข้อความเนื้อหาบรรทัดเดียวที่จางลง (16-18 พิกเซล) ความกว้างสูงสุดประมาณ 640 พิกเซล ส่วนการปรับแต่งจะแสดงภาพจำลองของหน้าต่างเบราว์เซอร์ โดยมีบัตรล็อกอินอยู่ตรงกลาง ล้อมรอบด้วยแผงตรวจสอบ UI แบบลอยตัว (จานสี ตัวเลื่อนรัศมี ตัวเลือกไอคอนโลโก้ ช่องข้อความปุ่ม ช่องพื้นหลังหน้า) ซึ่งวางอยู่ที่มุมของพื้นที่ทำงาน คล้ายกับพื้นที่ทำงานของเครื่องมือออกแบบ
การออกแบบภาพนั้นโดดเด่นด้วยแบบจำลองแบบฟอร์มล็อกอินที่สร้างขึ้นในสไตล์ "รูปทรงแก้ว" (ช่องป้อนอีเมล/รหัสผ่าน ปุ่มล็อกอินโซเชียลมีเดีย ช่องป้อนรหัสแบบไม่ต้องใช้รหัสผ่าน) นำเสนอเป็นเหมือนการ์ดโปร่งแสงลอยอยู่บนพื้นหลังสีดำสนิท ไอคอนต่างๆ เป็นสัญลักษณ์เส้นตรงสีขาวดำในโทนสี #d1e4fa ภายในกรอบทรงกลมแบบด้าน ตารางละเอียด (เส้นขนาด 1 พิกเซลในสี rgba(186,215,247,0.06)) ครอบคลุมทั้งหน้า สร้างบรรยากาศ ในขณะที่แสงสปอตไลท์ไล่ระดับสีรูปทรงกรวยส่องประกายอยู่ด้านบนขององค์ประกอบหลัก ไม่มีรูปถ่าย ไม่มีภาพไลฟ์สไตล์ ไม่มีภาพหน้าจอผลิตภัณฑ์—ตัวผลิตภัณฑ์เองคือองค์ประกอบภาพ: ช่องล็อกอินจัดเรียงเหมือนต้นแบบแก้วในสตูดิโอมืด
จานสี
ยี่ห้อ
- Void Violet
#663af3— สีหลักของปุ่มกระตุ้นการดำเนินการ (CTA) เป็นสีเน้นเพียงสีเดียวที่ใช้เฉพาะกับปุ่ม "ดำเนินการต่อ/ส่ง" ในแบบฟอร์มล็อกอิน สีม่วงสดใสตัดกับพื้นหลังสีดำสนิทสร้างความรู้สึกเร่งด่วนโดยไม่รบกวนโทนสีแบบโมโนโครม
เป็นกลาง
- Midnight Canvas
#05060f— พื้นหลังของหน้ากระดาษ พื้นผิวที่ลึกที่สุดของบัตร การเติมสีของตราสัญลักษณ์—ฐานสีดำสนิทที่ทุกสิ่งทุกอย่างลอยอยู่บนนั้น - Steel Plate
#2f343e— พื้นผิวยกสูง ปุ่มควบคุมการทำงานรอง/ปุ่มแฝง ด้านหลังแผงปิดมิดชิด - Fog Veil
#9da7ba— ข้อความหลักบนบัตรนั้นอ่านได้ แต่ถูกลดความสำคัญลงไปเมื่อเทียบกับหัวข้อต่างๆ - Moon Mist
#c7d3ea— ข้อความหลัก, ป้ายกำกับเพิ่มเติม, ข้อความเสริมที่ปิดเสียง - Frost Glow
#d1e4fa— สีเติมหลักสำหรับข้อความเนื้อหาและลิงก์ ข้อความไอคอน และสีเติมไอคอน คือสีเรืองแสงเริ่มต้น - Ice Highlight
#d8ecf8— ใช้ตัวอักษรสีอ่อนบนพื้นผิวสีเข้ม ป้ายกำกับแบบกลับด้าน และหัวข้อข่าวที่มีความคมชัดสูง อย่าใช้สีนี้เป็นสีหลักสำหรับคำกระตุ้นการตัดสินใจ ควรใช้การไล่ระดับสีในหัวข้อข่าว—การเปลี่ยนสีอย่างราบรื่นจากสีฟ้าอ่อนไปเป็นสีฟ้าอมเทาจากบนลงล่าง—ในโลโก้ AuthKit และหัวข้อข่าวสำคัญๆ
การจัดพิมพ์
จาก 12 เป็น 48 พิกเซล · 8 ขั้นตอน
- Untitled Sans — ทดแทน: Inter · โครงร่าง 400, 500, 600, 700 · ข้อความหลัก ส่วนติดต่อผู้ใช้ ปุ่ม ช่องป้อนข้อมูล ไอคอน หัวข้อย่อย - ใช้ฟอนต์เดียวกันสำหรับทุกส่วนที่ใช้งานได้จริง
- aeonikPro — ทดแทน: Space Grotesk · โครงร่าง 400, 500 · การแสดงเฉพาะส่วนหัว—โลโก้ AuthKit หัวข้อส่วนต่างๆ และเนื้อหาหลัก—โดยใช้ขนาดตัวอักษร 500 พอยต์ ที่ระยะห่าง 44-48 พิกเซล จะทำให้โลโก้ดูเรียบง่ายและไม่ฉูดฉาดเกินไป
- dotDigital — ทดแทน: JetBrains Mono · โครงร่าง 400 · ข้อความตัวพิมพ์ใหญ่ทั้งหมด ("Introducing," "Expandable Design," "Shine Bright") - ข้อความตัวพิมพ์ใหญ่ทั้งหมดแบบตัวอักษรคงที่ที่มีระยะห่าง 0.10em ทำหน้าที่เป็นตัวแบ่งอย่างแนบเนียนระหว่างเนื้อหาหลักและหัวข้อ
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | กว้างขวาง |
| ขั้นตอนพื้นฐาน | 16px |
| รัศมีปุ่ม | 999px |
| รัศมีการ์ด | 16px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 120px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Authkit และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Resend — กำมะหยี่สีดำผสมสีม่วงนีออน
- Gsap — กระดานไวท์บอร์ดแบบเคลื่อนไหวได้ในสตูดิโอออกแบบ ผนังสีดำสนิท ชอล์กสีครีมโทนอบอุ่น และปากกามาร์กเกอร์ห้าสี—สีละหนึ่งสีสำหรับแต่ละสาขาของการสร้างแอนิเมชั่น
- Slash — ห้องนิรภัยเที่ยงคืนพร้อมสมุดบัญชีปิดทอง
- Raycast — ศูนย์บัญชาการเที่ยงคืน, ปะการังนีออน
- Dimension — โต๊ะทำงานที่ส่องสว่างยามพลบค่ำ พร้อมแผงกระจกฝ้า
- Modal — เทอร์มินัลเรืองแสงในห้องเซิร์ฟเวอร์ที่มืดมิด - แหล่งกำเนิดแสงเพียงแหล่งเดียวคือแสงสีเขียวสดใส
- Reflect Notes — อวกาศสีม่วงระยิบระยับราวกับดวงดาว คือหอดูดาวมืดมิด ที่ซึ่งโน้ตดนตรีล่องลอยราวกับกลุ่มดาวท่ามกลางฉากหลังอันว่างเปล่าสีครามเกือบดำ
- LaunchDarkly — ห้องควบคุมนีออนเป็นห้องนักบินที่มืดมิด โดยมีแสงสีม่วงส่องเป็นจังหวะผ่านแผงสีดำสนิท
- Ameba — ห้องควบคุมเวลาเที่ยงคืน – แสงสีฟ้าเรืองรองสะท้อนอยู่ภายในแผงกระจกฝ้า
- AgentQL — แสงเหนือเหนืออาคารผู้โดยสารในเวลากลางคืน
- Neon — ห้องเซิร์ฟเวอร์หลังมืดค่ำ มืดสนิท มีเพียงแสงสว่างจากข้อมูลและการโต้ตอบของผู้ใช้งานเท่านั้น
- N8n — Workflow Engine at Midnight – ความรู้สึกเหมือนได้ทำงานอัตโนมัติแบบเรียลไทม์ในห้องเซิร์ฟเวอร์มืดๆ ที่ส่องสว่างด้วยตัวบ่งชี้สถานะและกระแสข้อมูล