Switch between the rendered Visual preview and the Raw DESIGN.md.
Wall Street English embodies a professional, global learning platform with a modern, approachable aesthetic. The design system balances corporate sophistication with educational warmth, using a deep navy foundation that conveys trust and expertise, paired with vibrant cyan accents that represent innovation and clarity. The visual language emphasizes clean, minimal components with generous whitespace, supporting a learning-focused environment where content takes priority. The typography is bold and hierarchical, guiding users through educational journeys with confidence. This is a system designed for international audiences, prioritizing clarity, accessibility, and visual consistency across diverse devices and languages.
Key Characteristics
#003359): Primary brand color, used extensively for text, navigation, and foundational UI elements. Establishes corporate trust and stability. Apply to headings, primary text, and key interactive states.#CDDEFF): Soft, desaturated variant for subtle backgrounds and secondary visual elements. Use sparingly for hover states or low-emphasis surfaces.#4DD4F5): Energetic, high-contrast accent for drawing attention to key actions and innovations. Use for highlights, secondary CTAs, and visual callouts.#64CFE9): Softer cyan variant for layered accent effects and secondary accent states. Use for supporting visual elements and transitions.#F12C3E): High-contrast red for error states, validation failures, and destructive actions. Ensure sufficient contrast against backgrounds. Critical for form feedback and alerts.#FFD200): Warm yellow for warning states, cautionary messaging, and non-critical notifications.#000000): Pure black for strong text contrast and emphasis. Apply judiciously for maximum impact on body text and headlines.#4A4A4A): Mid-tone gray for secondary text, descriptions, and de-emphasized content. Softer than black while maintaining readability.#D6D6D6): Light gray for borders, dividers, and subtle background tints. Creates visual separation without dominance.#FFFFFF): Primary surface and background color for cards, modals, and content areas. Maintains clean, minimalist aesthetic.rgba(0, 0, 0, 0)): Used for borderless buttons, link styles, and ghost components that prioritize content over decoration.Primary: Noto Sans with fallback stack Noto Sans, -apple-system, BlinkMacSystemFont, Segoe UI, sans-serif. Used for headings, navigation, and structured content to ensure global character support and professional consistency.
Secondary: System sans-serif with fallback stack sans-serif, -apple-system, BlinkMacSystemFont, Segoe UI. Used for body text, forms, and interactive elements to ensure reliable rendering across all platforms.
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Noto Sans | 56px | 800 | 72px | 0px | Page hero titles and major section headers |
| Heading 1 | Noto Sans | 48px | 800 | 55.68px | 0px | Primary section headings |
| Heading 2 | Noto Sans | 32px | 800 | 40px | 0px | Secondary section headings and card titles |
| Heading 3 | Noto Sans | 18px | 700 | 27px | 0px | Tertiary headings and subsection titles |
| Body | sans-serif | 15px | 400 | 24px | 0px | Primary body text, paragraphs, and descriptions |
| Button | sans-serif | 15px | 700 | 22.5px | 0px | Button labels and interactive text |
| Navigation | Noto Sans | 16px | 400 | 24px | 0px | Menu items and navigation links |
| Caption | sans-serif | 13px | 400 | 20px | 0px | Metadata, timestamps, and helper text |
| Code | monospace | 14px | 400 | 21px | 0px | Code snippets and technical content |
#F12C3E (Error red, used as energetic primary CTA)#FFFFFF (white for maximum contrast)15px 24px (horizontal breathing room for readability)0px (sharp edges, modern minimal aesthetic)0px nonenone#D9233A with subtle opacity increase#C41F32, reduce opacity slightly2px solid #003359 outline with 2px offset#FFFFFF with 1px solid #003359 border#003359 (navy)15px 24px0px1px solid #003359none#003359, text becomes #FFFFFF0.8rgba(0, 0, 0, 0) (transparent)#003359 (navy)0px 0px (text-only, inline style)0px0px nonenonergba(0, 51, 89, 0.8)#64CFE9 (cyan secondary)rgba(0, 0, 0, 0) (transparent)#003359 (navy)0px 0px32px minimum touch target0pxrgba(0, 51, 89, 0.05), text to #64CFE9#FFFFFF#003359 (navy)22.5px (vertical), 0px (horizontal) for flexible content0px (flat, minimal aesthetic)0px nonergba(0, 0, 0, 0.02) 0px 2px 5px 0px, rgba(0, 0, 0, 0.08) 0px 30px 60px 0px (subtle depth)24px horizontal, 32px vertical#FFFFFF4px solid #F12C3E (red accent stripe for visual emphasis)24px with left padding increased to 28px (accommodate border)rgba(0, 0, 0, 0.08) 0px 30px 60px 0px (elevated depth)rgba(0, 0, 0, 0.12) 0px 40px 80px 0px#FFFFFF or transparent based on layout context56px (vertical sections), 44px (horizontal, responsive to 24px on mobile)1128px (constrained to optimal reading width)0 auto (center aligned for symmetry)#FFFFFF#003359 (navy for typed content)rgba(0, 51, 89, 0.5) (muted navy)15px 16px (comfortable internal spacing)1px solid #D6D6D6 (light gray)0px (consistent with button/card aesthetic)1px solid #4DD4F5 (cyan), outline 2px solid #4DD4F5 with 2px offset1px solid #F12C3E (red), background tints to rgba(241, 44, 62, 0.05)#D6D6D6, text color #4A4A4A, cursor not-allowed#003359 (navy)0px 0px 8px 0px (space above input)#4A4A4A (charcoal for secondary information)4px 0px 0px 0px (small gap below input)#FFFFFF112px (tall, spacious for international audience usability)100% (full-width container)0px 44px (horizontal breathing room)none (flat aesthetic, no elevation)space-between alignmentrgba(0, 0, 0, 0.65) (muted dark, soft hierarchy)0px 16px (horizontal spacing between items)0px (no underline by default)#003359, underline appears as 2px solid #F12C3E#003359, underline 2px solid #F12C3E (persistent)48px (centered vertically within navbar)align-items: centerauto (pushes navigation links to right)#64CFE9 (cyan secondary for high contrast)#003359 (navy for readability)12px 20px24px (slightly rounded for friendly CTA appearance)#4DD4F5 (primary cyan)#FFFFFF1px solid #D6D6D6 (divider line)gap: 0px (tabs adjacent, no spacing)rgba(0, 0, 0, 0.65) (muted)16px 24px2px solid transparentpointer#003359, border bottom 2px solid #D6D6D6#003359 (navy)16px 24px2px solid #F12C3E (red underline for visual indicator)rgba(77, 212, 245, 0.05) (barely visible cyan)#CDDEFF (light navy)#003359 (navy)4px 12px999px (fully rounded for badge appearance)0px nonergba(241, 44, 62, 0.1) (light red tint)#F12C3E (red)4px 12px999pxrgba(76, 200, 100, 0.1) (light green tint)#4CC864 (green, inferred for success semantics)4px 12px999pxThe spacing system is built on a base unit of 4px, scaled to create rhythm and hierarchy. All spacing values are multiples of this base to ensure consistency and alignment across the design system.
Usage Context:
44px for full-width sections, 24px for cards and containers56px for major section separation, 24px–32px for content blocks8px–16px for inline elements, 24px–32px for block elements8px between label and input, 4px between input and helper text1128px (optimal reading width for international educational content, balanced between form and functionality)44px on desktop (responsive to 24px on tablet, 16px on mobile)24px gaps, allowing 1–4 column layouts depending on contentmargin: 0 auto with padding maintained at edgeGenerous whitespace is foundational to the Wall Street English design system. Content is never crowded; instead, each element breathes with surrounding space. This supports focus and reduces cognitive load for international learners. Vertical rhythm uses consistent multiples of the base spacing unit, creating predictable patterns that guide the eye. Horizontal whitespace prevents line-length fatigue; container max-width ensures comfortable reading. Negative space is treated as a design element, not wasted area.
| Level | Treatment | Use |
|---|---|---|
| Base (None) | No shadow | Standard cards, inputs, buttons, navigation |
| Hover / Interactive | rgba(0, 0, 0, 0.02) 0px 2px 5px 0px | Dropdown menus, expanded states, subtle lift |
| Elevated / Featured | rgba(0, 0, 0, 0.08) 0px 30px 60px 0px | Featured cards, overlays, important content blocks |
| Modal / Maximum | rgba(0, 0, 0, 0.12) 0px 40px 80px 0px | Modals, dialogs, cookie consent overlays, maximum focus demand |
Shadow Philosophy:
The design system uses minimal shadows to maintain the flat, modern aesthetic while providing subtle depth cues for interactive hierarchy. Shadows are reserved for components requiring visual distinction from their background context—primarily cards, modals, and interactive elements in hover/active states. The shadow values are soft and diffuse, avoiding harsh drop-shadow effects that feel dated. Shadows scale with component importance: base components have no shadow, interactive/expanded states have light shadows, and critical overlays (modals, consent dialogs) have elevated shadows to establish clear foreground focus. This restraint keeps the interface clean while preserving usability cues.
| Breakpoint | Width | Key Changes |
|---|---|---|
| Mobile | 320px–767px | Single column layouts, container padding reduces to 16px, font sizes scale down 10–15%, navbar height compresses to 64px, hamburger menu replaces horizontal navigation |
| Tablet | 768px–1024px | 2-column layouts, container padding 24px, font sizes maintain desktop scale, navbar remains 112px with flexible wrapping, touch targets maintain 44px minimum |
| Desktop | 1025px–1440px | Full 12-column grid, container padding 44px, max-width 1128px enforced, multi-column layouts, hover states fully enabled |
| Wide | 1441px+ | Max-width 1128px maintained, extra padding added to sides, multi-column grids expanded with additional gaps, full-width sections with centered content |
44px × 44px for all interactive elements (buttons, links, form controls, icon buttons)12px–16px around touch targets to prevent accidental activation8px–16px minimum horizontal spacing, 16px vertical spacing15px 20px on mobile for comfortable thumb interaction; avoid placing critical actions near screen edges768px. Menu items shift to full-height drawer with touch-friendly 44px link height.24px to 16px at tablet, 8px at mobile.56px to 32px (tablet), then 24px (mobile). Container padding reduces from 44px to 24px (tablet), then 16px (mobile).16px gaps. Featured cards maintain left border at all breakpoints.8px label-to-input spacing across devices.#F12C3E) — use for "Allow all", "Get in touch", and primary action buttons#003359) — use for all heading text, navigation links, and primary body text#4DD4F5) — use for secondary CTAs, highlights, and hover states#FFFFFF) — all cards, modals, input fields, and content containers#4A4A4A) — secondary text, descriptions, helper text, and captions#D6D6D6) — input borders, section dividers, and subtle separation#CDDEFF) — badge defaults and subtle background tints#F12C3E) — form validation, error messages, and destructive confirmations#4CC864, inferred) — form success, checkmarks, and positive feedback#FFD200) — non-critical alerts and cautionary messagingAll text must use Navy Deep (#003359) or Charcoal (#4A4A4A) by default. Headings, navigation, and primary body text use navy; secondary text and helper text use charcoal. Reserve red (#F12C3E) for critical actions and error states only.
Every button must declare its type (primary, secondary, ghost). Primary buttons use red background (#F12C3E) with white text and no border. Secondary buttons use white background with navy border and navy text. Ghost buttons are transparent with navy text only.
All card and container components use 0px border radius and white backgrounds. Apply the elevation shadow system consistently: no shadow for base state, light shadow for hover/interactive, elevated shadow for featured cards, maximum shadow for modals.
Typography must follow the strict hierarchy table: headings use Noto Sans weights 700–800, body uses sans-serif weight 400, buttons use weight 700. Never deviate from the specified sizes (48px, 32px, 18px for headings; 15px for body/buttons).
Spacing follows the 4px base unit scale. Padding uses 16px, 24px, 44px, or 56px. Margins use 8px, 24px, 32px, or 56px. Never use arbitrary values; align all spacing to the defined scale.
Form inputs and interactive elements must meet 44px minimum touch target on mobile. Inputs use 15px padding with 1px border (#D6D6D6), changing to cyan focus state (#4DD4F5). Labels use 700 weight, 15px size, navy color.
Navigation bars are 112px tall on desktop (64px on mobile), full-width, white background, no shadow. Links use Noto Sans 16px, muted color (rgba(0,0,0,0.65)), with navy text and red underline on hover/active.
All modals and overlays use the maximum elevation shadow (rgba(0, 0, 0, 0.12) 0px 40px 80px 0px) to establish clear foreground focus. Modal backgrounds use white with navy text.
The color palette is fixed to 10 colors; never introduce new colors. If a new semantic is needed (success, info), use the existing palette: greens are inferred from context, blues/teals use cyan values, warnings use yellow (#FFD200).
Container max-width is always 1128px on desktop, centered with 44px padding. On tablet, padding reduces to 24px; on mobile, 16px. Breakpoints are 768px (tablet), 1025px (desktop), 1441px (wide).