ระบบดีไซน์

ตรวจ token และคอมโพเนนต์หลักก่อนเริ่มทำฟีเจอร์ มีเฉพาะธีมมืด

สี

แบรนด์

  • color.brand.primary#D6F115--color-brandbg-brand
  • color.brand.primary-foreground#111111--color-brand-foregroundtext-brand-foreground
  • color.brand.primary-hover#C4DD0F--color-brand-hoverbg-brand-hover
  • color.brand.primary-pressed#B2C80D--color-brand-pressedbg-brand-pressed

พื้นหลังและพื้นผิว

  • color.background.app#111111--color-appbg-app
  • color.surface.default#1B1B1B--color-surface-1bg-surface-1
  • color.surface.elevated#232323--color-surface-2bg-surface-2
  • color.surface.hover#2A2A2A--color-surface-3bg-surface-3

เส้นขอบ

  • color.border.default#333333--color-border-defaultborder-border
  • color.border.strong#454545--color-border-strongborder-border-strong

ข้อความ

  • color.text.primary#FFFFFF--color-text-primarytext-text-primary
  • color.text.secondary#B3B3B3--color-text-secondarytext-text-secondary
  • color.text.muted#808080--color-text-mutedtext-text-muted
  • color.text.disabled#606060--color-text-disabledtext-text-disabled

สีสถานะ

  • color.status.success#22C55E--color-status-successtext-status-success
  • color.status.warning#F59E0B--color-status-warningtext-status-warning
  • color.status.error#EF4444--color-status-errortext-status-error
  • color.status.info#3B82F6--color-status-infotext-status-info

ตัวอักษร

Inter, "Noto Sans Thai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif

  • Displaytext-display · 48pxภาพยนตร์สั้นหนึ่งนาที
  • หัวข้อ H1text-h1 · 32pxภาพยนตร์สั้นหนึ่งนาที
  • หัวข้อ H2text-h2 · 24pxภาพยนตร์สั้นหนึ่งนาที
  • หัวข้อ H3text-h3 · 18pxภาพยนตร์สั้นหนึ่งนาที
  • เนื้อหาขนาดใหญ่text-body-lg · 16pxเปลี่ยนไอเดียเรื่องราวให้เป็นรายการช็อตและพรอมต์ที่พร้อมคัดลอก
  • เนื้อหาtext-body · 14pxเปลี่ยนไอเดียเรื่องราวให้เป็นรายการช็อตและพรอมต์ที่พร้อมคัดลอก
  • ข้อความเล็กtext-small · 13pxเปลี่ยนไอเดียเรื่องราวให้เป็นรายการช็อตและพรอมต์ที่พร้อมคัดลอก
  • คำอธิบายสั้นtext-caption · 12pxเปลี่ยนไอเดียเรื่องราวให้เป็นรายการช็อตและพรอมต์ที่พร้อมคัดลอก
  • ปุ่มtext-button · 14pxเปลี่ยนไอเดียเรื่องราวให้เป็นรายการช็อตและพรอมต์ที่พร้อมคัดลอก

ระยะห่าง

  • space.1 · 4px
  • space.2 · 8px
  • space.3 · 12px
  • space.4 · 16px
  • space.6 · 24px
  • space.8 · 32px
  • space.12 · 48px
  • space.16 · 64px

มุมโค้ง

การเคลื่อนไหว

  • motion.duration.fast · 120ms · --motion-fast
  • motion.duration.standard · 200ms · --motion-standard
  • motion.duration.panel · 250ms · --motion-panel
  • motion.easing.standard · cubic-bezier(0.2, 0, 0, 1)

ปิดอนิเมชันอัตโนมัติเมื่อผู้ใช้ตั้งค่าลดการเคลื่อนไหว

ปุ่ม

ขนาด

กด Tab เพื่อดูกรอบโฟกัสสีหลัก

ช่องกรอกข้อมูล

ชื่อนี้แสดงในรายการโปรเจกต์

ใส่ตัวเลขตั้งแต่ 15 ถึง 180

เลือกประเภทช็อตก่อนดำเนินการต่อ

แท็บ

แท็บใช้กับมุมมองที่เท่าเทียมกันของข้อมูลชุดเดียว

ชิปและแท็ก

ทั่วไปที่เลือกผ่านควรตรวจต้องแก้ข้อมูลเส้นขอบแท็กแท็ก

สวิตช์ ช่องเลือก และตัวเลือก

การ์ด

เรื่องของกาแฟยามเช้า
1 ตอน · 3 ฉาก · 60 วินาที
ฉบับร่าง

ใช้ไป 0.42 จาก 5.00 ดอลลาร์

การ์ดที่เลือกอยู่
ขอบสีหลักบอกว่าถูกเลือก
อนุมัติแล้ว

สถานะ

  • ยังไม่เริ่ม
  • ฉบับร่าง
  • กำลังสร้าง
  • ตรวจไม่ผ่าน
  • รออนุมัติ
  • อนุมัติแล้ว
  • ล้าสมัย
  • ถูกแทนที่
  • ล็อกอยู่
  • ขนาดเล็ก
  • ยังไม่เริ่ม
  • ฉบับร่าง
  • กำลังสร้าง
  • ตรวจไม่ผ่าน
  • รออนุมัติ
  • อนุมัติแล้ว
  • ล้าสมัย
  • ถูกแทนที่
  • ล็อกอยู่
ล็อกอยู่3รายการที่ล็อก

ตัวแสดงขั้นตอน

เพิ่งเริ่มโปรเจกต์

ตัวอย่างสถานะผสม

ต้นทางล้าสมัย ขั้นตอนต่อจากนั้นไม่ควรดูเหมือนใช้ได้

ป็อปอัป เมนู และคำแนะนำ