แบรนด์
แบรนด์ของ Posty รวมไว้ในหน้าเดียว
ทุกอย่างที่พาร์ตเนอร์ เอเจนซี หรือนักข่าวต้องใช้เพื่อนำ Posty ไปลงหน้าสื่อ ทั้งครอบครัวมาสคอต ชุดไอคอน ภาพที่เราใช้จริง โทเคนสี และฟอนต์ หยิบไปใช้ได้ตามต้องการ กติกาด้านล่างคือสิ่งเดียวที่เราขอ
95 ไฟล์ · 24.8 MB · design tokens v1.0 · สร้างใหม่จากรีโพของเราทุกครั้งที่ดีพลอย
โลโก้และไอคอนแอป
Puff คือสัญลักษณ์ของ Posty โดย mascot/cloud-default.png เป็นโลโก้หลัก ส่วนโฟลเดอร์ app-icon/ คือไทล์สี่เหลี่ยมสำหรับสโตร์ favicon และรูปโปรไฟล์ กรุณาย่อขยายตามสัดส่วน และเว้นพื้นที่ว่างรอบด้านอย่างน้อยครึ่งหนึ่งของความสูง Puff
apple-touch-icon.png180×180 · 37.2 kBicon-192.png192×192 · 41.7 kBicon-512.png512×512 · 270.2 kBicon.png64×64 · 6.8 kBapp-icon.png1024×1024 · 789.4 kBcloud-default.png1024×1024 · 375.3 kB
Puff แยกตามสีหน้า
สัญลักษณ์เดิมในทุกอารมณ์ที่เราวาดไว้ เลือกหนึ่งอย่างต่อหนึ่งหน้าจอ สถานะว่าง หน้ายืนยัน และหน้าข้อผิดพลาดต่างมีสีหน้าที่เหมาะกัน อย่าผสมสองสีหน้าในองค์ประกอบเดียว
cloud-cool.png1024×1024 · 389.8 kBcloud-happy.png1024×1024 · 381.5 kBcloud-love.png1024×1024 · 402.8 kBcloud-sleepy.png1024×1024 · 445.1 kBcloud-sparkle.png1024×1024 · 413.2 kBcloud-surprised.png1024×1024 · 385.2 kBcloud-wink.png1024×1024 · 395 kB
เพื่อนของ Puff
ตัวละครที่เหลือใช้ภาษากายแบบเดียวกับ Puff และปรากฏบนการ์ดบล็อก ภาพแชร์ และสถานะว่าง ทุกตัวละครมีชุดสีหน้าเหมือนกัน
Beat
beat-cool.png1024×1024 · 324.5 kBbeat-default.png1024×1024 · 305.7 kBbeat-happy.png1024×1024 · 324.8 kBbeat-sleepy.png1024×1024 · 315.9 kBbeat-surprised.png1024×1024 · 310.5 kBbeat-wink.png1024×1024 · 312.6 kB
Blab
blab-cool.png1024×1024 · 302.1 kBblab-default.png1024×1024 · 274.9 kBblab-happy.png1024×1024 · 289.7 kBblab-sleepy.png1024×1024 · 294.1 kBblab-surprised.png1024×1024 · 282.1 kBblab-wink.png1024×1024 · 285.3 kB
Penny
penny-cool.png1024×1024 · 317 kBpenny-default.png1024×1024 · 295.9 kBpenny-happy.png1024×1024 · 302.3 kBpenny-sleepy.png1024×1024 · 296.3 kBpenny-surprised.png1024×1024 · 297.9 kBpenny-wink.png1024×1024 · 285.4 kB
Tap
tap-cool.png1024×1024 · 282.2 kBtap-default.png1024×1024 · 252.6 kBtap-happy.png1024×1024 · 270.4 kBtap-sleepy.png1024×1024 · 266.1 kBtap-surprised.png1024×1024 · 256.2 kBtap-wink.png1024×1024 · 264.3 kB
Twinkle
twinkle-cool.png1024×1024 · 297.9 kBtwinkle-default.png1024×1024 · 276.5 kBtwinkle-happy.png1024×1024 · 286.1 kBtwinkle-sleepy.png1024×1024 · 285.6 kBtwinkle-surprised.png1024×1024 · 286.6 kBtwinkle-wink.png1024×1024 · 286.6 kB
Zip
zip-cool.png1024×1024 · 388.8 kBzip-default.png1024×1024 · 377.4 kBzip-happy.png1024×1024 · 376.9 kBzip-sleepy.png1024×1024 · 379.2 kBzip-surprised.png1024×1024 · 378.3 kBzip-wink.png1024×1024 · 381.2 kB
ฉากและพร็อพ
Puff ถือของ ทั้งเหรียญ หัวใจ ดาว ปุ่มเล่น รวมถึงภาพหมู่และดาวตก ใช้ชุดนี้เมื่อสีหน้าเพียงอย่างเดียวยังบอกไม่ได้ว่าหน้าจอกำลังทำอะไร
friend-bubble.png1024×1024 · 281.3 kBfriend-coin.png1024×1024 · 276.9 kBfriend-heart.png1024×1024 · 311.9 kBfriend-play.png1024×1024 · 253.1 kBfriend-star.png1024×1024 · 281.9 kBfriends-group.png1024×1024 · 327 kBshooting-star.png1024×1024 · 365.7 kB
ไอคอนแก้ว
ชุดไอคอนทรงมนผิวคล้ายแก้ว ให้ความรู้สึกเดียวกับมาสคอต ไอคอนเป็นเพียงองค์ประกอบตกแต่ง ควรใช้คู่กับข้อความกำกับเสมอ และอย่าให้ไอคอนสื่อความหมายเพียงลำพัง
glass-bell.png640×640 · 167.8 kBglass-bolt.png640×640 · 143.3 kBglass-camera.png640×640 · 267.2 kBglass-chat.png640×640 · 241.9 kBglass-check.png640×640 · 226 kBglass-cloud.png640×640 · 184.1 kBglass-coin.png640×640 · 247.8 kBglass-crown.png640×640 · 225.1 kBglass-fire.png640×640 · 185.4 kBglass-gift.png640×640 · 203.3 kBglass-heart.png640×640 · 202.1 kBglass-megaphone.png640×640 · 205 kBglass-note.png640×640 · 181.3 kBglass-play.png640×640 · 201.8 kBglass-sparkle.png640×640 · 177.7 kBglass-star.png640×640 · 202.8 kB
ภาพถ่ายและภาพผลิตภัณฑ์
ภาพถ่ายและภาพผลิตภัณฑ์ที่ใช้บน posty.so อนุญาตให้ใช้ในข่าวและเอกสารพาร์ตเนอร์ที่เกี่ยวกับ Posty ภาพเหล่านี้ไม่ใช่ภาพสต็อก จึงใช้ประกอบเรื่องอื่นไม่ได้
blob-avatars.jpg1600×893 · 65 kBcompliance-contracts.jpg1200×805 · 101.9 kBcompliance-disclosures.jpg1200×805 · 100 kBcompliance-taxes.jpg1200×805 · 146.2 kBcreators-1.jpg900×1117 · 143.9 kBcreators-2.jpg900×1117 · 108.5 kBcreators-3.jpg900×1117 · 144.9 kBcreators-4.jpg900×1117 · 186.9 kBflow-reward-poster.jpg1200×900 · 26.5 kBflow-reward.png1600×1194 · 651.2 kBflow-source-poster.jpg1200×900 · 32.3 kBflow-source.png1600×1194 · 749.2 kBflow-track-poster.jpg1200×900 · 23.8 kBflow-track.png1600×1194 · 496.3 kBhero-creators-2.jpg1920×1071 · 343.8 kBhero-creators-3.jpg1920×1071 · 291.7 kBhero-creators.jpg1920×1071 · 291.6 kBhero-poster.jpg1920×1068 · 29.7 kBhero.jpg1920×1071 · 60.7 kBsticker-pack.jpg1600×1194 · 132.9 kBstory-1.jpg1200×896 · 125 kBstory-2.jpg1200×896 · 197.3 kBstory-3.jpg1200×896 · 199.7 kB
สี
อ่านตรงจาก design/tokens.css ซึ่งเป็นรายการโทเคนชุดเดียวที่ทั้งผลิตภัณฑ์ เว็บไซต์นี้ และแอปมือถือคอมไพล์มาจากที่เดียวกัน ถ้าสีใดไม่อยู่ในหน้านี้ แปลว่าไม่ใช่สีของ Posty
Blush — พื้นหลัง
--blush-50#FFF6F7--blush-100#FFEEF0--blush-200#FFDCE2--blush-300#FFC6D0--blush-400#FFA3B4
Sky — ใช้เสริมเท่านั้น
--sky-100#E6F4FF--sky-200#C9E8FF--sky-300#9DD6FF--sky-400#62BBFF--sky-500#2790E6--sky-600#1F7FD1
Rose — ปุ่มหลักเพียงหนึ่งเดียว
--rose-300#FFB3C1--rose-500#FF8098--rose-600#E8436B--rose-700#D93A5E
Ink — ข้อความทั้งหมด
--ink-900#2B2036--ink-700#5E5468--ink-500#75697F--ink-200#C9BFD3--ink-100#E9E4EC
สถานะ
--success#1B7A55--success-bg#E3F7EE--warning#8A5A00--warning-bg#FFF3D6--danger#B3273A--danger-bg#FFE5E7--info#1F7FD1--info-bg#E6F4FF
พื้นผิวและเส้นขอบ
--bg-warm#FFEEF0--bg-cool#E6F4FF--paper#FFFFFF--border-warm#F5D6DC--border-cool#CFE6F7
ไล่ระดับสี
--bg-hero--bg-section--mascot-body--mascot-eyes
ระดับเงา
--shadow-warm--shadow-cool--shadow-ink
ความโค้งมุม
8px12px16px24px999px
ความสูงของตัวควบคุม
- 48px
--control-h - 40px
--control-h-md - 32px
--control-h-sm
ตัวอักษร
ใช้ Fredoka สำหรับหัวเรื่อง Plus Jakarta Sans สำหรับเนื้อความ และ JetBrains Mono สำหรับตัวเลขและรหัส Posty ให้บริการสิบภาษา ระบบเขียนแต่ละแบบจึงถอยไปใช้ฟอนต์ทรงมนที่มีอักขระครบ สแต็กด้านล่างจะสลับตามแอตทริบิวต์ภาษาของหน้า
แบรนด์และครีเอเตอร์ รับเงินตรงเวลา
Fredokaหัวเรื่อง: 500, 600, 700 ใช้กับพาดหัวและเวิร์ดมาร์ก
.font-displayแบรนด์และครีเอเตอร์ รับเงินตรงเวลา
Plus Jakarta Sansเนื้อความ: 400, 500, 600, 700 ใช้กับทุกข้อความที่อ่าน
.font-bodyแบรนด์และครีเอเตอร์ รับเงินตรงเวลา
JetBrains Monoโมโน: 400, 500 ใช้กับตัวเลข รหัส และชื่อไฟล์
.font-monoลำดับฟอนต์
ฟอนต์สำรองของแต่ละระบบเขียน ตรงตามที่ประกาศไว้ในไฟล์โทเคน
--font-display'Fredoka', 'M PLUS Rounded 1c', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Baloo Bhaijaan 2', system-ui, sans-serif--font-body'Plus Jakarta Sans', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Arabic', 'Noto Sans Devanagari', system-ui, sans-serif--font-mono'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace
ขนาดตัวอักษร
--text-display64px--text-h144px--text-h232px--text-h324px--text-lg18px--text-md16px--text-label14px--text-caption12px
การใช้แบรนด์
สรุปสั้น ๆ Blush คือพื้นหลัง Ink คือข้อความ ส่วน Rose เก็บไว้ให้สิ่งเดียวที่คุณอยากให้คนกด
ควรทำ
- วาง Blush ไว้เป็นพื้นของทุกอย่าง จะเป็นสีเรียบหรือไล่ระดับแบบด้านบนก็ได้ เพราะเป็นทั้งพื้นหลังและตัวมาสคอต
- ใช้ Ink กับข้อความทุกชิ้น
- เก็บ Rose ไว้ใช้กับตาของมาสคอตและปุ่มหลักหนึ่งปุ่มต่อหนึ่งหน้าจอ และให้ข้อความบนปุ่มนั้นเป็น Ink
- ใช้ Sky เป็นสีเสริมเท่านั้น ได้แก่ ลิงก์ ข้อมูล และคะแนนความน่าเชื่อถือ
- ทำให้ตัวควบคุมทุกชิ้นเป็นทรงแคปซูล พร้อมพื้นที่กด 44-48px
- เขียนข้อความเป็นตัวอักษร ไม่ใช่ฝังในภาพ เพื่อให้แปลเป็นสิบภาษาได้
ห้ามทำ
- ห้ามวาดใหม่ เปลี่ยนสี กลับด้าน หรือหมุนมาสคอต และห้ามใส่ข้อความลงไปในตัวมาสคอตเด็ดขาด
- ห้ามใช้ตัวอักษรสีขาวบน Rose
- ห้ามใส่ปุ่ม Rose สองปุ่มในหน้าจอเดียว
- ห้ามยืด ครอป ใส่เส้นขอบ หรือเติมเอฟเฟกต์ให้โลโก้ ให้ย่อขยายตามสัดส่วน
- ห้ามสร้างสี ความโค้งมุม หรือเงาที่ไม่มีอยู่ในรายการโทเคนด้านบน
- ห้ามส่งออกหรือครอปไฟล์ใหม่เอง บอกขนาดที่ต้องการมาได้เลย
ไม่มีสิ่งที่คุณต้องการใช่ไหม
ไฟล์เวกเตอร์ต้นฉบับ โลโก้แบบมีเวิร์ดมาร์ก การครอปแบบอื่น หรือทั้งชุดในไฟล์เดียว บอกเราแล้วเราจะส่งให้ และช่วยบอกด้วยว่าจะนำไปใช้ที่ไหน เราจะได้ตรวจเทียบกับกติกาด้านบน
hello@posty.so