ระบบเดียวสองแบรนด์
โทเคน คอมโพเนนต์ และแนวทางของ ASWINOLOGY° กับ Lurnelle ในที่เดียว สลับแบรนด์ที่มุมขวาบน แล้วทุกหน้าเปลี่ยนตาม
เริ่มใช้งานในสามขั้น
ใช้ได้กับ HTML ธรรมดา Next.js หรือสั่งให้ AI เขียนตามระบบนี้
- โหลดสไตล์ไฟล์เดียวมีโทเคน ฐาน และคอมโพเนนต์ครบ
- เลือกแบรนด์ใส่ data-brand ที่ html หรือส่วนใดของหน้าก็ได้
- ใช้คอมโพเนนต์คลาส ds- หรือคอมโพเนนต์ React ชุดเดียวกัน
<!-- 1. One stylesheet: tokens + base + components -->
<link rel="stylesheet" href="https://components.aswinology.com/ds/v1/ds.css">
<!-- 2. Pick a brand (and optionally a theme) -->
<html lang="th" data-brand="lurnelle">
<!-- 3. Use the classes -->
<button class="ds-btn" data-variant="primary">เริ่มเรียน</button>// 1. Copy DESIGN-SYSTEM/ui into your app as @/ui
// 2. app/layout.tsx
import "@/ui/styles/tokens.css";
import "@/ui/styles/base.css";
import "@/ui/styles/components.css";
<html lang="th" data-brand="aswinology">
// 3. Anywhere
import { Button, Field, Input } from "@/ui";
<Field label="อีเมล"><Input type="email" /></Field>
<Button variant="primary" arrow>สมัครเรียน</Button>Read https://components.aswinology.com/AGENTS.md before writing UI.
Use the ASWINOLOGY° design system (data-brand="lurnelle" for this app).
Only semantic tokens, no hex. One primary button per view.
Every input inside <Field> with a visible Thai label.สองแบรนด์ ภาษาเดียวกัน
ASWINOLOGY° คือแบรนด์แม่ Lurnelle คือห้องเรียน ทั้งคู่ใช้โครงเดียวกัน ต่างกันที่ผิวสัมผัส
aswinologyASWINOLOGYแบรนด์แม่
Soft Swiss กระดาษอุ่น หมึกกราไฟต์ และองศาสีไลม์หนึ่งจุด ตัวอักษร Archivo ปรับความกว้างได้
ArchivoAnuphanGeist Mono
Lurnelleby ASWINOLOGY°หมอกสว่าง แก้วกับดินเหนียว สเลตคู่เพอริวิงเคิล และแสงแดด มิ้นต์ พีชเป็นสีเน้น
Inter TightGeistNoto Sans Thai
38 คอมโพเนนต์ ใช้ได้ทั้งสองแบรนด์
ทุกชิ้นด้านล่างคือคอมโพเนนต์จริงจากไลบรารี ไม่ใช่ภาพ
การกระทำ
Button, Arrow link
อินพุตและฟอร์ม
Field, Input, Textarea, Select และอื่นๆ
ชำระเงินแล้ว
คอร์สเปิดให้เรียนทันที
ใหม่รอตรวจ
ฟีดแบ็ก
Alert, Toast, Badge, Tag และอื่นๆ
โอเวอร์เลย์
Dialog, Sheet, Tooltip, Menu
- เวลา (เสร็จแล้ว)
- 2ข้อมูล
- 3จ่าย
การนำทาง
Navbar, Tabs, Accordion, Breadcrumb และอื่นๆ
Lingua Rushการแสดงผล
Card, Poster, Course card, Stat และอื่นๆ
Aa
ณปTL
ณปTLโหลด
พื้นฐาน
Layout, Icons, Brand marks
หลักที่ทุกคอมโพเนนต์ยึด
โทเคนก่อนค่าสี
ทุกคอมโพเนนต์อ่านค่าจากโทเคน จึงเปลี่ยนแบรนด์และธีมได้โดยไม่แก้โค้ดสักบรรทัด
เข้าถึงได้ตั้งแต่แรก
สีทุกคู่ผ่าน WCAG AA ใช้ element ของเบราว์เซอร์ก่อน และใช้คีย์บอร์ดได้ทุกตัว
ภาษาไทยเป็นภาษาแรก
ระยะบรรทัด ช่องไฟ และฟอนต์คู่ ออกแบบมาเพื่อสระและวรรณยุกต์ไทยตั้งแต่ต้น
เคลื่อนไหวเมื่อมีเหตุผล
โมชันบอกลำดับ ผลตอบรับ หรือการเปลี่ยนสถานะ และหยุดเมื่อผู้ใช้ขอลดการเคลื่อนไหว
อ่านได้ทั้งคนและ AI
เขียน UI กับ AI ได้ตรงระบบตั้งแต่ครั้งแรก เพราะกฎ โทเคน และรายชื่อคอมโพเนนต์อยู่ในไฟล์ที่เครื่องอ่านได้
Read https://components.aswinology.com/AGENTS.md before writing UI.
Use the ASWINOLOGY° design system (data-brand="lurnelle" for this app).
Only semantic tokens, no hex. One primary button per view.
Every input inside <Field> with a visible Thai label.