/* Panyagraph Design System R6 — "Red Spine" · LOCKED · see design.md * Promoted from tokens-r6.css to primary on 2026-08-01 — this is now the * one true tokens.css. axon.html (admin) and /tools/capstone-debrief have * not been ported to the new component classes yet, so they load the * pre-R6 system from tokens-legacy.css/base-legacy.css/fonts-legacy.css * until their own migration pass (see design.md Amendment for R6). * * โครงไฟล์ 2 ชั้น: * 1) Primitives — ค่าสีจริงของระบบ Red Spine * 2) Semantic — ชื่อ --color-* ที่ base.css เรียกใช้ * กติกา: ห้าม hardcode สีนอกไฟล์นี้ · ห้าม negative letter-spacing บน * ข้อความไทย (Latin/ตัวเลขล้วนยกเว้นได้) * * Contrast measured (WCAG relative luminance), not eyeballed — see * design.md §2 / design-r6/DIRECTIONS.md "Contrast math" for the full table. */ :root { color-scheme: light; /* ---- 1) Primitives — CONC red, the one fixed brand asset ---- */ --conc-600: #ed1a23; /* true CONC red — large graphics/rules/icons/charts/ display text >=24px/19px bold ONLY. 4.40:1 with white — fails AA for small text-on-fill. */ --conc-700: #c8161e; /* 5.85:1 white text — button fill default */ --conc-800: #a11219; /* 8.03:1 white text — hover/active/pressed */ --conc-900: #7a0e13; /* 11.05:1 white text — deepest pressed / red-on-light text */ /* ---- Graphite — the near-achromatic base (Direction C: red is the only chroma) ---- */ /* เดิม #0a0a0b (near-black แท้) — เปลี่ยนเป็นเนวี่เข้มมาก ตามฟีดแบ็กเจ้าของ รอบสาม ("ยังดูโฉบเฉี่ยว sport ไป ... ใช้สีฟ้าแซมให้ซอฟลง") แดง+เนวี่คือคู่สี เชิงสถาบัน/academic แบบดั้งเดิม (ป้ายมหาวิทยาลัย, หนังสือปกแข็ง) ต่างจาก แดง+ดำสนิทที่โน้มเอียงไปทาง motorsport/performance branding · ยังคง "near-achromatic" ในทางปฏิบัติ (เข้มมากจนแทบไม่มีสี) จึงไม่ขัดกับกฎ "แดงเป็น chroma เดียวของระบบ" (design.md §2.1) — นี่คือการปรับโทนของฐาน เกือบไร้สี ไม่ใช่การเพิ่มสีนำที่สอง ห้ามใช้เป็นสีปุ่ม/ลิงก์/สถานะเด็ดขาด ยังใช้เฉพาะพื้นหลัง section เข้มเท่านั้น */ --graphite-950: #0a1220; /* dark section breaks — ink-navy, not true black */ --graphite-900: #141416; /* primary ink — 18.40:1 on white */ --graphite-700: #3a3b3f; /* structural — borders/dividers on dark surfaces */ --graphite-600: #5b5d63; /* secondary text — 6.58:1 on white */ --graphite-400: #82848b; /* faint/disabled/placeholder text only — 3.74:1, passes large-text/UI-component AA, NOT small body text AA — never use for essential copy */ --graphite-200: #d7d8db; /* light borders */ --graphite-100: #e9eaec; /* subtle fills */ --surface-0: #ffffff; --surface-50: #f7f7f8; --line-200: #e2e3e6; /* ---- Status (deliberately distinct hues from --conc-*, never confusable) ---- */ --err-600: #9c2545; /* plum-rose — 7.60:1 on white. NOT conc-600: "this failed" must never read as "this is brand red" */ --ok-600: #127a4a; /* 5.37:1 on white */ --warn-600: #8f5f08; /* 5.51:1 on white */ --info-600: #3a63a8; /* 5.95:1 on white — minor data-viz color only, never a UI lead */ /* ---- Ribbon — สีตกแต่งของริ้วเท่านั้น ห้ามใช้เป็นสี UI/ปุ่ม/ตัวอักษร R5 เดิมไล่ ฟ้า→ม่วง→แดง→ส้ม (ยืมสี TBS มานำ) · R6 อยู่ในตระกูลแดงล้วน แล้วสร้างมิติด้วย "ช่วงค่าความสว่าง" แทนการเปลี่ยนวรรณะสี: plum(เข้มสุด) → deep → core(CONC แท้) → light(อ่อนสุด ปลายริ้ว — กุหลาบหม่น ไม่ใช่ส้มร้อน) ไล่แบบนี้ริ้วยังอ่านเป็นแดงของแบรนด์ทั้งเส้น ไม่ใช่ rainbow ที่เผอิญมีแดง ---- */ --ribbon-plum: #5e0d28; /* เงาลึกสุด อมม่วงนิดเดียวให้โซนทับไม่ตันเป็นแดงดำ */ --ribbon-deep: #8e1015; --ribbon-core: var(--conc-600); /* ปลายอ่อน — กุหลาบหม่น ไม่ใช่ส้มร้อน รอบแรกใช้ #ff7a45 แล้วมันอ่านเป็นไฟท้ายรถ/ไอความร้อน พอรวมกับริ้วทแยง กับประกายขาวก็กลายเป็นโฆษณารถยนต์เต็มตัว · โทนนี้ยังให้ช่วงความสว่าง เท่าเดิมแต่เป็นสีของงานพิมพ์มากกว่าสีของโลหะ */ --ribbon-light: #e8907f; /* ---- Face — สีภาพประกอบของไอคอนตัวละครในข้อสอบแบบแชท (MTL chat_choice) ห้ามใช้เป็นสี UI/ปุ่ม/ลิงก์/สถานะ/ตัวอักษร — ใช้ได้เฉพาะในรูปหน้าการ์ตูน กติกาเดียวกับ --ribbon-* (สีตกแต่งที่ระบบรองรับให้แยกกลุ่มไว้ต่างหาก) ที่มา: เจ้าของสั่ง 2026-09-07 ให้เปลี่ยนไอคอนตัวละครจากตัวอักษรตัวแรกของชื่อ (ภาษาไทยได้สระนำอย่าง "เ" "ไ" ซึ่งไม่บอกว่าใคร) เป็นหน้าการ์ตูน · รอบแรกค่าสี อยู่ใน render_chat.js แล้ว design-director ตีกลับว่าชนกฎ "ห้าม hardcode ค่าสี" (design.md ข้อ 2) ⇒ ย้ายมาที่นี่ · เจ้าของอนุมัติการเพิ่มบล็อกนี้ 2026-09-08 สีผิว/สีผม/สีพื้นวงเป็นสีธรรมชาติของภาพคน ไม่ใช่การเพิ่ม chroma นำตัวที่สอง --face-line-N คือเฉดเข้มของ --face-skin-N เบอร์เดียวกัน ใช้ตีเส้นขอบใบหน้า ให้หัวไม่กลืนพื้นวง — ทุกคู่ (เส้นขอบ × พื้นวง) วัดแล้วได้อย่างต่ำ 1.72:1 ---- */ --face-skin-1: #f6d3b0; --face-skin-2: #e8b489; --face-skin-3: #cf9163; --face-skin-4: #a06a44; --face-line-1: #d9ab7d; --face-line-2: #c78f5f; --face-line-3: #a86c42; --face-line-4: #7d4f2f; --face-hair-1: #2a2019; --face-hair-2: #46311f; --face-hair-3: #6a4a2c; --face-hair-4: #171717; --face-ring-1: #eceef0; --face-ring-2: #f6e6e2; --face-ring-3: #e7ecef; --face-ring-4: #f0ebe6; /* เสื้อ — จงใจไม่ประกาศค่าสีใหม่ อ้าง token ที่มีอยู่แล้วล้วน เพื่อให้ทั้งวงยัง อ่านเป็นแดง+เทาของแบรนด์ ไม่ใช่วงสีรุ้ง */ --face-shirt-1: var(--graphite-600); --face-shirt-2: var(--graphite-700); --face-shirt-3: var(--ribbon-deep); --face-shirt-4: var(--ribbon-light); --face-ink: #2a2019; /* เส้นตา/ปาก */ --face-blush: #ef9a8c; /* แก้มเป็นสีกุหลาบหม่นตระกูลเดียวกับ --ribbon-light */ /* ---- Data-viz series order — red is always series 1, system-wide ---- */ --viz-1: var(--conc-600); --viz-2: var(--graphite-700); --viz-3: var(--info-600); --viz-4: var(--warn-600); --viz-5: var(--ok-600); /* ---- 2) Semantic ---- */ --color-signature: var(--conc-600); --color-primary: var(--conc-700); --color-primary-hover: var(--conc-800); --color-primary-active: var(--conc-900); --color-on-primary: #ffffff; --color-ink: var(--graphite-900); --color-ink-soft: var(--graphite-600); --color-ink-faint: var(--graphite-400); /* large-text/UI-component use only, see primitive note */ --color-paper: var(--surface-0); --color-surface: var(--surface-0); --color-surface-sunken: var(--surface-50); --color-surface-inverse: var(--graphite-950); --color-rule: var(--line-200); --color-rule-inverse: var(--graphite-700); --color-focus: var(--conc-700); /* light surfaces */ --color-focus-inverse: #ff6b63; /* dark surfaces — 7.10:1 on graphite-950 */ --color-ok: var(--ok-600); --color-warn: var(--warn-600); --color-err: var(--err-600); --color-info: var(--info-600); /* Legacy-shaped aliases so any shared markup that still reads the old names (e.g. inline styles copied from a pre-R6 template mid-conversion) degrades to a sane R6 value instead of `unset` — remove once conversion is complete. */ --color-accent: var(--color-primary); --color-accent-soft: var(--surface-50); --color-on-accent: var(--color-on-primary); --color-cta: var(--color-primary); --color-cta-hover: var(--color-primary-hover); --text-soft: var(--color-ink-soft); --text-faint: var(--color-ink-faint); --muted: var(--color-ink-soft); /* ---- Homepage-only (R7, harvard.edu DNA study — design-pilot/harvard-dna/) Scoped to .homenav/.homehero/.homeband/.homefeature/.homefoot selectors ONLY — never referenced by admin, quiz, Class Home, or capstone-debrief, so this round cannot regress anything outside the homepage. Red is demoted from system-wide primary to a homepage-local accent (verified: harvard.edu's own red covers ~1.6% of painted page area) — this does NOT change --color-primary/--color-signature, which every other screen still reads unchanged. See design.md Amendment for the full reasoning and the owner's explicit sign-off on each divergence. */ --home-paper: color-mix(in srgb, var(--conc-600) 3%, white); /* warm, not stark white — chosen, not inherited */ --home-paper-raised: var(--surface-0); --home-ink: var(--graphite-900); /* reuse — already the system's near-black, 18.40:1 on white */ --home-ink-soft: var(--graphite-600); /* reuse — already 6.58:1 on white */ --home-charcoal: #18181a; /* neutral near-black, NOT graphite-950's navy tint — harvard.edu's dark sections measure achromatic (rgb(14,14,14)/rgb(41,44,47)), not blue-black. Homepage-only: does not touch --color-surface-inverse, so the navy anti-"motorsport" decision (design.md Provenance, R6 round 3) still stands everywhere else. */ --home-line: var(--line-200); --home-accent: var(--conc-700); /* 5.85:1 white text — CTA fill */ --home-accent-text: var(--conc-700); /* small text on light paper must be conc-700+, never conc-600 (4.40:1, fails AA below 24px/19px-bold — same rule tokens.css already states for --conc-600) */ --home-weight-display: 600; /* owner-tested against 400/900 via a live artifact comparison; 600 read as the middle ground, avoiding both R6 round-5's "ดูบางไป" complaint and 900's heavier, less editorial weight. Local to the homepage only — --weight-display (700) and --weight-hero (900) are unchanged for every other screen. */ /* ---- ตัวอักษร — คู่เชิงบรรณาธิการ (DESIGN-R6.md §1) Playfair Display (เซริฟจอแสดงผล, Latin เท่านั้น) เฉพาะหัวข้อใหญ่ฝั่งอังกฤษ · Sarabun (humanist sans) เนื้อความ+UI+หัวข้อใหญ่ฝั่งไทย · Plex Mono เฉพาะตัวเลข/สถานะ รอบแรกใช้ IBM Plex Sans Thai ทั้งระบบ — ทรงเหลี่ยมของมันบวกริ้วแดงทแยง ทำให้ทั้งหน้าอ่านเป็นมอเตอร์สปอร์ต ไม่ใช่การศึกษาเชิงธุรกิจ รอบสอง — Trirong (เซริฟไทย) ตัวบางไป "ไม่สวย" เจ้าของอนุมัติให้แยกฟอนต์ ตามภาษา: อังกฤษได้เซริฟหนา/มีคาแรกเตอร์ ไทยกลับไปใช้ Sarabun ตัวหนา แทนที่จะฝืนหาเซริฟไทยตัวหนา สลับมาใช้ Fraunces รอบหก — ระบบตรวจ design เตือนว่า Fraunces เริ่มถูกใช้เยอะใน AI-generated sites เจ้าของเทียบ Fraunces กับ Piazzolla/Bitter/Newsreader/Playfair Display ด้วยตาจริงแล้วเลือก Playfair Display 900 แทน (รู้ว่า Playfair เป็นเซริฟหรูที่ถูกใช้ซ้ำเยอะกว่า Fraunces อีก แต่ยืนยันเลือกเอง) Playfair Display ไม่มี glyph ไทยเลย ดังนั้นการวางไว้ตัวแรกใน --font-display แล้วให้ไทย fallback ไป Sarabun คือพฤติกรรม font stack ปกติของ CSS ไม่ใช่ hack รอบ 7 (2026-08-02, เจ้าของ: "ไม่ค่อยชอบ font ไทยที่ใช้คู่ playfair ... มี font ไทย serif สวยๆคู่กับ playfair ... ดูเนียนบ้างไหม") — เทียบ Pridi/Maitree/Noto Serif Thai คู่ Playfair Display สดๆ ให้ดู เจ้าของเลือก Noto Serif Thai แล้วขอเปลี่ยนฟอนต์ตัวเนื้อ/UI ทั้งระบบ จาก Sarabun เป็น Noto Sans Thai ด้วย (ตัวเดียวกับที่ /axon ใช้อยู่แล้ว ผ่าน tokens-legacy.css — ฝั่งผู้เรียนกลับมาสอดคล้องกับฝั่งแอดมิน) รอบ 8 (2026-08-11, เจ้าของ feedback หลังใช้จริงบน Class Debrief): "ปรับ font ไทยให้ใช้ sans serif ตัวเดียวกันได้" — หัวข้อไทยที่ตกไป Noto Serif Thai (เพราะ Playfair ไม่มี glyph ไทย) อ่านไม่เข้าพวกกับเนื้อความที่เป็น Noto Sans Thai ยกเลิก Noto Serif Thai ออกจาก stack นี้ Thai display ตกไปที่ Noto Sans Thai ตัวเดียวกับ --font-sans แล้ว (Latin display ยัง เป็น Playfair Display เหมือนเดิม ไม่แตะ) — ดู design.md §10 Amendment 9 ---- */ --font-display: "Playfair Display", "Noto Sans Thai", Georgia, "Times New Roman", serif; --font-sans: "Noto Sans Thai", "Leelawadee UI", Tahoma, Arial, sans-serif; --font-mono: "IBM Plex Mono", "Noto Sans Thai", "SFMono-Regular", Consolas, monospace; --weight-body: 400; --weight-label: 500; --weight-strong: 600; --weight-display: 700; --weight-hero: 900; /* wordmark เท่านั้น (--text-hero) — Playfair Display black, ดำหนักกว่า display ทั่วไป */ --tracking-latin: -0.02em; /* Latin/numeral display only — never on Thai */ /* scale — rem-based, fluid display via clamp() */ --text-xs: .75rem; --text-sm: .8125rem; --text-body: 1rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: clamp(1.4rem, 1.15rem + 1.3vw, 1.75rem); --text-display: clamp(2rem, 1.4rem + 3vw, 3.1rem); --text-hero: clamp(2.6rem, 1.9rem + 3.5vw, 4.2rem); --text-mono-lg: 1.375rem; /* ---- ระยะ (4pt) ---- */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; /* ---- แถบเมนูล่างผู้เรียน (≤34rem) — SPEC_LEARNER_TABBAR.md §4.1 ความสูง ไม่ใช่สี ---- */ --tabbar-h: 58px; /* ---- มุม (Stripe-craft: เล็ก คม ไม่มนกว้าง) ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-pill: 999px; /* ---- เงา — soft, neutral-tinted, never colored ---- */ --shadow-sm: 0 2px 5px -1px rgba(20, 20, 22, 0.10), 0 1px 3px -1px rgba(20, 20, 22, 0.10); --shadow-md: 0 6px 24px -4px rgba(20, 20, 22, 0.12), 0 2px 6px -2px rgba(20, 20, 22, 0.08); --shadow-lg: 0 13px 27px -5px rgba(20, 20, 22, 0.22), 0 8px 16px -8px rgba(20, 20, 22, 0.25); --shadow-card: var(--shadow-sm); --scrim: rgba(10, 10, 11, 0.5); /* ---- motion — no bounce/overshoot anywhere ---- */ --ease-out: cubic-bezier(.25, 1, .5, 1); --dur-fast: 150ms; --dur-med: 240ms; --duration-fast: var(--dur-fast); --duration-base: var(--dur-med); }