Eduma

Overview

Eduma is a professional, scalable LMS platform designed for educators, institutions, and course entrepreneurs. The design system embodies "Educational Pragmatism"—a philosophy that prioritizes clarity and conversion without sacrificing sophistication. The visual language combines bold, energetic accent colors (golden yellow #ffb606 and deep purple #442e66) against clean white surfaces and dark-mode alternatives, creating a platform that feels both approachable for beginners and credible for enterprise users. The brand personality is confident, supportive, and action-oriented: we help educators focus on teaching, not wrestling with technology.

The tone is direct and encouraging, avoiding jargon while maintaining authority. Eduma speaks to educators as peers, not as users to be managed. Example sentence in brand voice: "Your course deserves a platform that works as hard as you do—Eduma handles the tech, you focus on inspiring students."

Colors

The Eduma color system is built on a high-contrast, conversion-focused palette. Primary (#ffb606) is a warm, energetic golden yellow deployed on all call-to-action buttons, key links, and interactive highlights—it commands attention without aggression. Secondary (#442e66) is a sophisticated deep purple used for supporting accents, badges, and secondary navigation, grounding the brand in professionalism. Tertiary (#0a66c2) is a corporate blue reserved for informational elements and trust signals. Error (#ff0000) is a vivid red for alerts and destructive actions, ensuring immediate recognition. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (#eeeeee, #dddddd, #999999) to support hierarchy and depth. In dark mode, the surface inverts to #151515 (near

Typography

The type system uses a two-family approach: Wix Madefor Display (800 weight, 72px) for hero headlines creates immediate visual impact and brand recognition, while Roboto Slab (600 weight, 32–48px) handles secondary headlines with warmth and authority. Body copy uses Roboto (400 weight, 15px, 24px line-height) for optimal readability across devices. The hierarchy is strict: display (72px) for page heroes, headline-lg (48px) for section titles, headline-md (32px) for subsections, title-lg (20px) for card titles, body-lg (18px) for feature descriptions, body-md (15px) for standard text, label-md (14px) for UI labels, and label-sm (12px) for metadata. Letter-spacing is tightened on display (−0.04em) and headlines (−0.02em) to enhance impact, while body text uses default spacing for legibility.

Layout

Eduma uses a 12-column fluid grid with a fixed max-width of 1290px and 24px gutters, ensuring responsive scaling from mobile (100% width) to desktop. The page rhythm follows a "breathing" model: hero sections occupy full viewport height (or 60vh minimum), feature sections use 40px (lg spacing) vertical separation, and card grids maintain 24px gaps. Container padding is 24px on desktop, 16px on tablet, and 12px on mobile. The design favors asymmetrical layouts—text-heavy sections pair with image-heavy sections to maintain visual interest. White-space is generous: section margins are never less than lg (40px), and internal card padding is always md (24px) minimum. This spacing scale creates a sense of premium, uncluttered design that guides the eye naturally through the page hierarchy.

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle color shifts. Level 1 (Base): flat surfaces with no shadow, relying on 1px borders at #e7e7e7 for definition. Level 2 (Standard Cards): box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), used on feature cards, input fields, and modals—this creates a gentle lift without visual heaviness. Level 3 (Elevated/Hover): box-shadow: 0 12px 50px rgba(0, 0, 0, 0.4), applied on hover states and prominent modals to signal interactivity. Dark mode inverts shadow opacity slightly (rgba(0, 0, 0, 0.5) for Level 2) to maintain contrast against #151515 bac

Shapes

The shape philosophy is "Approachable Precision"—rounded corners are used strategically to soften the interface without sacrificing clarity. Buttons use full radius (9999px / border-radius: 50px) to feel inviting and modern, while cards use lg (1rem / 16px) for a balanced, professional appearance. Input fields use DEFAULT (0.5rem / 8px) for subtle definition, and badges use full radius for visual distinction. The 20px radius (observed frequently in the DOM) is reserved for larger container elements and modals, creating a visual hierarchy where smaller, more interactive elements are rounder and

Components

Action Elements Buttons are the primary conversion driver. Primary buttons (#ffb606 background, black text, 50px border-radius, 11px 24px padding) use Roboto 600 weight at 14px for maximum legibility and tap-target size (44px minimum height). Hover state transitions to #e6a303 (−15% brightness) over 200ms, providing clear feedback. Secondary buttons (#ff0000 background, white text, 4px border-radius, 12px 24px padding) are reserved for destructive or alternative actions. Ghost buttons (transparent background, #ffb606 text, 2px border) work on dark backgrounds and hover to rgba(255, 182, 6, 0.08) background. All buttons use transition: background-color 200ms ease-out for smooth state changes.

Containers & Surfaces Cards are the primary content container. Standard cards use white ba

Do's and Don'ts

**Do**

• Do use primary yellow (#ffb606) exclusively on CTAs and key interactive elements—it's the brand's signature accent and must remain distinctive.
• Do maintain 24px gutters and 40px section spacing to preserve the premium, breathing aesthetic that differentiates Eduma from cramped competitors.
• Do apply the full-radius (50px) border-radius to all buttons to reinforce the approachable, modern brand personality.
• Do use Wix Madefor Display (800 weight) only for hero headlines (72px+); overuse dilutes its impact.
• Do layer shadows consistently: Level 2 (0 4px 10px rgba(0,0,0,0.15)) for cards, Level 3 (0 12px 50px rgba(0,0,0,0.4)) for hover/modals.
• Do ensure all text over images or dark backgrounds has sufficient contrast; apply text-shadow: 0 2px 4px rgba(0,0,0,0.15) when needed.

**Don't**

• Don't use secondary purple (#442e66) or tertiary blue (#0a66c2) on primary CTAs—they lack the conversion power of primary yellow.
• Don't reduce button padding below 11px 24px or height below 44px; accessibility and tap-target size are non-negotiable.
• Don't apply shadows to flat surfaces or text-only sections; shadows are reserved for elevated cards and interactive elements.
• Don't mix rounded and sharp corners on similar components; maintain consistency within a component family (e.g., all buttons are 50px radius).
• Don't use more than two font families in a single section; Wix Madefor Display + Roboto Slab + Roboto is the maximum.
• Don't exceed 1290px container width on desktop; the fixed max-width ensures readability and prevents content from stretching awkwardly.