Column
สมุดบัญชีสีน้ำเงินเข้มใต้แสงอรุณอันเย็นสบาย
Column ใช้สีน้ำเงินเข้มแบบทางการบนพื้นหลังสีขาวเกือบทั้งหมด ทำให้หน้าเว็บดูเหมือนเป็นพื้นผิวผลิตภัณฑ์ทางการเงินที่แข็งแกร่งเป็นอันดับแรก และเป็นพื้นที่สำหรับนักพัฒนาเป็นอันดับสอง สีของแบรนด์ไม่ใช่สีเดียว แต่เป็นคู่สีที่ประสานกัน—สีน้ำเงินเข้ม #111a4a สำหรับโครงสร้างที่จริงจัง สีเขียวมิ้นต์ #44b48b สำหรับข้อมูลและโค้ด—โดยมีสีส้มโทนอบอุ่น (#ec652b) เพียงสีเดียวสงวนไว้สำหรับพื้นผิวที่เน้นความเข้มสูง เช่น บัตร Brex แบบอักษรที่ใช้หลักคือ SuisseIntl ซึ่งเป็นแบบอักษร sans serif ทรงเรขาคณิตที่ใช้กับน้ำหนักตัวอักษรทั้งหมดตั้งแต่ 300 (ลิงก์) ถึง 600 (แสดงผล) ทำให้ระบบมีสไตล์ที่ประณีตและเป็นทางการ ซึ่งบริษัทฟินเทคส่วนใหญ่ขาดไป บัตรต่างๆ ลอยอยู่บนพื้นผิวสีขาวขนาดใหญ่พร้อมเงาที่ซ้อนกันอย่างละเอียดอ่อน องค์ประกอบอินเทอร์เฟซส่วนใหญ่เป็นแบบแบน โดยมีความลึกปรากฏเฉพาะในส่วนที่บัตรควรให้ความรู้สึกเหมือนเป็นวัตถุจริง (วิดเจ็ตธุรกรรม แบบจำลองผลิตภัณฑ์) รหัสโปรแกรมและข้อมูลทางการเงินถูกนำเสนอในรูปแบบขาวดำ สีเขียวอมฟ้า ซึ่งเป็นสัญญาณบ่งบอกว่านี่คือธนาคารที่สร้างโดยวิศวกรเพื่อวิศวกร
โครงสร้างหน้าเว็บเป็นแบบเต็มความกว้าง จัดกึ่งกลางโดยมีระยะขอบด้านข้างกว้าง (64–15 ซม. บนเดสก์ท็อป) หน้าจอหลักมีเลย์เอาต์แบบแบ่งครึ่ง: หัวข้อและคำกระตุ้นการตัดสินใจจัดชิดซ้ายที่ระยะ 25 ซม. ในขณะที่วิดเจ็ตธุรกรรมแบบลอยตัววางอยู่ทางด้านขวาที่ระยะ 55 ซม. บนพื้นหลังแผนที่แบบฮาล์ฟโทน ด้านล่างหน้าจอหลัก ส่วนต่างๆ จะสลับกันระหว่างสีขาว (4 ซม.) และสีอ่อน (5 ซม.) โดยมีช่องว่างแนวตั้ง 6 ซม. เนื้อหาจัดเรียงตามตาราง 6 คอลัมน์เดียว: บล็อกข้อความใช้พื้นที่ 4 คอลัมน์ (7 ซม.) การ์ดรูปภาพ/ผลิตภัณฑ์ใช้พื้นที่ 5–6 คอลัมน์ โดยมีการเยื้องจากตารางอย่างจงใจ ส่วนที่อธิบายคุณสมบัติใช้เลย์เอาต์ 2 คอลัมน์: ข้อความอยู่ทางซ้าย ผลิตภัณฑ์อยู่ทางขวา ส่วนสถิติความน่าเชื่อถือแบ่งออกเป็นตาราง 4 คอลัมน์ตลอดความกว้างของหน้า โลโก้ลูกค้าอยู่ตรงกลางแถวเดียวโดยมีช่องว่าง 48 พิกเซล ส่วนท้ายมีเลย์เอาต์สองคอลัมน์ที่กะทัดรัด แถบนำทางเป็นแถบด้านบนโปร่งใสสูง 62 พิกเซลที่อยู่คงที่บนหน้าจอหลัก โดยมีพื้นหลังเบลอและค่อยๆ เปลี่ยนเป็นสีขาวเมื่อเลื่อนหน้าจอ ไม่มีแถบด้านข้างหรือเมนูขนาดใหญ่ เมนูแบบดรอปดาวน์เป็นเพียงเมนูแบบลูกศรธรรมดา
รูปแบบภาพนั้นเรียบง่ายและใช้งานได้จริง—Column หลีกเลี่ยงการใช้ภาพถ่ายสต็อกโดยสิ้นเชิง ภาษาภาพสร้างขึ้นจากสามแหล่ง: (1) ภาพประกอบข้อมูล SVG โดยเฉพาะแผนที่โลกแบบฮาล์ฟโทนจุดๆ ที่แสดงผลด้วยการไล่ระดับสีจากสีครามเป็นสีส้มเป็นสีฟ้าอมเขียว สร้างบรรยากาศของระดับโลกอยู่เบื้องหลังองค์ประกอบหลัก (2) รูปแบบการ์ดผลิตภัณฑ์—วิดเจ็ตแบบลอยตัวที่แสดงยอดคงเหลือในบัญชี รายละเอียดการโอน และโค้ด JSON ในการ์ดสีขาวที่มีเงาที่โดดเด่น (3) การแสดงภาพแผนภูมิ—แผนภูมิแท่งหรือแผนภูมิแท่งสีฟ้าอมเขียวที่มีเส้นเชื่อมบางๆ ใช้ในส่วนความน่าเชื่อถือ/สถิติ แผนที่ฮาล์ฟโทนเป็นองค์ประกอบภาพที่เป็นเอกลักษณ์—การไล่ระดับสีจาก #d65620 (สีส้ม) ผ่านสีม่วง สีน้ำเงิน สีฟ้าอ่อน สีฟ้าอมเขียว และสีเหลือง สร้างสเปกตรัมที่รวมจานสีของแบรนด์ทั้งหมดไว้บนพื้นผิวตกแต่งเดียว ไอคอนมีความหนาของเส้นขอบสม่ำเสมอ 1.5–2 พิกเซลในเวอร์ชัน #232730 หรือ #a9acb6 พร้อมการเติมสีสำหรับสถานะที่ใช้งานอยู่ ไม่มีภาพถ่ายไลฟ์สไตล์ ไม่มีภาพเรนเดอร์ 3 มิติแบบนามธรรม ข้อจำกัดเหล่านี้เป็นไปโดยเจตนาเพื่อมุ่งเน้นความสนใจไปที่ตัวผลิตภัณฑ์และข้อมูล
จานสี
ยี่ห้อ
- Indigo Navy
#111a4a— สีหลักของแบรนด์ถูกใช้สำหรับปุ่มกระตุ้นการดำเนินการ (Call to Action) สถานะการนำทางที่ใช้งานอยู่ ส่วนหัว และโลโก้ สีม่วงน้ำเงินเข้มทำให้เว็บไซต์ดูแข็งแกร่งและหรูหรา เมื่อจับคู่กับข้อความสีขาว จะทำให้ปุ่มนั้นดูโดดเด่นที่สุดในเว็บไซต์ - Seafoam 600
#44b48b— สีของโค้ดและข้อมูลคือสีประจำแบรนด์สำหรับคีย์ JSON ตัวระบุ และค่าทางการเงินในโค้ดตัวอย่าง นอกจากนี้ยังใช้สำหรับจุดข้อมูลในแผนภูมิและการแสดงภาพการเติบโตด้วย - Seafoam 700
#167e6c— ใช้สีเขียวอมฟ้าที่เข้มกว่าสำหรับเส้นขอบ เส้นกราฟ และส่วนเน้นของไอคอนภายในบริบทข้อมูล เพื่อให้สีเขียวอมฟ้าดูโดดเด่นจากพื้นหลังที่เข้มกว่า - Seafoam 400
#94efb7— ส่วนของโค้ดที่ไฮไลต์ไว้นั้นประกอบด้วยค่าสตริง URL และเอนด์พอยต์ API ภายในบล็อกโค้ด สีเขียวอ่อนที่สุดที่ใช้เป็นสีฟอนต์แบบโมโนสเปซที่มีโทนสีเขียวเจืออยู่ - Deep Sea
#023247— เส้นขอบตกแต่งและสีเน้นของแผนภูมิเป็นสีเทอร์ควอยซ์เข้มที่ใช้ในภาพประกอบ SVG และการแสดงข้อมูลด้วยภาพ รวมถึงมาตราส่วนสีเขียวอมฟ้า
เป็นกลาง
- Midnight Ink
#011821— พื้นผิวสีเข้มและข้อความที่เน้น – พื้นหลังการ์ดผลิตภัณฑ์ ข้อความหลักมีความคมชัดสูง โทนสีออกไปทางเทาอมฟ้าอมเขียว ใช้เป็นพื้นฐานสำหรับโหมดมืดเมื่อต้องการกลับสีในส่วนใดส่วนหนึ่ง - Slate Ink
#3b3e47— ชื่อเรื่องรองและเนื้อหาหลักมีโทนสีที่อบอุ่นกว่าหมึกสีดำสนิทเล็กน้อย โดยใช้สีนี้ในกรณีที่สีดำสนิทดูจะรุนแรงเกินไปบนพื้นหลังสีอ่อน - Steel
#7c7f88— ข้อความหลักและข้อความลิงก์ใช้สีโทนอ่อนเป็นหลัก (ใช้ในข้อความหลัก 245 ครั้ง) เป็นสีเทาอมฟ้าที่เป็นกลาง ให้ความรู้สึกสงบ ไม่ใช่ภาพที่ซีดจาง - Fog
#a9acb6— โครงร่างไอคอน เส้นขอบระดับที่สาม และข้อความตัวอย่าง ใช้สีเทาปานกลางเพื่อแยกข้อความโดยไม่แย่งความโดดเด่นจากข้อความ - Mist
#cbcccf— ข้อความหลัก—ลายเซ็น คำปฏิเสธความรับผิดชอบ และข้อความขนาดเล็ก—สามารถอ่านได้ชัดเจนบนพื้นหลังสีขาว แต่ดูไม่เด่นชัดนักเมื่อมองด้วยตาเปล่า - Silver Lining
#e3e4e8— ขอบการ์ด ขอบช่องป้อนข้อมูล เส้นแบ่ง สีที่ดูเรียบง่ายแต่มีโครงสร้างนี้ใช้ในบริเวณที่ต้องการแยกพื้นผิวสองส่วนออกจากกันโดยไม่ให้เกิดเงา
การจัดพิมพ์
จาก 10 ถึง 60 พิกเซล · 10 ขั้นตอน
- SuisseIntl — ทดแทน: Inter · โครงร่าง 300, 400, 500, 600 · ฟอนต์หลัก – ใช้สำหรับหัวข้อทั้งหมด เนื้อหาหลัก ปุ่ม การนำทาง ลิงก์ และข้อความในการ์ด ฟอนต์ sans serif รูปทรงเรขาคณิตที่เป็นเอกลักษณ์ทำให้ Column มีสไตล์การนำเสนอที่โดดเด่น แตกต่างจากบริษัทฟินเทคอื่นๆ ที่ใช้ฟอนต์ Inter-only เท่านั้น น้ำหนักตัวอักษรคือ 600 ที่ขนาด 52–60 พิกเซลสำหรับหัวข้อ 500 สำหรับหัวข้อย่อย 400 สำหรับเนื้อหาหลัก และ 300 สำหรับลิงก์ที่มีความสำคัญต่ำ
- SuisseIntlMono — ทดแทน: JetBrains Mono · โครงร่าง 400 · ฟอนต์แบบ Monospaced ที่คล้ายกับ SuisseIntl ใช้สำหรับป้ายกำกับทางเทคนิค ตัวระบุ API และข้อมูลที่ฝังอยู่ในองค์ประกอบ UI ฟอนต์นี้รักษาอัตราส่วนเดียวกันกับ SuisseIntl ดังนั้นข้อความแบบ Monospaced และแบบ Proportional จึงจัดเรียงได้อย่างถูกต้องในบริบทที่ผสมผสานกัน
- SFMono — ทดแทน: Fira Code · โครงร่าง 400 · การแสดงตัวอย่างโค้ด – แสดงในรูปแบบตัวอย่าง JSON และบล็อกเอกสาร API โดยใช้เฉดสีเขียวอ่อนเพื่อแยกความแตกต่างระหว่างโค้ดและข้อความในส่วนติดต่อผู้ใช้
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | เฉลี่ย |
| ขั้นตอนพื้นฐาน | 8px |
| รัศมีปุ่ม | 8px |
| รัศมีการ์ด | 8px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 72px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Column และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- dope.security — สถานีปลายทางเที่ยงคืนพร้อมสัญญาณไฟสีม่วง
- Leonardo — แกลเลอรี่บรรณาธิการแบบกลับหัวกลับหาง พิพิธภัณฑ์ที่มีผนังสีดำซึ่งพาดหัวสีม่วงทำหน้าที่เป็นงานศิลปะบนผนัง และภาพบุคคลที่สร้างขึ้นโดย AI แขวนเรียงกันเป็นตารางหนาแน่นอยู่ด้านล่าง
- VEED — ผนังแกลเลอรี่สีขาวประดับด้วยปุ่มไฟสีเขียวนีออน
- Craft Docs — ภาพตัดต่อดิจิทัลสำหรับทำสมุดภาพ ดีไซน์คล้ายกับสมุดภาพที่ใส่ใจรายละเอียดและสัมผัสได้ โดยที่บันทึกดิจิทัลที่มีโครงสร้างผสานเข้ากับพื้นผิวที่อ่อนนุ่มและเป็นธรรมชาติ
- Letter — หอศิลป์ส่วนตัวที่จัดแสดงสิ่งประดิษฐ์แวววาวจากห้องเก็บรักษา พื้นที่จัดแสดงที่มีผนังสีดำซึ่งมีพาดหัวข่าวแบบมีเชิงลอยอยู่เหนือประติมากรรมโครเมียมบนผนังสีของหอศิลป์
- Railway — รถไฟด่วนเที่ยงคืนแห่งจักรวาล การเดินทางอันสงบและน่าตื่นเต้นผ่านห้วงอวกาศอันมืดมิดและเต็มไปด้วยดวงดาว โดยมีสัญญาณนำทางที่ชัดเจน
- Garden Eight — บทความบรรณาธิการขนาดมหึมาบนกระดาษสีครีม หัวข้อข่าวแบบมีเชิงขนาด 215 พิกเซลตั้งอยู่โดดเดี่ยวบนพื้นหลังสีครีมอบอุ่น ล้อมรอบด้วยรูปทรงประติมากรรมลอยตัวและพื้นที่ว่างที่ชวนให้นึกถึงอากาศริมทะเล—หน้ากระดาษนี้ให้ความรู้สึกเหมือนปกหนังสือรวมภาพศิลปะมากกว่าแผงหน้าปัดรถยนต์
- Steep — การวิเคราะห์แบบอักษร Serif บนกระดาษอุ่น
- ElevenLabs — ภาพถ่ายเชิงสารคดีในโทนสีครีมอบอุ่น พร้อมหัวข้อข่าวที่ไม่ฉูดฉาด สมุดบันทึกสไตล์เบาเฮาส์—กระดาษสีเปลือกไข่ หมึกสีดำ และสีม่วงและสีส้มเพียงเล็กน้อยสำหรับตกแต่งเพื่อแสดงสินค้า
- Awesomic — แผ่นตาข่ายสังกะสีสำหรับงานบรรณาธิการ พร้อมเครื่องหมายวรรคตอนสีส้มที่ชวนให้นึกถึงกระดาษโปรย
- Monad — บทบรรณาธิการวารสารทางเทคนิคเกี่ยวกับกระดาษหนังอุ่น
- AI for Business — โชว์รูมสำหรับการถ่ายภาพสไตล์บรูทาลิสต์ในโทนสีเทาอบอุ่น