Yz-Course

Overview

Yz-Course is a goal-based English learning platform serving learners in Pontianak and surrounding regions of Kalimantan Barat. The design system embodies a "Warm Professional" aesthetic—combining the approachability of a community-driven learning space with the credibility and clarity of a modern edtech platform. The visual identity uses a striking rust-orange primary (#ea580c) paired with a calming teal secondary (#14b8a6), creating an energetic yet balanced interface that evokes both enthusiasm for learning and confidence in instruction quality. The emotional response is one of clarity and forward momentum: users feel guided, supported, and motivated to take the next step in their English journey.

The brand voice is direct, encouraging, and locally grounded. Yz-Course speaks in Indonesian with a conversational tone that avoids corporate jargon—phrases like "Bukan kursus biasa" (Not an ordinary course) and "Yz Path™" signal innovation and personalization without pretension. The vocabulary emphasizes concrete outcomes (speaking, IELTS, public speaking) and human connection (tutor datang ke rumah—tutors come to your home). Example sentence in brand voice: "Mulai dari Rp175K/bulan, kamu dapat tutor, LMS, dan AI Mentor yang pantau progress-mu setiap hari."

Colors

The color system is built on a dual-accent model: Primary (rust-orange, #ea580c) drives all call-to-action elements, active navigation states, and key interactive affordances—it is the color users click on to enroll or book a consultation. Secondary (teal, #14b8a6) supports learning-related content, progress indicators, and success states, reinforcing the educational mission. Tertiary (emerald, #059669) is reserved for confirmations, achievements, and positive feedback. The surface stack uses a clean white (#ffffff) as the dominant background with carefully calibrated grays (surface-container-low: #e5e6e6, surface-container-high: #d7dde4) for subtle layering and depth without visual noise. On-surface text is a warm dark gray (#2b3440) rather than pure black, reducing eye strain and maintai

Typography

The type system pairs Plus Jakarta Sans (a modern, geometric sans-serif) for all headlines and display text with Inter (a highly legible humanist sans-serif) for body and label text. This pairing creates visual hierarchy while maintaining readability across all screen sizes. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section breaks; Headline-lg (48px, 700 weight) anchors hero sections and key value propositions; Headline-md (32px, 600 weight) introduces major sections; Title-lg (24px, 600 weight) is used for card titles and subsection headers. Body-lg (18px, 400 weight, 28px line-height) is the primary reading size for hero copy and feature descriptions, while Body-md (16px, 400 weight, 24px line-height) handles standard paragraph text and f

Layout

The layout follows a 12-column grid system with a max-width of 1280px, centered on the viewport with symmetric padding (24px on tablet, 32px on desktop). The page rhythm uses a consistent spacing scale: lg (40px) for major section separation, md (24px) for component padding and inter-element spacing, sm (12px) for internal component spacing, and xs (4px) for micro-adjustments. The hero section occupies the full viewport height on desktop (minus header) with a 60/40 split: left side holds the headline, body copy, and primary CTA (using headline-lg and body-lg typography); right side features a large hero image (woman with teal background) that extends to the edge. Below the hero, feature cards are laid out in a 4-column grid (1 column on mobile, 2 on tablet) with md (24px) gaps. White-space

Elevation & Depth

Depth is conveyed through a minimal shadow system and subtle background layering rather than dramatic drop shadows. The elevation scale has three levels: Level 1 (Base) uses no shadow and a white background (#ffffff) for primary content surfaces; Level 2 (Card/Container) applies a soft shadow (0 2px 8px rgba(0,0,0,0.06)) with a 1px border at rgba(0,0,0,0.05) to create gentle separation from the background; Level 3 (Modal/Elevated) uses a stronger shadow (0 4px 12px rgba(0,0,0,0.08)) with a 1px border at rgba(0,0,0,0.08) for maximum prominence. Hover states on cards transition the shadow from L

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used consistently to soften the interface and create approachability, but never so extreme as to feel playful or unprofessional. Buttons and primary interactive elements use lg (1rem / 16px) border-radius, creating a modern, friendly appearance without sacrificing clarity. Cards and containers use xl (1.5rem / 24px) border-radius for a more generous, inviting feel. Input fields and form elements use DEFAULT (0.5rem / 8px) border-radius for a neutral, functional appearance. Badges and chips use full (9999px) border-radius to create pi

Components

Action Elements Buttons are the primary interactive affordance. The button-primary component uses the rust-orange primary color (#ea580c) with white text, lg border-radius (16px), and 12px 24px padding, resulting in a 48px height. On hover, the background darkens to #d94806 and the shadow increases to 0 4px 12px rgba(234, 88, 12, 0.3), creating a tactile lift effect over 200ms. On active/pressed, the background shifts to #c2410c and the shadow reduces to 0 1px 4px rgba(234, 88, 12, 0.15), signaling engagement. The button-secondary variant uses a transparent background with a 2px border in primary (#ea580c) and primary text; on hover, it fills with a light orange background (rgba(234, 88, 12, 0.08)) without changing the border. Button-ghost is used for tertiary actions: transparent back

Do's and Don'ts

**Do**

• Do use the rust-orange primary (#ea580c) exclusively for all CTAs, active states, and key interactive elements—never use secondary or tertiary for primary actions.
• Do maintain generous white-space (lg spacing, 40px) between major sections to create visual breathing room and guide the eye through the page hierarchy.
• Do apply Plus Jakarta Sans (700 weight) to all headlines and display text; reserve Inter (400 weight) for body copy and labels to maintain clear visual hierarchy.
• Do use the teal secondary (#14b8a6) for learning-related content, progress indicators, and success states to reinforce the educational mission.
• Do apply soft shadows (0 2px 8px rgba(0,0,0,0.06) for cards, 0 4px 12px rgba(0,0,0,0.08) for elevated surfaces) consistently to create subtle depth without visual noise.
• Do use lg border-radius (16px) for buttons and primary interactive elements to create a modern, approachable feel.
• Do apply 200ms ease transitions to all interactive state changes (hover, focus, active) to create smooth, professional interactions.

**Don't**

• Don't use primary (#ea580c) for backgrounds or large surface areas—reserve it exclusively for interactive elements and accents.
• Don't apply shadows stronger than 0 16px 40px rgba(0,0,0,0.12) or use blur effects; the design prioritizes clarity and legibility over depth.
• Don't mix Plus Jakarta Sans and Inter within a single headline or body paragraph; maintain consistent font families by text role.
• Don't use secondary (#14b8a6) or tertiary (#059669) for primary CTAs or active navigation states—these colors are supporting accents only.
• Don't reduce padding below sm (12px) on cards or containers; maintain the generous spacing philosophy to avoid visual cramping.
• Don't apply border-radius smaller than DEFAULT (8px) to interactive elements; soft corners are a core part of the brand aesthetic.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; always use on-* color tokens (e.g., on-primary, on-secondary) for accessibility and brand consistency.