Foundations

本樣式指南為網站的基礎核心，所有顏色、尺寸、元件、組件都會羅列於此，以便進行管理。

如需變更任何顏色或值，請使用「Variables 變數 (V)」面板。

全站尺寸單位皆以 EM 設定，目的是為了讓 1920px 以上的瀏覽器可直接等比例放大。

Color

本區塊定義了全站的核心色彩。請優先使用定義好的顏色，以確保品牌視覺的一致性，如果有新增顏色，務必要在本區更新。

漸層色無法定義，但可將用到的漸層色存為 Variables 方便管理。

Crescendo Color

Crescendo Black
Crescendo Gery
Crescendo Blue
Crescendo Blue 10%
Background Gery
Icon Gery
AI Purple
AI Green

Button Gery

Btn-Dark Gery
Btn-Gery
Btn-Light Gery
Btn-Lightest

Basic Color

Black
White
Transparent

Font

網站指定中文、日文、泰文字體皆為思源黑體，英文字體為 TT Commons Pro。

Taiwan

Noto Sans TC

漸強實驗室 Crescendo lab

Singapore

TT Commons Pro

Crescendo lab

Thailand

Noto Sans Thai

ฟอนต์ภาษาไทย Crescendo lab

Japan

Noto Sans JP

日本語フォント Crescendo lab

Spacing

定義所有尺寸、間距以及圓角。

Global Padding

定義網站最大寬度、左右留白、以及區塊間距。

Home Hero Padding

Global Padding

Global Container

Section Spacing

Gap

定義多種間距尺寸，請從現有定義中選擇，不可隨意新增，會破壞整體網站排版空間。

Gap XXS

Gap XS

Gap S

Gap M

Gap L

Gap XL

Gap XL plus

Gap XXL

Gap XXXL

Card Padding

卡片內距設定，目前有一般、大以及混合留白。

Card Padding L

Card Padding XL

Card Padding Mix

Radius

定義卡片使用的小、中、大圓角，Full 為圓形。

Radius S

Radius M

Radius L

Radius Full

Elements

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Typography

根據不同用途，需要使用不同的文字格式。

Heading

SEO 最重要的 Headings 標籤，不可隨意使用，字體大小與層級無關。請以標題、章節、其他子題的概念來使用。

Heading XXL

Size

3.5 em

漸強實驗室 Crescendo lab

Heading XL

Size

2.5 em

漸強實驗室 Crescendo lab

Heading L

Size

2 em

漸強實驗室 Crescendo lab

Heading M

Size

1.5 em

漸強實驗室 Crescendo lab

Paragraphs

用於多文字內容，確保行高舒適易讀。

Paragraphs XXL

Size

5 em

Elevate Your AI Journey  with Crescendo AI

Paragraphs XL

Size

1.25 em

品牌系統規範透過統一色彩、字體與元件，確保設計一致性並提升團隊協作效率。明確的規則讓品牌在不同平台維持專業與辨識度，同時展現核心價值，形成可持續延伸的設計基礎，避免風格分散與溝通落差。

Paragraphs L

Size

1.1 em

Paragraphs M

Size

1 em

Text Block

Text Metric-XL

Size

5 em

999

Text Metric

Size

4 em

999

Text XXL

Size

2 em

打造全方位顧客體驗

Text XL

Size

1.5 em

打造全方位顧客體驗

Text L

Size

1.1 em

打造全方位顧客體驗

Text M

Size

1 em

打造全方位顧客體驗

Text S

Size

0.9 em

打造全方位顧客體驗

Text XS<B>

Size

0.8 em

打造全方位顧客體驗

Text XS

Size

0.8 em

打造全方位顧客體驗

Button

Primary Large

Button Text

Primary Medium

Button Text

Primary Small

Button Text

Primary Large - Disabled

Button Text

Primary Medium - Disabled

Button Text

Primary Small - Disabled

Secondary Large

Secondary Medium

Secondary Small

Secondary Large - Disabled

Button Text

Secondary Medium - Disabled

Button Text

Secondary Small - Disabled

Button Text

Text Button Large

Text Button

Text Button Medium

Text Button

Properties Components

Component module

Title Section

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. so added this paragraph.

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Badge Text

H2 Section Title

Card

Metric Card

999

Unit

Label Title

Preview

可插入 3 - 4 張 Metric Card，數量需維持在範圍，不可多或少

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

999

Unit

Label Title

999

Unit

Label Title

999

Unit

Label Title

Pain Point Card

Heading

This is some text inside of a div block.

Preview

可插入 3 - 4 張 Metric Card，數量需維持在範圍，不可多或少

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Heading

This is some text inside of a div block.

Heading

This is some text inside of a div block.

Heading

This is some text inside of a div block.

Feature Card

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Button Text

Preview

可插入 2 - 3 張 Feature Card，數量需維持在範圍，不可多或少

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Button Text

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Button Text

Step Card

Badge Text

H3 Card Title

This is some text inside of a div block.
This is some text inside of a div block.

This is some text inside of a div black.

Preview

可插入 2 - 3 張 Feature Card，數量需維持在範圍，不可多或少

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Badge Text

H3 Card Title

This is some text inside of a div block.
This is some text inside of a div block.

This is some text inside of a div black.

Badge Text

H3 Card Title

This is some text inside of a div block.
This is some text inside of a div block.

This is some text inside of a div black.

Badge Text

H3 Card Title

This is some text inside of a div block.
This is some text inside of a div block.

This is some text inside of a div black.

Product Card

H3 Card Title

This is a descriptive text about description.

Button Text

Preview

可插入 2 - 3 張 Feature Card，數量需維持在範圍，不可多或少

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description.This is a descriptive text about description.This is a descriptive text about description.

Button Text

H3 Card Title

This is a descriptive text about description.

Button Text

H3 Card Title

This is a descriptive text about description.

Button Text

Bento Card

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Preview

可插入 2 - 3 張 Feature Card，數量需維持在範圍，不可多或少

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Icon Card

Icon Feature Card

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Button Text

Preview

可插入 2 - 3 張 Feature Card，數量需維持在範圍，不可多或少

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Button Text

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Button Text

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Button Text

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Button Text

Icon Card style

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Preview

Icon Card 固定一列 4 張卡，不滿 3 張會空白，超過 4 張新增第二列

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Icon Half Card

Preview

Icon Card 固定一列 4 張卡，不滿 3 張會空白，超過 4 張新增第二列

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Button Text

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Button Text

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Hero

Standard Hero

Badge Linear Text

Heading 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Button Text

Text Hero

Badge Linear Text

This is some text inside of a div block.

Button Text

Content

Content Z-Pattern

Preview

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

H3 Content Title. This is the title text of this section.

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Item A
Item B
Item C

Visual Spotlight

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

CTA

Image

Preview

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

H2 Title : Fixed height 500px

This is a descriptive text about description.

Button Text

Background

Preview

可插入 3 - 4 張 Metric Card，數量需維持在範圍，不可多或少

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

H2 Title : Fixed height 500px

This is a descriptive text about description.

Button Text

Ebook

填寫表單，索取更多功能應用案例

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description.

Item 1
This is a descriptive text about description.This is a descriptive text about description.
Item 2
This is a descriptive text about description.This is a descriptive text about description.
Item 3
This is a descriptive text about description.This is a descriptive text about description.

預約專人諮詢

Ebook

H2 Title : Fixed height 500px

This is a descriptive text about description.

Button Text

Accordion

FAQ

Preview

待使用情境

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Accordion Tab

Preview

可插入 3 - 4 張 Metric Card，數量需維持在範圍，不可多或少

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Regular Components

CMS Slider

Key Feature

H3 Card Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Preview

可插入 3 - 4 張 Metric Card，數量需維持在範圍，不可多或少

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Omnichannel AI Journey

ออกแบบ customer journey อัตโนมัติทั้ง LINE, Email และ SMS โดย AI จะทริกเกอร์การกระทำถัดไปตามพฤติกรรมของสมาชิก นำพาลูกค้าแต่ละรายไปในเส้นทางที่เหมาะสมที่สุด

AI Smart Segmentation

วิเคราะห์ข้อมูลเพื่อคาดการณ์พฤติกรรมล่วงหน้า ทั้งโอกาสในการซื้อ และความเสี่ยงในการสูญเสียลูกค้า (Churn Risk) ช่วยให้คุณจัดสรรงบประมาณการตลาดได้ตรงจุด เพิ่ม ROI อย่างเห็นได้ชัด

AI Content Recommendation

สร้างคอนเทนต์ที่ตรงโจทย์โดยอิงจากการวิเคราะห์ประสิทธิภาพของแคมเปญในอดีต พร้อมแนะนำสินค้าแบบเฉพาะบุคคล (Personalized) นำเสนอสิ่งที่ลูกค้าต้องการได้ในเวลาที่เหมาะสม

AI Smart Sending

เพิ่มอัตราการเปิดอ่าน ด้วยระบบส่งข้อความตาม "Best Sending Time" ของลูกค้าแต่ละราย โดย AI จะเรียนรู้ช่วงเวลาที่มีการตอบสนองสูงสุด มั่นใจว่าข้อความของคุณจะไปถึงในจังหวะที่เหมาะสมที่สุด

MAAC: AI Lookalike Segment รักษาฐานลูกค้าเดิม ขยายฐานลูกค้าใหม่ด้วย AI

ดูแลลูกค้าตลอดเส้นทาง (Customer Journey) ด้วยระบบแจ้งเตือนนัดหมาย Booking Module เพื่อลดการ No-show และส่งข้อความกระตุ้นการซื้อตามความสนใจรายบุคคล พร้อมใช้ AI Segment วิเคราะห์หากลุ่มลูกค้าที่มีพฤติกรรมคล้ายกัน (Lookalike) เพื่อขยายฐานลูกค้าใหม่ที่มีคุณภาพสูง

Dynamic Rich Menu & Auto Reply

เปลี่ยน LINE OA ให้เป็น Mini APP ส่วนตัวของลูกค้า ด้วยเมนูที่เปลี่ยนแปลงตามกิจกรรมของลูกค้า สร้างประสบการณ์การให้บริการที่รับรอง

Deeplink & Smart Redirect

ยกระดับการดึง Traffic จากโฆษณา (Ads to Chat) ด้วย Smart Deeplink ที่ช่วยติด Tag ระบุแหล่งที่มาและสาขาลูกค้าโดยอัตโนมัติ และส่งต่อลูกค้าไปยังจุดบริการที่ถูกต้องที่สุด

Ads to Platform

นำข้อมูลพฤติกรรมและความสนใจจาก Platform ไปทำ Re-marketing หรือสร้าง Lookalike Audience บนช่องทางโซเชียลต่างๆ ช่วยลดต้นทุนในการหาลูกค้าใหม่ (CAC)

Testimonial

This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Customer Name

Brand - Job Title

Preview

可插入 3 - 4 張 Metric Card，數量需維持在範圍，不可多或少

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

จากเดิมที่ส่งข้อความแบบหว่านแห การใช้แพลตฟอร์ม MAAC ของ Crescendo Lab ช่วยให้เราแบ่งกลุ่มลูกค้าผ่านการติด Tag และลำดับขั้นได้แม่นยำขึ้น ส่งผลให้การสื่อสารมีประสิทธิภาพกว่าเดิมอย่างเห็นได้ชัด โดยเฉพาะกลุ่มลูกค้าคุณภาพที่มีอัตราการเปิดอ่านข้อความสูงถึง 50-60%

Lin Jiahua

หัวหน้าส่วนการตลาดดิจิทัล

จากการวิเคราะห์พบว่า 43% ของแชตบน LINE เป็นคำถามซ้ำซ้อนที่เป็นคอขวดต่อทีมบริการ เราจึงเลือกใช้ CAAC AI Agent จาก Crescendo Lab ซึ่งไม่ใช่แค่แชตบอททั่วไป แต่เป็นผู้ช่วยระดับองค์กรที่แยกแยะเคสแม่นยำและช่วยปิดการขาย ช่วยแก้ปัญหาด้านบุคลากรพร้อมยกระดับบริการได้อย่างมีประสิทธิภาพ

YuFan Lin

CTO

ในวันที่ Social media และ Chat App กลายเป็นช่องทางหลักในการสื่อสาร ความเร็วในการตอบกลับ กลายมาเป็นตัวตัดสินคุณภาพงานบริการ หลังนำ AI Agent มาใช้ เราสามารถลดเวลาการทำงานทีมงานลงได้อย่างมาก เพราะ AI ช่วยจัดการคำถามซ้ำๆ และงานพื้นฐานได้แบบ Real-time ทำให้ Workflow โดยรวมลื่นไหลและมีประสิทธิภาพขึ้นชัดเจน

Dimdimsum Taiwan

ฝ่ายการตลาดและประชาสัมพันธ์

สิ่งที่ประทับใจเลยก็คือ Crescendo Lab เป็นบริษัทที่มีลูกค้ามากมาย แต่ก็ยังให้ความสำคัญแก่เราอย่างมาก ไม่ว่าจะเป็นการช่วยเหลือขั้นตอนการใช้งาน การอบรมได้หลายครั้ง หรือการช่วยเหลือด้านการตลาด

เจษฎา สุวรรณาภัย (ซูม)

CEO

เมื่อก่อนการติด Tag ลูกค้าแบบ Manual เป็นปัญหาใหญ่ของเรา เพราะเกิดความผิดพลาดบ่อย ทำให้การแบ่งกลุ่มลูกค้าไม่แม่นยำ แต่พอมี Quick Reply ที่ติด Tag อัตโนมัติได้เลยเข้ามาช่วยการจัดการลูกค้าและแยก Segment ได้หมดเลยค่ะ

สุภาพร เกษรชื่น

Marketer

สิ่งที่ประทับใจที่สุดไม่ใช่แค่ระบบที่เสถียร แต่คือความใส่ใจของทีมงาน Crescendo Lab ที่พร้อมช่วยวาง Workflow ให้เข้ากับธรรมชาติของธุรกิจเรา การมองเห็น Data ทั้งหมดในที่เดียวทำให้เราบริหารจัดการงานได้อย่างมั่นใจ และดูแลลูกค้าได้อย่างไร้รอยต่อ

คุณวารี สุทธกรณ์ (น้ำ)

Strategic Director | Rattinan Clinic

MAAC ช่วยให้เราแบ่งกลุ่มลูกค้าได้ละเอียดขึ้น ขายได้ตรงจุดมากขึ้น เรารู้ว่าลูกค้าสนใจอะไร แล้วสามารถยิงแคมเปญให้ตรงกลุ่มได้เลย เช่น แบ่งกลุ่มลูกค้าที่ชอบเสื่อ หรือจะเป็นลูกค้าเก่าหรือลูกค้าใหม่ ก็ส่งข้อความเฉพาะกลุ่มได้แม่นยำขึ้นมากค่ะ

พัชรภรณ์ พิกุลแก้ว

Designer/ Communication

Testimonial

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.

Customer Name

Brand - Job Title

Text Button

+999

Unit

Label Title

+999

Unit

Label Title

Preview

可插入 3 - 4 張 Metric Card，數量需維持在範圍，不可多或少

⚠︎ 請先在右側選擇卡片盒子，並將卡片放入對應的盒子內

Badge Text

H2 Section Title

This is a descriptive text about description. The content wasn't enough, so added this paragraph. This is a descriptive text about description. The content wasn't enough, so added this paragraph.