GeeksforGeeks

Overview

GeeksforGeeks is an educational technology platform that transforms complex computer science concepts into accessible, digestible learning experiences. The design system embodies "Accessible Clarity"—a philosophy that prioritizes information hierarchy, progressive disclosure, and vibrant accent colors to guide learners through their educational journey. The brand serves students, professionals, and career-changers seeking structured, high-quality technical education. The aesthetic is clean and modern, with a light, open canvas that reduces cognitive load while maintaining visual interest through strategic use of emerald green (#008d5e) as the primary action color, complemented by supporting blues and warm earth tones. The UI evokes confidence and approachability: learning should feel achievable, not intimidating.

The voice is encouraging yet precise, conversational yet authoritative. GeeksforGeeks speaks to learners as peers—never condescending, always practical. Sentences are direct and action-oriented: "Master Data Structures in 30 days with our structured curriculum." The brand personality balances academic rigor with accessibility, using warm, inclusive language while maintaining technical accuracy. Color choices reflect this duality: the emerald green conveys growth and progress, while the neutral grays and whites provide calm, distraction-free learning spaces.

Colors

The color system is built on a foundation of accessibility and educational clarity. **Primary (#008d5e)** is the signature emerald green used exclusively for call-to-action buttons, interactive elements, and key navigation items—it signals "click here" and represents learning progress. **On-Primary (#ffffff)** ensures maximum contrast (WCAG AAA compliant) for text on primary backgrounds. **Primary-Container (#148761)** and **On-Primary-Container (#e9e9ea)** provide a darker, more muted variant for hover states and secondary emphasis, maintaining visual hierarchy without jarring transitions.

**Secondary (#357960)** is a deeper forest green used for supporting accents, badges, and status indicators—it complements primary without competing for attention. **Tertiary (#3498db)** introduces a c

Typography

The type system employs a two-family strategy: **Nunito** (a humanist sans-serif with rounded terminals) is reserved for headlines, buttons, and labels—its friendly, approachable character reinforces the brand's educational mission and makes CTAs feel inviting. **System fonts** (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, etc.) handle body text and long-form content, ensuring optimal legibility and performance across devices. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections and major page titles. Headline-lg (40px, 600 weight) introduces major sections; headline-md (28px, 600 weight) breaks content into digestible chunks. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and feature descriptions, while body-md (16px, 400 wei

Layout

The layout system uses a 12-column grid with a maximum container width of 1350px, providing ample breathing room on desktop while maintaining focus on content. The spacing scale is semantic: **unit (8px)** is the baseline; **sm (12px)** is used for tight component spacing (e.g., icon-to-label gaps); **md (24px)** is the standard gutter for section separation and card padding; **lg (40px)** separates major content blocks (e.g., "Explore" section from "Courses"); **xl (64px)** is reserved for page-level spacing (hero to content, footer margins). The search bar and hero section use full-width layouts with centered content, creating a sense of openness and focus. Cards in the "Explore" grid are laid out 2-up on desktop (6 columns each), 1-up on tablet, with consistent md (24px) gaps between th

Elevation & Depth

Depth is conveyed through a subtle shadow system and strategic use of background color shifts rather than heavy drop shadows. **Level 1 (Base)**: The page background is pure white (#ffffff) with no shadow; this is the neutral canvas. **Level 2 (Cards & Containers)**: Standard cards use a 0 1px 2px rgba(0, 0, 0, 0.06) shadow (elevation.sm) with a 1px border in outline-variant (#bebec2), creating a soft, barely-perceptible lift. **Level 3 (Hover & Elevated States)**: On hover, cards transition to a 0 4px 12px rgba(0, 0, 0, 0.08) shadow (elevation.md) and shift their background to surface-contain

Shapes

The shape philosophy is **Soft-Technical**: rounded corners are present but restrained, reflecting the brand's balance between approachability and precision. **Buttons and pills** use full-radius (9999px), creating a friendly, inviting appearance that encourages clicks—the rounded pill shape is instantly recognizable as interactive. **Cards and containers** use lg (12px) or xl (16px) radius, softening the geometry without sacrificing structure; this radius is applied consistently across all card types (standard, gradient, hover states). **Input fields** use the DEFAULT radius (6px), a subtle r

Components

Action Elements **Button-Primary** is the workhorse of the system. It uses primary (#008d5e) background with white text, 12px 24px padding, 44px height, and full-radius (9999px) border-radius. The label-md typography (14px, 600 weight) ensures readability at all sizes. At rest, it casts a 0 2px 8px rgba(0, 141, 94, 0.15) shadow; on hover, the background shifts to primary-container (#148761), the shadow lifts to 0 4px 12px rgba(0, 141, 94, 0.25), and a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition smooths the change. Active state (pressed) uses secondary (#357960) to provide tactile feedback. **Button-Secondary** is a transparent variant with a 2px solid primary border, used for less-prominent actions (e.g., "Sign In" in the header). On hover, the background fills with surface-container

Do's and Don'ts

**Do**

• Do use primary (#008d5e) exclusively for main CTAs and interactive elements—it's the visual anchor that guides users to action.
• Do apply the 200ms cubic-bezier(0.4, 0, 0.2, 1) transition to all interactive state changes (hover, focus, active) for smooth, predictable motion.
• Do use Nunito for headlines, buttons, and labels to reinforce the friendly, approachable brand voice; reserve system fonts for body text.
• Do maintain md (24px) gutter spacing between major content sections and lg (40px) between hero and body content to create visual rhythm.
• Do apply text-shadow (0 2px 4px rgba(0, 0, 0, 0.15)) to white text on colored backgrounds (gradients, dark cards) for accessibility.
• Do use full-radius (9999px) on buttons and badges to create an instantly recognizable interactive language.

**Don't**

• Don't use secondary (#357960) or tertiary (#3498db) as primary button colors—they dilute the visual hierarchy and confuse users about which action is most important.
• Don't apply shadows heavier than elevation.lg (0 16px 40px rgba(0, 0, 0, 0.12)) on standard UI elements; reserve heavy shadows for modals and overlays only.
• Don't mix Nunito and system fonts within a single headline or button—choose one family per component to maintain visual consistency.
• Don't use border-radius smaller than DEFAULT (6px) on interactive elements; it makes buttons and inputs feel cramped and less inviting.
• Don't apply instant state changes without transitions; always use 200ms cubic-bezier(0.4, 0, 0.2, 1) to signal interactivity smoothly.
• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds without a text-shadow; it reduces legibility and accessibility.