
Mercury
ริมฝั่งเทือกเขาแอลป์ยามพลบค่ำ
ธีม Mercury ออกแบบโดยใช้สุนทรียภาพแบบธนาคารสไตล์แอลป์: พื้นหลังสีดำสนิท (#171721) สร้างบรรยากาศแบบภาพยนตร์และหอดูดาว โดยเนื้อหาต่างๆ ดูเหมือนการ์ดสีแกรไฟต์ที่สว่างกว่าเล็กน้อย อินเทอร์เฟซส่วนใหญ่เป็นแบบขาวดำ—ข้อความสีงาช้างบนพื้นสีดำสนิท โดยมีองค์ประกอบสีโคบอลต์สดใส (#5266eb) เพียงอย่างเดียวที่ใช้เฉพาะสำหรับการดำเนินการหลัก "เปิดบัญชี" การจัดวางตัวอักษรเป็นส่วนสำคัญในการแสดงออก: ฟอนต์แสดงผลแบบกำหนดเองขนาด 480 (ไม่หนาหรือบาง) จับคู่กับฟอนต์เนื้อหาขนาด 400 ที่ดูเรียบง่าย สร้างสไตล์ที่มั่นใจแต่ไม่ฉูดฉาด ส่วนประกอบต่างๆ แบนราบและไม่มีกรอบ โดยใช้รัศมีการ์ดสีแกรไฟต์ 12 พิกเซลและปุ่มควบคุมรูปทรงแคปซูลเพื่อกำหนดโครงสร้างแทนที่จะใช้เงา องค์ประกอบภาพถ่ายหลักซึ่งกินพื้นที่ทั้งหน้า—ภูเขาที่ปกคลุมด้วยหมอกตัดกับโต๊ะโดดเดี่ยว—กำหนดโทนก่อนที่อินเทอร์เฟซผู้ใช้จะเริ่มทำงาน และองค์ประกอบอื่นๆ ที่ตามมาก็ยังคงรักษาความมืดที่เงียบสงบและหรูหรานั้นไว้
เนื้อหาทั้งหมดได้รับการออกแบบในสไตล์สีเข้มแบบเต็มความกว้าง หน้าจอหลักเป็นภาพถ่ายขนาด 100 พิกเซลเต็มความกว้าง โดยมีหัวข้อหลัก ข้อความย่อย และแบบฟอร์มสำหรับเก็บข้อมูลอีเมลติดต่ออยู่ตรงกลาง (ความกว้างสูงสุดประมาณ 640 พิกเซล) ด้านล่างหน้าจอหลัก เนื้อหาจะถูกจัดเรียงเป็นส่วนๆ โดยมีความกว้างสูงสุด 1200 พิกเซล และระยะขอบแนวตั้ง 72 พิกเซล สลับกันระหว่างรูปแบบสองคอลัมน์ คือข้อความอยู่ทางซ้ายและรูปภาพอยู่ทางขวา และการ์ดรายละเอียดสินค้าแบบสามคอลัมน์ แถบนำทางเป็นแถบด้านบนโปร่งใสซ้อนทับบนหน้าจอหลัก ซึ่งเมื่อเลื่อนลงมาจะเปลี่ยนเป็นสีเข้มทึบคล้ายกระจกฝ้า (เบลอพื้นหลัง) ส่วนท้ายเป็นสีเข้มพร้อมข้อความหมายเหตุ จังหวะแนวตั้งมีความกว้างขวาง – ความหนาแน่นที่กว้างขวางพร้อมพื้นที่ว่างระหว่างส่วนต่างๆ มากมาย ไม่มีแถบนำทางด้านข้าง การนำทางทั้งหมดอยู่ที่แถบด้านบน
ส่วนหลักโดดเด่นด้วยภาพถ่ายภาพยนตร์ขนาดเต็มหน้าจอ—ภาพทิวทัศน์ที่สร้างบรรยากาศและสร้างแรงบันดาลใจ (ภูเขาที่ปกคลุมด้วยหมอก พื้นที่ทำงานอันเงียบสงบในธรรมชาติ)—ซึ่งนำเสนอการทำธุรกรรมทางการเงินในฐานะประสบการณ์ที่สงบและงดงาม ภาพถ่ายมีคุณภาพสูง สีไม่สดใสมากนัก มีโทนสีเย็น และมีเงาสีเข้มบางๆ ทับซ้อนอยู่เพื่อรักษาความชัดเจนของข้อความ ด้านล่างส่วนหลัก ภาพจะสลับกับภาพหน้าจอของส่วนติดต่อผู้ใช้ของผลิตภัณฑ์และพื้นหลังที่เป็นนามธรรมและสร้างบรรยากาศ ไม่มีภาพประกอบ ไม่มีไอคอนที่คล้ายกับงานศิลปะ—องค์ประกอบภาพเป็นภาพถ่ายหรือใช้งานได้จริงเท่านั้น รูปแบบไอคอนในส่วนติดต่อผู้ใช้ทั้งหมดเป็นแบบเส้น/สัญลักษณ์สีงาช้างที่เรียบง่าย ใช้ในการนำทาง ปุ่ม และองค์ประกอบแบบฟอร์ม
จานสี
ยี่ห้อ
- Cobalt
#5266eb— สีม่วงใช้สำหรับปุ่มที่เติมสี สถานะการนำทางที่เลือก และช่วงเวลาการเปลี่ยนแปลงที่ขับเคลื่อนด้วยการโฟกัส
เป็นกลาง
- Onyx Canvas
#171721— พื้นหลังหน้าหลัก, โอเวอร์เลย์พื้นฐานสำหรับหน้าจอหลัก, แคนวาสสำหรับส่วนท้ายและส่วนต่างๆ - Graphite Card
#1e1e2a— พื้นผิวที่ยกขึ้นของกระดาษแข็งและส่วนต่างๆ นั้นมีความบางกว่าผืนผ้าใบเล็กน้อย ทำให้เกิดการแบ่งแยกที่เรียบเนียน - Obsidian Button
#272735— การเติมสีปุ่มเพิ่มเติม พื้นหลังแบบฟอร์มที่ฝังอยู่ พื้นผิวโต้ตอบที่ไม่รบกวน - Slate Border
#70707d— แผ่นกั้นที่มีความหนาปานกลางและขอบเขตโครงสร้างระหว่างบล็อกเนื้อหา - Mist Border
#e2e3ed— เส้นขอบบางมาก แทบมองไม่เห็น ขอบปุ่มก็แทบมองไม่เห็น ขอบช่องป้อนข้อมูลก็แทบมองไม่เห็นเช่นกัน - เส้นขอบสีอ่อนบนพื้นหลังสีเข้ม - Ash Text
#c3c3cc— เนื้อหาหลัก, เนื้อหาเสริม, ป้ายกำกับเพิ่มเติม - โครงสร้างลำดับชั้นที่เรียบง่ายโดยไม่ลดทอนความสามารถในการอ่าน
การจัดพิมพ์
จาก 12 เป็น 65 พิกเซล · 9 ขั้นตอน
- arcadia — ทดแทน: Inter · โครงร่าง 360, 400, 420, 480 · ส่วนหลักและส่วนติดต่อผู้ใช้ - แบบอักษรสำหรับการนำทาง ข้อความหลัก ปุ่ม ช่องป้อนข้อมูล ป้ายกำกับ และข้อความเสริม โดยมีน้ำหนัก 400 สำหรับข้อความหลัก และ 480 สำหรับข้อความเน้น การใช้น้ำหนักระดับกลาง (360, 420, 480) แทนค่ามาตรฐาน (300/400/600) ทำให้แบบอักษร Mercury มีความสมดุลที่โดดเด่น ไม่หนา ไม่บาง แต่ดูลงตัวเสมอ
- arcadiaDisplay — ทดแทน: Söhne Breit · โครงร่าง 360, 480, 530 · แบบอักษรสำหรับหัวข้อและองค์ประกอบตกแต่งใช้ความหนา 480 สำหรับหัวข้อทุกขนาดตั้งแต่ 28px ถึง 65px ในขณะที่ความหนา 530 สงวนไว้สำหรับองค์ประกอบตกแต่งขนาดใหญ่ที่สุด ความสูงของบรรทัดต่ำ (1.1–1.2) และระยะห่างระหว่างตัวอักษรที่เป็นบวก (0.01–0.02em) ทำให้ข้อความตกแต่งดูมีมิติและกว้างขวางมากกว่าโครงสร้างที่บีบอัดเหมือนในข้อความบรรณาธิการ
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | เฉลี่ย |
| ขั้นตอนพื้นฐาน | 12px |
| รัศมีปุ่ม | 32px |
| รัศมีการ์ด | 12px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 72px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Mercury และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Origin Financial — หอศิลป์ยามเที่ยงคืนแห่งความหรูหราอันเงียบสงบ ห้องที่เงียบสงบเกือบมืดสนิท ที่ซึ่งตัวอักษรขนาดใหญ่แบบมีเชิง และแผงไฟสีสันสดใสเพียงไม่กี่แผง สร้างความรู้สึกว่าการเงินเป็นงานศิลปะที่ได้รับการคัดสรรมาอย่างพิถีพิถัน
- Air — ประติมากรรม "ท้องฟ้ายามเที่ยงคืนผ่านกระจก"
- Slash — ห้องนิรภัยเที่ยงคืนพร้อมสมุดบัญชีปิดทอง
- dope.security — สถานีปลายทางเที่ยงคืนพร้อมสัญญาณไฟสีม่วง
- Modal — เทอร์มินัลเรืองแสงในห้องเซิร์ฟเวอร์ที่มืดมิด - แหล่งกำเนิดแสงเพียงแหล่งเดียวคือแสงสีเขียวสดใส
- Giga — ขอบฟ้ายามเที่ยงคืนเหนือหินออบซิเดียนที่ปกคลุมด้วยน้ำค้างแข็ง
- Dovetail — ศูนย์ควบคุมพิมพ์เขียวเวลาเที่ยงคืน
- Dovetail — แบบแปลนภายใต้แสงจันทร์สีดำ—เส้นกราฟแทบมองไม่เห็น ตัวอักษรสีขาว และประกายสีม่วงหนึ่งดวง
- AgentQL — แสงเหนือเหนืออาคารผู้โดยสารในเวลากลางคืน
- Supabase — โปรแกรมแก้ไขโค้ดตอนเที่ยงคืนพร้อมจุดสีเขียวเรืองแสง—พัลส์สีเดียวบนทะเลฝุ่นถ่านหิน
- Changelog — แผงควบคุมหอดูดาวอยู่ด้านหลังกระจกสีเข้ม
- GitHub — แผงควบคุมอวกาศที่มีจุดควบคุมเรืองแสงชีวภาพ—พื้นที่ทำงานที่มืดมิดและสร้างบรรยากาศ โดยมีแสงสีเขียวเพียงจุดเดียวชี้บอกทิศทางไปข้างหน้า