Guidelines CI

ใช้สีให้ออกมาเหมือนแบรนด์เดียวกันทั้งทีม

สี ฟอนต์ และโลโก้ของบริษัท — รวมไว้ที่เดียว พร้อมไฟล์ export ใช้กับ Power BI, Power Apps, PowerPoint. มีเครื่องมือเช็คว่าสีอ่านง่ายไหม (contrast) ให้ด้วย.

แบ่ง 2 ฝั่ง — หลักการแบรนด์ กับไฟล์พร้อมใช้ — ตัดสินใจครั้งเดียว ใช้ได้ทั่วทีม.

CI Guidelines — แนวทางแบรนด์

Logo

ระยะปลอดรอบโลโก้ ขนาดเล็กสุด การใช้ที่ผิด และการใช้เฉพาะไอคอน.

แบรนด์
CI Guidelines — แนวทางแบรนด์

สี

สีหลัก สีรอง สีบอกความหมาย สีกลาง และโหมดมืด.

token
CI Guidelines — แนวทางแบรนด์

ฟอนต์

ฟอนต์หัวข้อ เนื้อความ ตัวพิมพ์เท่ากัน ฟอนต์สำรอง และระดับความหนา.

ตัวอักษร
Design Tokens — ค่าสีมาตรฐาน

หน้าที่ของสี

สีพื้นหลัง สีตัวอักษร สีหลัก สีเน้น และสีเส้นขอบ.

CSS
Design Tokens — ค่าสีมาตรฐาน

สีบอกความหมาย

สำเร็จ เตือน อันตราย ข้อมูล และปิดใช้งาน.

สถานะ
Design Tokens — ค่าสีมาตรฐาน

ความต่างของสี

ตรวจระดับ AA/AAA สำหรับคู่สีที่ใช้จริงบนหน้าจอ.

การเข้าถึง
Exports — ไฟล์พร้อมใช้

ตัวแปร CSS

พร้อมใช้กับ Tailwind หรือธีมของ design system.

เว็บ
Exports — ไฟล์พร้อมใช้

ชุดเริ่มต้น token สี

token เริ่มต้นแบบ JSON สำหรับธีมเว็บ เอกสาร และส่งต่อให้แอป.

ดาวน์โหลด
Exports — ไฟล์พร้อมใช้

สรุปแบรนด์

สรุปแนวทางแบรนด์ไว้สำหรับส่งต่องาน.

เอกสาร
background#F8FAFC
text#0F172A
primary#4F46E5
secondary#E2E8F0
accent#22D3EE

Live theme editor

Tweak 5 semantic roles — the preview re-skins instantly.

Demo workspacelive

Active users

12,840

+4.2% vs last week

Pinned

Onboarding paused while we sync directory data. Resume in ~3 minutes.

6.01:1bg → primary· AA9.88:1text → accent· AAA

12-step scale generator

Radix-style scale derived from your primary. Steps map to specific UI roles — backgrounds, hovers, borders, text.

1

App background

#F9F9FB

2

Subtle background

#F3F3F7

3

Component background

#E9E9F1

4

Hovered component bg

#D8D7EA

5

Active / pressed bg

#C1C0E3

6

Subtle border

#A19EDB

7

Element border

#7772D5

8

Hovered border

#4841D2

9

Solid surface

#2921CA

10

Hovered solid

#2018B4

11

Secondary text

#1C176D

12

High-contrast text

#110F38

Live mini-app

Steps 1+2 = canvas. 7 = borders. 11 = secondary text. 12 = headings. 9-10 = solid surfaces.

17.38:1 step 12 → 11.88:1 step 12 → 9
12 steps generated

Contrast checker

WCAG 2.1 grade. AA = legal floor (4.5:1 body, 3:1 large). AAA = comfortable (7:1 body).

Ratio

17.06 : 1

Large heading style

Normal body paragraph at 16px. The quick brown fox jumps over the lazy dog.

Caption · supporting metadata · 12px small print.

fg #0F172A · bg #F8FAFC

AA · body
4.5 : 1
AA · large
3 : 1
AAA · body
7 : 1
AAA · large
4.5 : 1

Passes every WCAG tier — comfortable for all body sizes.

Export

Same palette, four downstream targets. Copy one and paste into the matching project.

Theme:
  Colors:
    Background: =RGBA(248,250,252,1)
    Foreground: =RGBA(15,23,42,1)
    Primary:    =RGBA(79,70,229,1)
    Secondary:  =RGBA(226,232,240,1)
    Accent:     =RGBA(34,211,238,1)

Power BI: drop the JSON via View → Themes → Browse for themes. Power Apps: paste the YAML into your canvas app source under App.Theme.

แผนการเรียน

Reference และตัวอย่างที่จะทำต่อ

เก็บแหล่งอ้างอิงพร้อมวันที่เช็กไว้ เพื่อให้ทีมรู้ว่าควรกลับมาอัปเดตเมื่อ docs หรือวิธีใช้งานเปลี่ยน.

Quarterly brand review, plus whenever internal CI rules change.
What is it

What is CI

Corporate identity rules that keep brand color, logo, type, and visual usage consistent.

Logo lockupClear spacePrimary paletteFont stack
Basics

Color basics

Primary, secondary, neutral, semantic, background, foreground, border, and dark-mode roles.

Primary actionDanger stateMuted panelFocus ring
Syntax

Token syntax

Reusable variable names that connect CI decisions to CSS, app themes, and design files.

--primary--foreground--success--radius--font-sans
Future example

Interactive palette lab

Live examples that show how a palette affects cards, forms, charts, and dashboard states.

Contrast simulatorChart palette previewBrand sheet generator

แหล่งอ้างอิง

WCAG 2.2 contrast guidance

Community - เช็กล่าสุด 2026-05-31

ต้องเฝ้าดู: Contrast, text, focus indicator, and accessible color usage.

Preset palettes ship in the next pass — 6-8 curated themes (dashboard, app, marketing, dark-first, brand-led).