Design System

ระบบออกแบบของ AI Agent Academy — neo-brutalist bold edutech ขอบ 2px หนา เงา offset hard สีเดียวกับขอบ ปุ่ม pill ชัดเจน ออกแบบให้สลับธีมและมืด/สว่างได้ทาง CSS variables

🎨 สลับธีม / โหมด

ทุกตัวอย่างด้านล่างเปลี่ยนสีตามธีมที่เลือก

ธีมทั้งหมด

3 template พร้อม dark mode — เลือกจาก `[data-theme="…"]` + `.dark` class บน `<html>

Bold (default)

Orange + Rose, ส้มสด neo-brutalist

Ocean

Cyan + Emerald, ฟ้าเขียวเย็นสบาย

Grape

Violet + Fuchsia, ม่วงหรู

Semantic Tokens

ไม่ hardcode hex ใน component — ใช้ Tailwind utility (bg-card,text-muted,border-border) ค่าจริงอยู่ใน themes/*.css

Token	CSS Var	Light	Dark
Background	--background	#fffdf5	#0b1020
Foreground	--foreground	#15161c	#f8fafc
Card	--card	#ffffff	#141a2e
Card Foreground	--card-foreground	#15161c	#f8fafc
Muted	--muted	#6b7280	#94a3b8
Muted Surface	--muted-surface	#f4f1e9	#141a2e
Border	--border	#15161c	#2f3855
Ring	--ring	#818cf8	#818cf8
On Brand	--on-brand	#ffffff	#ffffff

Status Colors

Success#15803d

Warning#b45309

Error#b91c1c

Brand Ramp

50→900 ใช้ใน UI ตามระดับความเด่น 500 = primary button

100

200

300

400

500

600

700

800

900

Typography

Noto Sans Thai variable — น้ำหนัก 400–900 ครอบคลุมทั้ง body และ heading

H1 — หน้า Hero

เรียนรู้ AI กับเรา

H2 — Section

เคล็ดลับที่ dev ใช้จริง

H3 — Card title

ใช้ Copilot เขียน React Components

Body — อ่านง่าย

รวมเคล็ดลับใช้ AI ทำงานให้เร็วขึ้น เขียน prompt ให้แม่น เครื่องมือฟรี และไอเดียหารายได้ — อ่านฟรีทั้งหมด

Small / Muted

อ่าน 3 นาที · 1,234 ตัวอักษร

Badge / Label

เคล็ดลับเด็ด

Buttons

Pill (rounded-full), 2px border, 3D shadow offset, hover lift, active press

VARIANTS

SIZES

STATES

WITH ICON

USAGE

<button className="btn btn-primary">ปุ่มหลัก</button>
<button className="btn btn-secondary">ปุ่มรอง</button>
<button className="btn btn-sm btn-accent">เล็ก + accent</button>
<Link href="/login" className="btn btn-primary">เข้าสู่ระบบ</Link>

Cards

3 รูปแบบ — มี/ไม่มีเงา, hover lift

.card

มี shadow offset 4px

.card-flat

ไม่มี shadow

.card.lift

hover แล้วยก — ใช้กับการ์ดลิงก์

<!-- Lifted card -->
<div className="card lift group flex flex-col overflow-hidden p-0">
  <div className="flex flex-1 flex-col p-5">
    <h3 className="text-lg font-extrabold">Title</h3>
    <p className="mt-2 line-clamp-3 flex-1 text-sm text-muted">...</p>
  </div>
</div>

Badge

inline-flex pill บาง ติด .badge

เคล็ดลับเด็ดAIใหม่!ลูกค้า

<span className="badge bg-card text-foreground">
  <Lightbulb className="size-3.5" /> เคล็ดลับ
</span>

Form Input

ใช้ .input + .btn ประกอบกัน

อีเมล

Modal

React Portal → document.body, close ด้วย Escape / backdrop click / ปุ่ม X

Theme Switcher

Zustand persist → localStorage, blocking inline script ก่อน first paint กัน FOUC

Spacing & Layout

Tailwind scale (0.25rem step), page max-w-[4-6]xl, card padding p-5

Page container

px-4 sm:px-6 lg:px-8 px-4 sm:px-6 py-10

หน้าส่วนใหญ่ใช้ `max-w-6xl` + px-4/6

Narrow content

mx-auto max-w-3xl

Tip detail, community

Card grid

grid gap-5 sm:grid-cols-2 lg:grid-cols-3

Tips, courses, products

Section spacing

mt-12

ระหว่าง section ในหน้า

Card padding

p-5

padding ใน card

Stack gap

flex flex-col gap-3

flex stack

Live Example: Tip Card

ยกตัวอย่าง TipCard จริงที่ใช้ design system ทั้งหมด

เคล็ดลับเด็ด

ใช้ Copilot เขียน React Components ให้เร็วขึ้น

วิธีใช้ GitHub Copilot เขียน React component, custom hooks, และ test ได้ในไม่กี่วินาที

อ่าน 3 นาทีอ่านต่อ →

CSS Architecture

public/styles/
├── index.css          # @import tailwind + theme + layer base/components
├── theme.css          # Tailwind v4 @theme inline mapping (var() only)
└── themes/
    ├── bold.css       # Default — Indigo/Amber, cream/black
    ├── ocean.css      # Cyan/Emerald
    └── grape.css      # Violet/Fuchsia

ไฟล์ธีมให้ CSS variables ทั้งหมด
theme.css map var → Tailwind utility
component layer (.btn, .card, .badge, .input) ใช้ var() ล้วน
→ สลับธีมได้แค่เปลี่ยน [data-theme="…"]

Quick Reference

คลิก CSS var เพื่อคัดลอก