Internal referencev3 · 2026-04-18

TNRR Design System

เอกสารอ้างอิงรวม design token, typography, component และ pattern ที่ใช้ใน TNRR AI Portal. ค่าทั้งหมดอ้างอิงจาก app/globals.css และ components/ui/* — ไม่ใช่คู่มือผู้ใช้ แต่สำหรับทีม designer + engineer.

กลับหน้าแรก Playground หลักการ & เหตุผล

หลักคิด

Overview

Ocean-blue brand + Teal AI accent + Coral warm tone — tokens ประกาศใน @theme เป็น CSS-first; Tailwind v4 ไม่มี config file แยก

Ocean + Teal + Coral

3 palette หลักสื่อสาร trust (ocean), AI (teal), action (coral) — semantic mapping ซ้อนทับ shadcn tokens

Thai-first typography

IBM Plex Sans Thai เป็น font ลำดับแรกใน :lang(th) + Inter สำหรับ Latin; fallback Noto Sans Thai

Base UI + CVA

Components ทั้งหมดใน components/ui/ ใช้ @base-ui/react + class-variance-authority — มี TNRR variants เพิ่มจาก shadcn ต้นฉบับ

Source of truth: app/globals.css (@theme tokens) + spec/v3/01_DESIGN_SYSTEM.md

Palette

Color tokens

คลิก swatch เพื่อคัดลอกค่า hex

Primary · Ocean Blue

brand

Teal · AI accent

Coral · Warm accent

Amber · Soft

Semantic

Neutral · Ink

Light ↔ Dark

Semantic mapping

shadcn-style tokens ที่ใช้กับ bg-primary, text-accent, border-border ฯลฯ — ค่าเปลี่ยนตาม theme

Token	Light	Dark	Note
--primary	`#1E5C8A`	`#5FADE0`	brand CTA
--secondary	`#EFF6FB`	`#1C1C20`	—
--accent	`#EEFDFB`	`#086F68`	teal tint
--muted	`#F0F1F3`	`#27272A`	—
--border	`#E4E4E7`	`#27272A`	—
--ring	`#14B8B0`	`#3DD4CB`	focus
--destructive	`#DC2626`	`#F87171`	—
--chart-1	`#1E5C8A`	`#1E5C8A`	—
--chart-2	`#0EA5A0`	`#0EA5A0`	—
--chart-3	`#E8734A`	`#E8734A`	—
--chart-4	`#F5B342`	`#F5B342`	—
--chart-5	`#7C3AED`	`#7C3AED`	—

Scale + Fonts

Typography

ลองเปลี่ยนข้อความตัวอย่างด้านบนเพื่อเห็นสัดส่วนจริง

Sans · body

Inter → Plex Thai

The quick brown fox jumps

--font-sans

Display / Thai

IBM Plex Sans Thai

ค้นพบงานวิจัยที่คุณต้องการ

--font-display

Mono

Geist Mono

const token = '--primary';

--font-mono

ข้อความตัวอย่าง

Utility	Size	Line	Weight	Preview
`text-display-xl`	44px	52px	700	คลังข้อมูลงานวิจัย Thai National Research Repository
`text-display-lg`	36px	44px	700	คลังข้อมูลงานวิจัย Thai National Research Repository
`text-display-md`	28px	36px	700	คลังข้อมูลงานวิจัย Thai National Research Repository
`text-heading-lg`	22px	30px	600	คลังข้อมูลงานวิจัย Thai National Research Repository
`text-heading-md`	18px	26px	600	คลังข้อมูลงานวิจัย Thai National Research Repository
`text-heading-sm`	16px	24px	500	คลังข้อมูลงานวิจัย Thai National Research Repository
`text-body-lg`	16px	28px	400	คลังข้อมูลงานวิจัย Thai National Research Repository
`text-body-md` body default	15px	26px	400	คลังข้อมูลงานวิจัย Thai National Research Repository
`text-body-sm`	13px	22px	400	คลังข้อมูลงานวิจัย Thai National Research Repository
`text-caption`	12px	18px	500	คลังข้อมูลงานวิจัย Thai National Research Repository
`text-overline` uppercase	11px	16px	600	คลังข้อมูลงานวิจัย Thai National Research Repository

Corner

Radii

ค่า radius ทั้ง 8 — ใช้ rounded-xs ถึง rounded-full เป็น Tailwind utility

--radius-xs

6px

--radius-sm

8px

--radius-md

12px

--radius

0.75rem (12px)

--radius-lg

20px

--radius-xl

28px

--radius-2xl

32px

--radius-full

9999px

Elevation

Shadows

ใช้ Tailwind utility shadow-xs..xl — มี token ambient shadow-glow (teal) และ shadow-cardh

--shadow-xs

--shadow-sm

--shadow-md

--shadow-lg

--shadow-xl

--shadow-glow

teal ambient

--shadow-cardh

card hover

Surfaces

Gradients

ใช้กับ hero, AI accent, stat card และ navbar top bar

--gradient-hero

--gradient-ai

AI panel wash

--gradient-ai-button

AI button

--gradient-accent-bar

navbar top bar

--gradient-stat

--gradient-card-glow

radial

Motion

Animations

3 animation หลักที่ใช้ทั่วแอป — คลิก Replay เพื่อดูอีกครั้ง

Hello

animate-fade-up

Card entry — 600ms cubic-bezier

shimmer

Loading state — 1.8s loop

AI กำลังพิมพ์

streaming-cursor

AI token streaming cursor

lucide-react

Icons

Icon set กลางทั้งหมดมาจาก lucide-react — import ตัวที่ใช้เท่านั้น ห้าม import ทั้ง library

FlaskConical

Sparkles

Search

Bell

BarChart3

Map

Home

MessageSquare

Layers

Network

FileText

User

Calendar

Clock

Filter

Settings

Plus

Edit3

Trash2

Download

Copy

Check

MoreHorizontal

ChevronDown

ChevronRight

ArrowRight

ArrowLeft

Menu

X

Button

Buttons

11 variants + 12 sizes — เปลี่ยน dropdown เพื่อ preview + copy snippet

Variant

Size

Label

<Button variant="primary" size="tnrr-md">
  ค้นหางานวิจัย
</Button>

Badge

Badges

17 variants รวม TNRR pill tones (topic / ai / status / keyword ฯลฯ)

All variants

defaultsecondarydestructiveoutlineghostlinktopiccareertypekeywordsupportingcontrastingmentioningaistatus-activestatus-pendingcount

Variant

Size

Label

แสดงไอคอนนำ

Climate change

<Badge variant="topic" size="md">
  Climate change
</Badge>

Input / control

Form controls

Primitive สำหรับ field — ทั้งหมดรองรับ dark mode และ focus ring

Input

คำค้นหา

Textarea

โน้ต

Checkbox

เปิดการแจ้งเตือน

Switch

Auto-sync

RadioGroup

ทั้งหมดของฉัน

Slider

Presentational

Data display

Card / Tabs / Accordion / Progress / Skeleton / Separator / Avatar

Card

ตัวอย่าง Card

ใช้เป็นภาชนะหลักทั้งหน้า — รองรับ size="sm" ด้วย

Header / Content / Footer แยก slot ชัดเจน โค้งมุม rounded-xl

Tabs

มุมมองสรุปของเอกสาร — เริ่มต้นที่นี่

Accordion

Progress / Skeleton / Avatar / Separator

Research Meter · 62%

CPAITR

Portal-based

Overlays

Dialog / Sheet / Popover / DropdownMenu — คลิก trigger เพื่อเปิดจริง

Dialog

Modal (centered)

Sheet

Side drawer — mobile primary

Popover

Anchored panel

DropdownMenu

Action menu

Recharts

Charts palette

Recharts ไม่อ่าน CSS var ต้อง pass สีเป็น prop — ใช้ useTheme().resolvedTheme สลับ palette

chart-1

chart-2

chart-3

chart-4

chart-5

Gotcha

Recharts default tooltip เป็นสีขาว — override contentStyle สำหรับ dark mode

Leaflet heatmap / force-graph canvas ก็ไม่อ่าน CSS var เช่นกัน

Breakpoints

Responsive

Tailwind v4 default breakpoints — pattern ที่ใช้จริงในแอป

BP	Min width	Note
sm	640px	โทรศัพท์แนวนอน / tablet เล็ก
md	768px	tablet — sidebar/filter แสดงได้
lg	1024px	desktop — navbar เต็มพร้อม tab row
xl	1280px	desktop กว้าง — chart grid 3-col

Gutter

px-4 lg:px-6 max-w-[1440px] mx-auto

ใช้ทุกหน้า — กว้างสุด 1440px, padding 16/24

Sidebar hide

className="hidden lg:block"

Workspace collection list / spec TOC — ซ่อน <lg

Navbar collapse

<lg: hamburger → Sheet drawer

Desktop keeps 7-item nav + scroll-collapse subtitle

Filter panel

<md: Sheet slide-in ≥md: inline <aside>

ใช้ที่ /search, /workspace/[id]

FAB (Floating Action)

lg:hidden fixed bottom-5 right-5 z-30

DocChat, New item — เฉพาะ <lg

Grid

grid-cols-1 md:grid-cols-2 xl:grid-cols-3

Analytics / home recommendations

อัปเดตเมื่อ design tokens เปลี่ยน — ไฟล์ข้อมูลใน app/design-system/page.tsx ต้อง sync กับ app/globals.css ด้วยมือ.

Command Palette