FutureLang

Overview

FutureLang is a comprehensive online English learning platform designed for Vietnamese elementary and middle school students, delivering international-standard instruction across all four language skills: listening, speaking, reading, and writing. The brand embodies an "Educational Optimism" aesthetic—combining vibrant, energetic color blocking (bright orange #FFA500 and vivid blue #0D6EFD backgrounds) with playful, approachable illustrations and a clean, modern interface. The design evokes confidence, progress, and joy in learning, positioning English acquisition as an exciting, achievable journey rather than a daunting academic task.

The FutureLang voice is encouraging yet precise: conversational, never condescending, and grounded in measurable outcomes. Vocabulary emphasizes capability ("master," "unlock," "achieve") and inclusivity ("for every learner," "your pace"). The tone is warm but professional—a trusted mentor, not a peer. Example sentence in brand voice: "Unlock fluency in 9–10 weeks with our proven, interactive curriculum designed for your learning style."

Colors

The FutureLang color system is built on a triadic foundation: a warm, energetic orange (#FFA500) as the primary accent for hero sections and emotional engagement; a vibrant blue (#0D6EFD) as the secondary action color for buttons, links, and interactive elements; and a golden yellow (#FFC107) as a tertiary highlight for badges, progress indicators, and celebratory moments. The primary red (#FF5A5F) is reserved for call-to-action buttons ("Đầu Tương" and "Vào Học" buttons in the header), creating urgency and drawing the eye to enrollment pathways. Neutrals are clean and minimal: white (#FFFFFF) for surfaces, light gray (#F8F9FA) for container backgrounds, and dark charcoal (#212529) for body text. The error state uses a clinical red (#DC3545) for validation messages and warnings. All intera

Typography

The typography system uses Roboto as the primary typeface, loaded from Google Fonts (wght@400;500;600;700), paired with Quicksand for accent headings where a friendlier, more approachable tone is needed. Display (60px, 700 weight, -0.04em tracking) anchors hero sections with maximum visual impact; Headline-lg (40px, 600 weight, -0.02em) is used for major section titles like "TẠI SAO BẠN NÊN LỰA CHỌN FUTURELANG?"; Headline-md (28px, 600 weight) breaks up content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is the default for justified paragraph text, as seen in the "addReadMore" component; Body-md (16px, 400 weight, 24px line-height) is used for secondary content and descriptions. Label-md (14px, 600 weight, 0.01em tracking) is applied to navigation links and button

Layout

FutureLang uses a 12-column fluid grid with a fixed max-width of 1269px, centered on the viewport. The page rhythm alternates between full-width hero sections (orange and blue backgrounds with 0px padding) and contained content sections (24px gutter on each side, md spacing). The container-xl class enforces max-width: 1269px for all main content blocks, ensuring consistent alignment across breakpoints. Spacing is semantic: lg (40px) separates major sections (hero to feature grid, feature grid to testimonials); md (24px) is used for card padding and section internal spacing; sm (12px) for list item padding and form field margins. The hero section uses a 40px top padding and 64px bottom padding (xl spacing) to create breathing room around the call-to-action. Mobile breakpoints (max-width: 76

Elevation & Depth

Elevation in FutureLang is achieved through a restrained shadow system and strategic background color shifts, avoiding the heavy drop-shadows of older design trends. Level 1 (Base): flat white surface (#FFFFFF) with no shadow, used for body and card backgrounds. Level 2 (Raised Card): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), applied to standard cards and form inputs, creating a subtle lift. Level 3 (Elevated/Hover): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), triggered on card-hover and button-hover states, signaling interactivity. Level 4 (Modal/Overlay): box-shadow: 0 16px 40px rgba(0, 0,

Shapes

FutureLang employs a "Friendly Modernism" shape philosophy: rounded corners are used generously but not excessively, creating an approachable, non-corporate feel. Buttons use full border-radius (9999px) to create pill-shaped CTAs that feel inviting and clickable—the primary red button ("Vào Học") and secondary pink button ("Đầu Tương") both use this treatment. Cards and containers use lg (1rem / 16px) border-radius, a sweet spot between sharp and overly soft. Input fields use a tighter 20px radius (custom, not from the scale) to suggest a contained, focused interaction space. The form input in

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses {colors.primary} (#FF5A5F) background, {colors.on-primary} (#FFFFFF) text, label-md typography (14px, 600 weight), full border-radius (9999px), and 12px 32px padding, resulting in a 48px height. On hover, the background shifts to #FF3D42 with a 0.2s ease transition, providing clear visual feedback. The button-primary-hover state is a separate component entry to allow design systems to reference it independently. The button-secondary uses {colors.secondary} (#0D6EFD) with identical padding and height, supporting secondary actions like "Learn More." Ghost buttons (button-ghost) have a transparent background, {colors.primary} text, and a 1px solid border in {colors.primary}, used for tertiary