EduLink by Ergo Solutions

Overview

EduLink is an enterprise knowledge management and employee training platform designed for organizations that demand precision, scalability, and visual clarity. The design system embodies "Technical Minimalism"—a philosophy that strips away decorative excess while maintaining sophisticated visual hierarchy through strategic use of the brand's signature forest green (#215733) accent. The interface serves as a transparent window into complex corporate data, prioritizing legibility and cognitive efficiency. The brand personality is authoritative yet approachable: confident in its technical capabilities, but never intimidating. Voice example: "EduLink centralizes your team's knowledge in one living ecosystem—no more scattered documents, no more lost context."

Colors

The color system is anchored by a deep forest green primary (#215733), which appears on all primary CTAs, active states, and brand-critical interactive elements. This green conveys trust, growth, and institutional stability—essential for enterprise adoption. The surface stack ranges from near-white (#f2f2f2) for the main canvas to darker grays (#181818) for primary text, creating a high-contrast, accessible reading environment. Secondary colors include a professional cyan (#26a5e4) for data visualization and a vibrant teal (#25d366) for success states and highlights. Error states use a muted red (#cf2e2e). The outline color (#8faeb5) is a soft blue-gray, used for borders and dividers to avoid harsh black lines. All interactive elements transition through the primary-container shade (#2c7a4

Typography

The type system pairs InterTight (a geometric, technical sans-serif) for all headings and display text with Montserrat (a humanist sans-serif) for body copy and UI labels, and Geist (a monospace variant) for button text and data-heavy contexts. This three-font strategy creates clear visual separation between hierarchical levels while maintaining a cohesive, modern aesthetic. Display text (60px, 500 weight, -0.02em letter-spacing) commands attention in hero sections; headline-lg (40px) anchors major sections; body-md (16px, 400 weight) ensures comfortable reading at 24px line-height. Button labels use Geist at 14px with uppercase text-transform and 0.01em letter-spacing, creating a technical, authoritative tone. Small labels (11px, 300 weight, -0.02em letter-spacing) are used sparingly for

Layout

The layout follows a 12-column grid with a fixed max-width of 1400px, providing a stable container for enterprise dashboards and content-heavy pages. The spacing scale uses semantic tokens: lg (40px) separates major sections, md (24px) creates breathing room between components, and sm (12px) tightens related elements. The gutter is consistently 24px on desktop, reducing to 15px on tablet and mobile. White-space is generous—sections are padded top/bottom with 60px (reducing to 40px on mobile), preventing visual fatigue in data-dense interfaces. Container padding uses 15px on all sides, ensuring content never touches viewport edges. The system favors a single-column layout on mobile, transitioning to 2-3 columns on tablet and full grid on desktop, maintaining readability across all breakpoin

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic drop-shadows. Level 1 (base surface) has no shadow, establishing the canvas. Level 2 (cards, modals) uses box-shadow: 0 4.4px 5.5px -3.3px rgba(0, 0, 0, 0.1), creating a soft, barely-perceptible lift. Level 3 (elevated modals, popovers) uses box-shadow: 0 11px 13.75px -2.75px rgba(0, 0, 0, 0.1), increasing depth without harshness. Hover states add a subtle 2-4px vertical translate with a slightly stronger shadow (0 8px 24px rgba(33, 87, 51, 0.2) for primary buttons), signaling interactivity. Glass-morphism is avoided; i

Shapes

The shape language follows "Soft-Technical Precision"—rounded corners are used strategically to soften the rigidity of data-driven interfaces without sacrificing professionalism. Buttons and CTAs use full border-radius (100px / 9999px), creating pill-shaped elements that feel approachable and clickable. Cards and containers use 25px (1.5rem) border-radius, balancing softness with definition. Input fields and smaller components use 4px (0.25rem) for subtle rounding that preserves their functional appearance. Hero cards use 25px radius to match the card aesthetic. The rationale: full-radius butt

Components

Action Elements Primary buttons (#215733 background, white text, Geist 14px uppercase) use 100px border-radius and 23px vertical / 30px horizontal padding, creating a 56px height. On hover, the background transitions to #2c7a4d with a 2px upward translate and a 0.4s cubic-bezier(0.22, 1, 0.36, 1) animation, signaling responsiveness. Secondary buttons use a light gray background (#ececec) with dark text, 15px vertical / 20px horizontal padding, and a 1px outline-variant border. All buttons include a 20px gap for icon+text layouts and support SVG icons with automatic color inheritance.

Containers & Surfaces Hero cards use rgba(24, 24, 24, 0.85) background with backdrop-filter: blur(8px) and a 1px rgba(255, 255, 255, 0.1) border, creating a frosted-glass effect over dark backgrounds.

Do's and Don'ts

**Do**

• Do use the primary green (#215733) exclusively for primary CTAs, active states, and brand-critical interactions—never dilute it with secondary uses.
• Do maintain 60px section padding (top/bottom) on desktop to prevent cognitive overload in data-dense layouts; reduce to 40px on mobile.
• Do apply the full 100px border-radius to all primary buttons to create instant visual recognition and reduce decision friction.
• Do use InterTight for all headings and Montserrat for body copy—never reverse these pairings, as it breaks the visual hierarchy.
• Do include a 0.4s cubic-bezier(0.22, 1, 0.36, 1) transition on all interactive elements (buttons, cards, inputs) to signal responsiveness without feeling sluggish.
• Do use the outline-variant color (#8faeb5) for all borders and dividers instead of black or gray—it's softer and more cohesive with the brand.

**Don't**

• Don't use the primary green for backgrounds or large surface areas—reserve it for accents and interactive elements only.
• Don't apply box-shadow values stronger than 0 16px 40px rgba(0, 0, 0, 0.12); stronger shadows feel dated and break the minimalist aesthetic.
• Don't mix Geist (monospace) with body copy—it's reserved for button labels and data-heavy contexts where technical precision is needed.
• Don't use sharp corners (0px border-radius) on buttons or cards; the brand requires at least 4px rounding for a professional, approachable feel.
• Don't apply text-transform: uppercase to body copy or headings—uppercase is reserved for button labels and small UI labels only.
• Don't use colored shadows (e.g., green-tinted shadows); all shadows must use neutral black at low opacity (0.06–0.2 alpha).