Huly
แสงเหนือที่หอดูดาวเที่ยงคืน - ตัวเอกคือลำแสงสีม่วงแนวตั้งที่ค่อยๆ เปลี่ยนเป็นสีปะการัง และแต่ละส่วนที่เงียบสงบด้านล่างก็ถ่ายทอดเรื่องราวสองสีเดียวกันนี้ในโทนที่นุ่มนวลกว่า
Huly สร้างบรรยากาศของพื้นที่ทำงานในอวกาศ: พื้นหลังสีดำสนิทที่มีแสงสีม่วงอำพันส่องผ่านองค์ประกอบหลัก และด้านล่างเป็นตารางที่ดูเรียบง่ายกว่าเพื่อเพิ่มประสิทธิภาพการทำงาน ระบบทำงานภายในช่วงสีที่แคบ—สีฟ้าสดใสหนึ่งสีและสีปะการังหนึ่งสีทำหน้าที่สร้างแบรนด์ทั้งหมดบนพื้นผิวสีเทากราไฟต์ที่ซ้อนกัน ดังนั้นโหมดมืดจึงไม่ให้ความรู้สึกเป็นกลาง แบบอักษรใช้ Inter-style สำหรับทุกอย่างที่ใช้งานได้จริง โดยมีแบบอักษรที่กำหนดเอง (Esbuild) สงวนไว้สำหรับจุดสำคัญ ด้วยระยะห่างระหว่างตัวอักษร 80–84 พิกเซล และการเว้นระยะห่างระหว่างตัวอักษรแบบติดลบอย่างมาก ส่วนประกอบมีรูปทรงแคปซูล: รัศมี 9999 พิกเซลบนส่วนควบคุม 12 พิกเซลบนการ์ด เงาเล็กน้อย และเส้นไล่ระดับสีเรืองแสงเป็นองค์ประกอบตกแต่งหลัก หน้าเว็บจะสลับระหว่างพื้นที่มืดเต็มหน้าจอและส่วนสว่างที่สงบ ดังนั้นหน้าจอใหม่ควรเลือกโหมดก่อนเลือกสี
หน้าแรกแบบเต็มความกว้างมีภาพลำแสงแนวตั้งของแสงเหนือและหัวข้อที่จัดชิดซ้าย พร้อมด้วยภาพหน้าจอผลิตภัณฑ์ที่วางไว้ที่มุมล่างขวา ด้านล่างหน้าแรกเป็นพื้นที่เนื้อหาที่มีความกว้างสูงสุด 1200 พิกเซล สลับแถบสีเข้มและสีอ่อน แต่ละส่วนเป็นบล็อกแนวตั้งเดียว: ส่วนหัวและตารางการ์ด 3 หรือ 4 คอลัมน์ที่คั่นด้วยช่องว่าง 96 พิกเซล ส่วน "MetaBrain" จะแหวกแนวตารางด้วยหัวข้อที่อยู่ตรงกลางและภาพโมเสกของการ์ดขนาดต่างๆ (การ์ดหลักขนาดใหญ่และการ์ดสนับสนุนขนาดเล็กกว่า) หน้าเว็บมีเนื้อหาจำนวนมากตามมาตรฐาน SaaS แต่ใช้แถบสีเข้มและสีอ่อนสลับกันเพื่อให้แต่ละส่วนมีพื้นที่หายใจ การนำทางเป็นแถบด้านบนโปร่งใสเดียวที่ค่อยๆ จางลงจนทึบแสงเมื่อคุณเลื่อนหน้าจอ
องค์ประกอบหลักคือการไล่ระดับสีออโรร่าบริสุทธิ์ ปราศจากภาพถ่าย ภาพประกอบทั้งหมดเป็นภาพหน้าจอจริงของ UI ของผลิตภัณฑ์ (Kanban ในโหมดมืด กล่องจดหมายเข้า ปฏิทิน) ที่จัดวางในกรอบการ์ดซึ่งทำหน้าที่ทั้งเป็นหลักฐานและของตกแต่ง ไม่มีภาพถ่ายไลฟ์สไตล์ ไม่มีภาพสต็อก ไม่มีภาพเรนเดอร์ 3 มิติ องค์ประกอบภาพเดียวที่ไม่เกี่ยวข้องกับ UI คือแสงเรืองรองคล้ายแสงอาทิตย์ที่ฐานของออโรร่า ซึ่งแสดงผลเป็นแบบไล่ระดับสี CSS ไอคอนเป็นไอคอนเส้นขาวดำในสี #95979 หรือสีขาว ไม่ใช่แบบหลายสี ระบบจะถือว่า UI สีเข้มของตัวเองเป็นองค์ประกอบหลัก ส่วนตัวผลิตภัณฑ์คือภาพถ่าย
จานสี
ยี่ห้อ
- Electric Iris
#5683da— พื้นหลังหลัก ตัวบ่งชี้การนำทางที่ใช้งานอยู่ และลวดลายแสงเหนือที่โดดเด่น—สีม่วงอมน้ำเงินสดใสบนพื้นหลังสีดำสนิท—สร้างความรู้สึกถึงการมีส่วนร่วมมากกว่ากิจกรรมขององค์กร - Ember Pulse
#ff8964— จุดเด่นรองลงมาคือโซนแสงเหนือที่อบอุ่น จุดแจ้งเตือน และจุดเด่นในการแสดงภาพประกอบ—เฉดสีอำพันที่ช่วยลดความเคร่งขรึมของสีน้ำเงินและเพิ่มความอบอุ่นให้กับลำแสง
เป็นกลาง
- Obsidian Canvas
#303236— พื้นหลังของหน้าเว็บ ซึ่งเป็นพื้นผิวหลัก มีสีเกือบดำสนิท โดยมีโทนสีอบอุ่นเจืออยู่เล็กน้อย ซึ่งเป็นสภาพแวดล้อมมาตรฐานสำหรับเนื้อหาทั้งหมด - Void
#090a0c— ชั้นพื้นผิวที่ลึกที่สุดสำหรับไล่ระดับสีบนหน้าจอหลัก พื้นหลังแบบโมดอล และกรอบต่างๆ ที่ควรกลมกลืนไปกับผืนผ้าใบ - Charcoal Card
#111111— พื้นผิวที่ยกสูงขึ้นทำจากกระดาษแข็งและแผ่นไม้ วางอยู่สูงกว่าผืนผ้าใบหนึ่งขั้น - Slate Edge
#4a4b50— เส้นขอบและเส้นแบ่งที่ละเอียดอ่อนบนพื้นผิวสีเข้ม - Iron Veil
#6b6c6d— พื้นหลังสีจางสำหรับแท็ก การเติมสีรายการ และการเติมสีที่ถูกปิดใช้งาน - Smoke
#95979e— โครงร่างไอคอน ข้อความเพิ่มเติม และปุ่มควบคุมที่ไม่ได้ใช้งาน จะเป็นองค์ประกอบหลักในการทำงาน โดยแสดงด้วยสีเทาปานกลาง
การจัดพิมพ์
จาก 11 เป็น 80 พิกเซล · 8 ขั้นตอน
- Inter — ทดแทน: DM Sans · โครงร่าง 300, 400, 500, 600, 700 · ข้อความทั้งหมดที่ใช้งานได้ในส่วนติดต่อผู้ใช้ ได้แก่ ข้อความหลัก การนำทาง ปุ่ม รายการ ป้ายกำกับ และหัวข้อขนาดเล็ก จะใช้ขนาดตัวอักษร 500–600 สำหรับข้อความเน้น 400 สำหรับข้อความหลัก และ 300 สำหรับข้อมูลเมตาที่ไม่เด่นชัด
- Esbuild — ทดแทน: Sora · โครงร่าง 400, 500, 600 · ใช้สำหรับแสดงผลเท่านั้น: หัวเรื่องเริ่มต้น หัวข้อส่วน และชื่อบทความของ MetaBrain รูปทรงที่กระชับและการเว้นระยะห่างระหว่างตัวอักษรที่แคบทำให้รู้สึกว่าขนาด 84px เหมาะสำหรับงานบรรณาธิการมากกว่าโครงการ SaaS ห้ามใช้ขนาดต่ำกว่า 28px เด็ดขาด
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | กว้างขวาง |
| ขั้นตอนพื้นฐาน | 12px |
| รัศมีปุ่ม | 9999px |
| รัศมีการ์ด | 12px |
| เงา | เงาอ่อนๆ |
| ระหว่างส่วนต่างๆ | 96px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Huly และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- monday — ห้องทำงานสีขาวตกแต่งด้วยสติกเกอร์สีพาสเทล
- Slack — เวทีมีสีม่วงเข้มคล้ายสีมะเขือม่วง ส่องสว่างด้วยไฟสปอตไลท์สีขาว สีม่วงเข้มเป็นสีหลักในบริเวณที่มืด ในขณะที่ผืนผ้าใบสีขาวนวลช่วยให้ชื่อเรื่องขนาดใหญ่สไตล์ล้ำสมัยโดดเด่นขึ้นมาได้
- Base44 — สมุดบันทึกที่สว่างไสวด้วยแสงแดด พร้อมปากกาเขียนสีเขียวมะนาว
- Supahub — แสงแดดอ่อนๆ ส่องกระทบสันเขาสีม่วง ภาพวาดส่วนใหญ่เป็นสีขาวโปร่งสบาย ส่องสว่างด้วยดวงอาทิตย์สีม่วงสดใสเพียงดวงเดียว ประดับด้วยทรงกลมไล่ระดับสีที่สาดส่องลงในพื้นที่ว่าง และรูปทรงเรขาคณิตโค้งมนขนาดใหญ่ที่ทำให้แต่ละพื้นผิวมีความหนักแน่นน่าสัมผัส
- Raycast — ศูนย์บัญชาการเที่ยงคืน, ปะการังนีออน
- Dimension — โต๊ะทำงานที่ส่องสว่างยามพลบค่ำ พร้อมแผงกระจกฝ้า
- Wiza — หอดูดาวสำรวจแร่ในยามพลบค่ำ ปกคลุมไปด้วยหมอกสีม่วงอ่อน
- Paste — โคมไฟสีเหลืองอำพันตั้งอยู่บนพื้นหินอ่อนสีขาว โลโก้ไล่ระดับสีโทนอบอุ่นของแบรนด์ลอยอยู่ท่ามกลางพื้นที่สีขาวกว้างใหญ่ ราวกับเป็นหน้าต่างบานเดียวที่ส่องสว่างท่ามกลางอาคารที่ปกคลุมไปด้วยหิมะ
- Reworkd — แสงแดดอ่อนๆ บนแผนภาพผลิตภัณฑ์เป็นสีเดียวที่โดดเด่น นอกจากปุ่มการทำงานและหัวข้อที่มีการไล่ระดับสีอยู่ด้านบนแล้ว
- Reflect Notes — อวกาศสีม่วงระยิบระยับราวกับดวงดาว คือหอดูดาวมืดมิด ที่ซึ่งโน้ตดนตรีล่องลอยราวกับกลุ่มดาวท่ามกลางฉากหลังอันว่างเปล่าสีครามเกือบดำ
- Ameba — ห้องควบคุมเวลาเที่ยงคืน – แสงสีฟ้าเรืองรองสะท้อนอยู่ภายในแผงกระจกฝ้า
- Todoist — พื้นที่ทำงานที่สว่างไสวด้วยแสงแดด พร้อมสมุดบันทึกกระดาษ – โต๊ะสีครีมโทนอบอุ่น บันทึกด้วยหมึก และปากกาสีแดงหนึ่งด้าม