Terus E-Learning

Overview

Terus E-Learning is a specialized technology services platform serving educational institutions and corporate learning teams. The brand embodies a 'Tech-Forward Minimalism' aesthetic—combining deep navy (#0b1c3e) as a grounding, professional canvas with electric cyan (#00e5ff) as the signature accent that signals innovation, clarity, and forward momentum. The UI evokes a sense of precision and accessibility: complex e-learning infrastructure made simple, elegant, and trustworthy. Every interaction feels responsive and purposeful.

The brand voice is direct, knowledgeable, and approachable—never jargon-heavy, never condescending. Terus speaks to educators and developers as peers: confident in expertise, humble about complexity, eager to solve real problems. Tone examples: 'Bespoke Moodle plugins built for scale' (specific, not vague); 'From configuring to 24/7 support' (comprehensive, not overwhelming); 'Transform static materials into immersive digital experiences' (aspirational, grounded in capability). The vocabulary favors concrete action verbs (configure, troubleshoot, integrate, transform) over abstract marketing language.

Colors

The color system is built on a high-contrast, tech-forward palette designed for clarity and accessibility. **Primary Surface (#0b1c3e)** is the dominant background—a deep navy that conveys professionalism, stability, and a modern tech aesthetic. It is never used as text; it is the canvas. **On-Surface (#ffffff)** is pure white, providing maximum contrast for readability at 16px body text (WCAG AAA compliant). **Tertiary / Accent (#00e5ff)** is the brand's signature electric cyan—used exclusively on primary CTAs (buttons, links, focus states), icons, and brand-critical highlights. This color appears in the 'Contact Us' button (padding 16px 40px, border-radius 9999px, box-shadow 0 4px 16px rgba(0, 229, 255, 0.2)) and all interactive affordances. **Secondary (#4a90e2)** is a supporting blue u

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys modernity and technical precision. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and brand statements—the Terus logo treatment uses this scale. Headline-lg (40px, 700 weight) anchors major section titles like 'Core Services' and 'Other Products'. Headline-md (28px, 600 weight) is used for subsection headers and card titles. Body-lg (18px, 400 weight, 28px line-height) is the primary copy size for hero descriptions and feature callouts—the tagline 'Specialists in VLE support, bespoke plugin development, and engaging instructional design' uses this scale. Body-md (16px, 400 weight, 24px line-height) is the default paragraph text and input field text. Label-md (14px, 700 weight, 0.0

Layout

The layout uses a 12-column grid system with a max-width of 1280px (container mx-auto px-6 in Tailwind). The page rhythm alternates between full-bleed hero sections (min-height 100vh) and content sections with py-32 md:py-48 (128px to 192px vertical padding). Horizontal gutter is consistently 24px (px-6 at all breakpoints). The hero section (min-h-screen flex items-center justify-center) centers content vertically and horizontally, with a gradient-to-t fade at the bottom (h-32 bg-gradient-to-t from-background to-transparent). Service cards use md:grid-cols-3 gap-8, creating three equal columns on medium+ screens with 32px gaps. The 'Other Products' section uses lg:grid-cols-2 gap-12 for a two-column layout with 48px gaps. Spacing tokens follow a semantic scale: xs (4px) for micro-interacti

Elevation & Depth

Depth is achieved through a layered glass-morphism system combined with subtle shadows. **Level 1 (Base)**: The background (#0b1c3e) with animated blob gradients (blur-[80px], opacity 0 to create a subtle animated depth effect). **Level 2 (Standard Card)**: backdrop-filter blur(10px), background rgba(255, 255, 255, 0.05), border 1px solid rgba(255, 255, 255, 0.1), box-shadow 0 4px 12px rgba(0, 0, 0, 0.08). Cards in the 'Core Services' section use this treatment. **Level 3 (Elevated/Large Container)**: backdrop-filter blur(20px), background rgba(255, 255, 255, 0.08), border 1px solid rgba(255,

Shapes

The shape philosophy is 'Geometric Precision with Approachable Softness'—sharp enough to feel technical and modern, rounded enough to feel human and accessible. **Buttons** use border-radius 9999px (full pill shape), creating a friendly, clickable affordance that stands out against the angular grid. The 'Contact Us' button and 'Explore Our Services' CTA both use this radius. **Cards and Containers** use border-radius 1rem (16px) for standard cards and 1.5rem (24px) for elevated containers like the 'Other Products' section. The 'Other Products' glass container uses rounded-[3rem] (48px), a more

Components

Action Elements Primary buttons (button-primary) use background {colors.tertiary} (#00e5ff), text color {colors.on-tertiary} (#0b1c3e), padding 16px 40px, height 48px, border-radius 9999px, and box-shadow 0 4px 16px rgba(0, 229, 255, 0.2). On hover (button-primary-hover), the background shifts to #00b8cc and shadow expands to 0 8px 24px rgba(0, 229, 255, 0.3). On active (button-primary-active), background becomes #0088a0 and shadow contracts to 0 2px 8px rgba(0, 229, 255, 0.15). Transition duration is 150ms cubic-bezier(0.4, 0, 0.2, 1). Secondary buttons use transparent background, 2px border in {colors.tertiary}, and text color {colors.tertiary}, with hover state background rgba(0, 229, 255, 0.1). All button text uses {typography.label-md} (14px, 700 weight, 0.01em letter-spacing).

#

Do's and Don'ts

**Do**

• Do use {colors.tertiary} (#00e5ff) exclusively for primary CTAs, focus states, and brand-critical highlights—it is the signature accent and should never be diluted.
• Do apply backdrop-filter blur(10px to 20px) and rgba(255, 255, 255, 0.05 to 0.12) to all glass surfaces to maintain the frosted-glass aesthetic while preserving legibility.
• Do use {typography.label-md} (14px, 700 weight) for all button text and navigation links to create consistent, scannable interactive affordances.
• Do maintain 24px horizontal gutter (px-6) and lg spacing (40px) for section separation to create breathing room and visual hierarchy.
• Do use border-radius 9999px (full pill) for primary buttons and border-radius 1.5rem (24px) for cards to balance modernity with approachability.

**Don't**

• Don't use {colors.tertiary} (#00e5ff) for body text, backgrounds, or non-interactive elements—it is reserved for CTAs and focus states to maintain visual clarity.
• Don't apply shadows darker than rgba(0, 0, 0, 0.15) or blur filters stronger than blur(20px)—the dark-mode aesthetic requires restraint to avoid muddiness.
• Don't mix border-radius values arbitrarily; use the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency across components.
• Don't reduce padding or gutter below {spacing.md} (24px) in content sections—white-space is a design feature, not a constraint to minimize.