Stripe
สมุดบัญชีที่เขียนด้วยหมึกสีครามบนกระจกฝ้า
Stripe ใช้ภาษาที่เกือบจะเป็นสีเดียวสำหรับเครื่องมือทางการเงิน: พื้นหลังสีขาวนวลเย็นตา หัวข้อสีน้ำเงินเข้ม แทบไม่มีองค์ประกอบโครเมียมตกแต่ง และสีครามสดใสเพียงสีเดียว (#533afd) ที่สามารถใช้เป็นเส้นขอบปุ่ม ลิงก์ หรือไอคอนได้ ตัวอักษรบางมาก โดยมีน้ำหนัก 300 พอยต์ แม้จะมีขนาด 56 พิกเซล ซึ่งให้ความรู้สึกเรียบง่ายอย่างมั่นใจมากกว่าที่จะดูเป็นทางการมากเกินไป ระยะห่างระหว่างตัวอักษรลดลงอย่างรวดเร็วเมื่อขนาดตัวอักษรใหญ่ขึ้น ปุ่มมีขนาดเล็ก เป็นรูปสี่เหลี่ยมจัตุรัส (4 พิกเซล) และใช้สีม่วงเป็นพื้นหลังหรือเส้นขอบสีม่วงที่บางที่สุด ระบบนี้หลีกเลี่ยงเงาโดยสิ้นเชิง ความลึกเกิดขึ้นจากการเปลี่ยนเฉดสีพื้นหลัง (ขาว → #f8fafd → #e5edf5 → เฉดสีม่วง) แทนที่จะใช้ความสูง อินเทอร์เฟซทั้งหมดทำงานเหมือนสมุดบัญชีหรือเทอร์มินัล: ข้อมูลหนาแน่น เส้นชัดเจน มีพื้นที่ว่างระหว่างส่วนต่างๆ อย่างกว้างขวาง และสีจะปรากฏขึ้นเฉพาะเมื่อจำเป็นต้องดำเนินการเท่านั้น
ความกว้างสูงสุดอยู่ที่ประมาณ 1320 พิกเซล สำหรับคอลัมน์เนื้อหาที่อยู่ตรงกลางบนพื้นขาว ส่วนหัว (Hero) เป็นบล็อกข้อความจัดชิดซ้ายขนาดเต็ม (56 พิกเซล) พร้อมปุ่มกระตุ้นการดำเนินการสองปุ่มอยู่ด้านล่าง ไม่มีภาพส่วนหัว—ตัวอักษรคือส่วนหัวนั่นเอง ส่วนต่างๆ จัดเรียงในแนวตั้งโดยมีช่องว่าง 96 พิกเซลเท่ากัน และตัวแบ่ง #e5edf5 ขนาด 1 พิกเซล ไม่มีแถบสีเข้ม/อ่อนสลับกัน แต่ละส่วนมีรูปแบบที่ซ้ำกัน: ชื่อส่วนขนาดเล็กเป็นตัวพิมพ์ใหญ่ทั้งหมด (สีควันบุหรี่ ขนาด 12 พิกเซล) จากนั้นเป็นหัวข้อขนาด 32-48 พิกเซล จากนั้นเป็นย่อหน้าขนาด 22 พิกเซล จากนั้นเป็นตารางการ์ดผลิตภัณฑ์ (3 คอลัมน์บนเดสก์ท็อป) หรือบล็อกข้อความ 2 คอลัมน์พร้อมภาพประกอบ โลโก้ของลูกค้าปรากฏในแถบแนวตั้งแคบๆ จัดชิดซ้าย ส่วนท้าย (Footer) เป็นแถบ #f8fafd กว้างหนึ่งแถบพร้อมรายการลิงก์หลายคอลัมน์ จังหวะโดยรวมช้า กระชับ และเน้นข้อความเป็นหลัก—ความหนาแน่นของข้อมูลต่ำ แม้ว่าความยาวในการเลื่อนจะยาวก็ตาม
ภาพประกอบมีความเรียบง่ายและเป็นแบบสารคดี ภาพถ่ายเต็มหน้าจะปรากฏเฉพาะในส่วนที่นำเสนอกรณีศึกษา (เช่น ภาพถ่ายทางอากาศเกี่ยวกับการจราจรสำหรับ Hertz) โดยถ่ายจากด้านบนหรือจากมุมที่น่าสนใจ ใช้สีธรรมชาติ ไม่มีการปรับแต่งสีหรือการใช้โทนสีคู่ ภาพหน้าจอของส่วนติดต่อผู้ใช้ของผลิตภัณฑ์จะถูกใช้ภายในบัตรข้อมูลคุณสมบัติ โดยแสดงผลด้วยมุมที่คมชัดและขอบที่ชัดเจน ไม่มีกรอบอุปกรณ์ โลโก้ของพันธมิตรจะแสดงด้วยสีของตนเองโดยไม่มีกรอบใดๆ ไม่มีภาพประกอบ ภาพเรนเดอร์ 3 มิติ หรือองค์ประกอบกราฟิกนามธรรมเพื่อการตกแต่ง ไอคอนมีความสม่ำเสมอ: ความหนาเส้น 1 และความหนาเส้น 2 บนพื้นหลังสีขาว พร้อมด้วยรูปทรงเรขาคณิต (ลูกศร เครื่องหมายถูก สัญลักษณ์เอกสาร) หน้าเว็บประกอบด้วยข้อความและพื้นที่ว่างเป็นหลัก ภาพใช้พื้นที่น้อยกว่า 3% ของพื้นที่ภาพทั้งหมด
จานสี
ยี่ห้อ
- Indigo Ink
#533afd— สีม่วงใช้สำหรับปุ่มที่เติมสี สถานะการนำทางที่เลือก และช่วงเวลาการเปลี่ยนแปลงที่ขับเคลื่อนด้วยการโฟกัส - Indigo Hover
#7389ff— สีม่วงใช้สำหรับเน้นลิงก์ แท็ก และวลีสั้นๆ ไม่ควรใช้เป็นสีหลักสำหรับข้อความกระตุ้นการกระทำ (Call to Action)
เป็นกลาง
- Midnight Ink
#061b31— ส่วนหัวเรื่องหลักและเนื้อหาหลักใช้สีดำเข้มเกือบสนิท โดยมีโทนสีฟ้าเย็นๆ เจืออยู่ ซึ่งเป็นพื้นฐานของระบบแบบอักษรทั้งหมด - Slate
#64748d— ข้อความสีเทาเน้นลิงก์ แท็ก และวลีสั้นๆ - Steel
#50617a— ข้อความเพิ่มเติมและเอกสารประกอบจะถูกจัดวางอยู่ระหว่างโทนสีเทาเข้มและสีม่วงอ่อนที่ใช้ในใบอนุญาตย่อย - Smoke
#839bc8— สำหรับหัวเรื่องขนาดใหญ่และข้อความประกอบ จะใช้สีม่วงอ่อน และจะไม่ใช้ในเนื้อหาหลักของย่อหน้า - Pure White
#ffffff— พื้นผิวหน้ากระดาษและส่วนที่นูนขึ้นของไพ่ คือพื้นหลังเริ่มต้นที่ใช้เป็นเกณฑ์วัดทุกสิ่งทุกอย่าง - Mist
#f8fafd— พื้นหลังส่วนท้ายและเส้นแบ่งส่วนใช้สีโทนเย็นที่ดูละมุนละไม ช่วยแบ่งพื้นที่โดยไม่มีเส้นขอบที่มองเห็นได้ชัดเจน
การจัดพิมพ์
จาก 12 เป็น 56 พิกเซล · 9 ขั้นตอน
- sohne-var — ทดแทน: Inter Tight (variable · โครงร่าง 300, 400 · แบบอักษรเดียวที่ใช้ในอินเทอร์เฟซทั้งหมดคือแบบอักษรสำหรับหัวข้อ ข้อความหลัก การนำทาง ปุ่ม และป้ายกำกับ แบบอักษรขนาด 300 ถูกใช้มากที่สุดแม้ในขนาดหน้าจอ 56 พิกเซล ซึ่งเป็นคุณลักษณะที่โดดเด่น: หัวข้อจะดูนุ่มนวลมากกว่าที่จะตะโกน สร้างความน่าเชื่อถือผ่านการควบคุมมากกว่าความดัง แบบอักษรขนาด 400 จะปรากฏเฉพาะในขนาด 14–16 พิกเซลสำหรับข้อความนำทางและปุ่ม ซึ่งจำเป็นต้องมีเส้นขอบเพิ่มเติมเพื่อให้สามารถอ่านได้ง่ายในขนาดที่เล็กกว่า
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | กว้างขวาง |
| ขั้นตอนพื้นฐาน | 8px |
| รัศมีปุ่ม | 4px |
| รัศมีการ์ด | 4px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 96px |
| ความกว้างของหน้า | 1320px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Stripe และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Ui — แผนการรักษาทางคลินิกบนกระดาษด้าน
- monopo saigon — แสงเรืองรองระยิบระยับราวกับของเหลวอยู่เบื้องหลังความเงียบงันของกองบรรณาธิการ—แกลเลอรีภาพถ่ายขาวดำที่ลอยล่องอยู่บนแสงหลอมเหลว
- Ventriloc — หอดูดาวบรรณาธิการที่รวบรวมข้อมูลบนกระดาษอุ่นๆ - ถ่านสีส้มเพียงก้อนเดียวที่เน้นย้ำความแม่นยำแบบขาวดำ
- Hyer Aviation — ยามพลบค่ำในห้องนักบินเหนือกระดาษปาร์ชเมนต์ ท้องฟ้าสีซีดในยามรุ่งอรุณบรรจบกับโลโก้ตัวอักษรแบบมีเชิงขนาดเท่าลำตัวเครื่องบิน และสีดินเผาโทนอบอุ่นเพียงสีเดียวช่วย打破ความเรียบง่ายแบบขาวดำ
- Family — ภาพประกอบจากนิทานบนกระดาษปาร์ชเมนต์สีครีม
- OFF+BRAND. — ทรงกลมเหลือบสีบนกระดาษปาร์ชเมนต์อุ่นๆ
- Geniestudio — สมุดบันทึกที่ใช้แสงอ่อนๆ ในตอนกลางวัน—แบบที่มีขอบกว้างและเส้นปากกาหนาๆ เพียงเส้นเดียว
- xAI — ครีมบำรุงผิวอุ่นๆ พร้อมยาเม็ดสีดำ
- Seed — สิ่งมีชีวิตภายใต้กระจกในห้องปฏิบัติการ
- Cosmos — ผนังแกลเลอรี่บุด้วยผ้าลินินและประดับด้วยภาพถ่ายโพลารอยด์
- Cal — ความเรียบง่ายแบบขาวดำที่ใช้งานได้จริง แนวทางที่คำนึงถึงมนุษย์ ระบบที่ให้ความสำคัญกับความชัดเจนและฟังก์ชันการใช้งานผ่านโทนสีขาวดำที่เข้มงวด แต่ลดทอนความเรียบง่ายลงด้วยตัวอักษรที่เป็นมิตรและรูปทรงโค้งมน
- T1 Energy — ภาพวาดโรงงานผลิตบนกระดาษหนังอุ่นๆ เป็นภาพขาวดำที่เงียบสงบ ซึ่งขนาดเชิงอุตสาหกรรมและการจัดวางตัวอักษรอย่างประณีตสะท้อนถึงเอกลักษณ์ของแบรนด์โดยรวม