Xinchao Vietnam Design System v1.3.0

Live Site Design Contract & Style Showcase

100% Reconciled against live production site at https://xinchaovi.com/ (Blocksy Child + Elementor Kit 2124 + SureCart + Spectra + Tutor LMS).

Blocksy Child Theme Elementor Kit 2124 SureCart E-Commerce Spectra UAGB v3 Tutor LMS

Design Contract & Runtime Alignment

Single Token Authority
styles/tokens.css is the physical authority; styles/wordpress/blocksy-defaults.css is the preview adapter.
Blocksy 9-Palette Pinned
Explicit 1–9 color mapping synced directly with live Blocksy Customizer settings.
Outfit Typography Scale
Outfit font family for H1–H6 headings, body (20px), and controls.
Container Metrics
Normal container 1290px, Narrow 750px, Scoped 54rem (`864px`).

Blocksy Live 9-Color Palette (https://xinchaovi.com/)

Palette 1 (Hover / Focus)
#3a5da5
Palette 2 (Brand Primary)
#24417C
Palette 3 (Text Muted)
#355575
Palette 4 (Dark Headings)
#102136
Palette 5 (Light Border)
#E7EBEE
Palette 6 (Surface Light)
#F7FAFD
Palette 7 (Background Base)
#F7FAFD
Palette 8 (White Card)
#ffffff
Palette 9 (Warm Accent)
#FFE8DA

Typography Contract (Outfit Font Family)

H1 (–heading-h1: 40px)

Heading Level 1 Title

H2 (–heading-h2: 35px)

Heading Level 2 Subtitle

H3 (–heading-h3: 30px)

Heading Level 3 Section Header

Body (–text-base: 20px)

Primary body copy providing clear, warm, and trustworthy messaging for students.

Subtext (–text-sm: clamp)

Supporting text level used in cards, helper notices, and descriptions.

Badge (–text-xs: clamp)
Micro copy & badge label

Spatial, Elevation & Container Metrics

Elevation Shadows:

–shadow-sm
Cards & Default
–shadow-md
Buttons & Hero
–shadow-lg
Hover & Floating

Spacing Tokens:

–spacing-xs (0.375rem)
–spacing-sm (0.75rem)
–spacing-md (1rem)
–spacing-lg (1.5rem)
–spacing-xl (2rem)
–spacing-2xl (3rem)

Component Kitchen Sink

Primary Buttons & Brand Tags:

Xinchao Vietnam Brand Tag
Book Class Slot Now

Status & Trust Badges:

Routine Changes Trust First, Zero Hassle Zero Credit Loss

Policy Cards Component Recipe:

24-Hour Notice: Please notify your teacher at least 24 hours in advance for routine schedule changes.

24h Rule

Health & Emergency: Sudden illness or urgent issue? Simply message your teacher with zero hassle.

Empathetic Care

Teacher Guarantee: Proactive coordination for replacement slots if your teacher needs a schedule change.

Proactive Guarantee

Action Links Hub Card Recipe:

Quick Action Hub

Open Calendar Booking Subscription & Account Flexible Tuition Payment