OZARIAM BRAND SYSTEM / VERSION 02

Explore beyond.
Build with clarity.

ความล้ำที่ไม่ซับซ้อน ความยิ่งใหญ่ที่สื่อสารได้ชัดเจน
เอกลักษณ์อวกาศ สีเงิน–น้ำเงิน และตัวอักษรที่แยกหน้าที่อย่างชัดเจน

01 /

Identity & atmosphere

ใช้โลโก้ที่เลือกไว้เป็นหัวใจของแบรนด์ ให้ดาว วงโคจร และแสงสีเงินสร้างความรู้สึกของการสำรวจ ไม่เปลี่ยนรูปร่างโลโก้ตามฟอนต์ของเว็บไซต์

02 /

Color system

พื้นขาวเย็น / น้ำเงินเที่ยงคืน / เงินอมฟ้า — สีเนื้อหาปรับพร้อมธีม ส่วนแสงเรืองใช้เฉพาะจุดที่ต้องการเน้น

03 /

Typography

ตั้งค่าฟอนต์ทั้งสามชุดไว้ใน HTML แล้ว โดยโหลดผ่าน Google Fonts เมื่อเชื่อมต่ออินเทอร์เน็ต หากโหลดไม่ได้ เบราว์เซอร์จะใช้ฟอนต์สำรอง

THAI DISPLAY / 400–600

Kanit

ค้นพบ
ความเป็นไปได้

หัวข้อภาษาไทยและปุ่ม ใช้น้ำหนัก 500 สำหรับ Hero และ 400–500 สำหรับหัวข้อรอง ไม่เพิ่มระยะห่างระหว่างตัวอักษรไทย

ENGLISH & DATA / 400–700

Space Grotesk

Aa 012
ERP + AI

ชื่อบริการภาษาอังกฤษ หัวข้อสั้น และตัวเลข น้ำหนัก 500–700 ใช้ letter-spacing ติดลบเล็กน้อยเฉพาะหัวข้อภาษาอังกฤษ

THAI BODY / 400–600

IBM Plex Sans Thai

ออกแบบ
เพื่อใช้งานจริง

คำอธิบาย เนื้อหาการ์ด ฟอร์ม และบทสนทนา ใช้ขนาดหลัก 14–16px พร้อม line-height 1.75–1.9

04 /

Type hierarchy

HERO / 34–50px
Kanit 500 · line-height 1.26

เทคโนโลยีที่เข้ากับธุรกิจคุณ

SECTION / 26–34px
Kanit 400–500

จากไอเดีย สู่ระบบที่ใช้งานได้

BODY / 14–16px
IBM Plex Sans Thai 400

เริ่มจากวิธีทำงานของทีม แล้วเลือกเครื่องมือที่เหมาะกับโจทย์ รับพัฒนาระบบเฉพาะทาง หรือเช่าใช้รายเดือน พร้อมเชื่อมต่อข้อมูลและออกแบบขั้นตอนการทำงานร่วมกัน

EYEBROW / 9–10px
Space Grotesk 600 · 0.21em

TECHNOLOGY FOR A BRIGHTER TOMORROW

05 /

Shape, light & actions

มุมมนที่มีความแม่นยำ

การ์ดมุมมน 12–18px ขอบ 1px จัดแนวให้เป็นระบบ ปุ่มหลักเป็น Pill เนื้อหาบนพื้นผิวทึบ ไม่ใช้ backdrop blur มารบกวนการอ่าน

SOFT GEOMETRY / PRECISE ALIGNMENT

ให้แสงทำหน้าที่นำสายตา

ใช้แสงฟ้า–เงินกับโลโก้ ปุ่มหลัก และขอบตัวอย่างระบบ ไม่ทำให้ข้อความทั้งหมดเรืองแสง และไม่วางเนื้อหายาวบนภาพอวกาศที่มีรายละเอียดมาก

SILVER LIGHT / QUIET SURFACES

ดูบริการทั้งหมด →

06 /

Developer tokens

แก้สี ฟอนต์ และแสงที่ไฟล์ brand.css โดยไม่ต้องเปลี่ยนการทำงานของ app.js และ orb.js

:root {
  --display: 'Kanit', 'IBM Plex Sans Thai', sans-serif;
  --font: 'IBM Plex Sans Thai', 'Noto Sans Thai', sans-serif;
  --latin: 'Space Grotesk', 'IBM Plex Sans Thai', sans-serif;
  --heading: #071b44;
  --primary: #0666ef;
  --radius: 16px;
}
[data-theme="dark"] {
  --bg: #030916;
  --surface: #071222;
  --heading: #f0f6ff;
  --primary: #76caff;
}

มือถือ: อ่านเป็นลำดับจากบนลงล่าง • เคารพ prefers-reduced-motion • เอฟเฟกต์ไม่บังข้อความ • ปุ่มหลักมี focus ที่มองเห็นได้

Explore beyond.Build with clarity.