Duoflash

Overview

Duoflash is a gamified learning platform that transforms educational content into an engaging, interactive experience inspired by Duolingo's proven methodology. The design embraces a "Vibrant Minimalism" aesthetic: a dark, focused interface (background #0f171e) serves as a canvas for vivid gradient course cards and bright accent colors (#58cc02 for success, #ffd233 for highlights, #ee5555 for errors), creating a sense of progression and achievement. The brand personality is energetic yet supportive—celebrating small wins, maintaining focus through visual clarity, and using bold typography (Nunito 800 weight on headlines) to command attention without overwhelming the learner.

The voice is encouraging and direct: "You're on a 5-day streak—keep going!" rather than "Your streak is 5 days." Duoflash speaks to learners as partners in their educational journey, using active language, celebrating milestones visibly, and removing friction from the learning loop. Every interaction—from selecting a course to answering a quiz question—is designed to feel rewarding, with smooth animations (200–400ms transitions), satisfying feedback (green success states, red error states), and a serpentine level map that makes progress tangible and explorable.

Colors

The color system is built on a dark, high-contrast foundation optimized for extended learning sessions and visual focus. The surface stack anchors the interface: surface (#0f171e) is the page background, surface-container (#171f33) holds interactive elements like quiz options, and surface-container-highest (#2d3449) provides the topmost layer for elevated modals and overlays. On-surface (#e2e8f0) is the primary text color—a cool, desaturated white that reduces eye strain over long periods.

Primary (#ffffff) is reserved exclusively for call-to-action buttons ("VIEW LESSONS", "CHECK") and interactive states, ensuring maximum affordance and click-through clarity. Secondary (#58cc02) is the brand's signature success and progress color—used for completed levels, correct quiz answers, and the p

Typography

The type system prioritizes clarity and hierarchy through weight contrast rather than size alone. Nunito is the exclusive typeface—a geometric sans-serif that feels friendly and modern while maintaining excellent legibility at all sizes. Headlines use fontWeight 800 (extra-bold) to create visual dominance: display at 60px with -0.04em letter-spacing, headline-lg at 40px with -0.02em, and headline-md at 28px with -0.01em. This aggressive weight creates instant visual hierarchy and ensures course titles and section headers command attention without requiring large sizes.

Body text uses fontWeight 400 at 16px (body-md) with 24px line-height for comfortable reading during quiz questions and explanations. Labels and buttons use fontWeight 800 at 14px with 0.05em letter-spacing to create a dist

Layout

The layout uses a fixed container max-width of 900px centered on the viewport, creating a focused, mobile-first experience that scales gracefully to desktop. The grid is 12 columns with 28px gutters (gutter token), providing consistent spacing between course cards and quiz elements. Page rhythm is driven by semantic spacing: lg (40px) separates major sections (header, course list, quiz area), md (24px) separates cards and components within sections, and sm (12px) provides breathing room inside components. The courses container uses a responsive grid that stacks vertically on mobile and flows horizontally on larger screens, with each course card occupying full width on mobile and ~50% on tablet/desktop.

Whitespace is generous but purposeful—the dark background (#0f171e) acts as negative sp

Elevation & Depth

Depth is conveyed through a three-tier shadow system and subtle transform effects. Level 1 (Base Cards) uses box-shadow: 0 3px 8px rgba(0,0,0,0.15) with a 1px border at rgba(255,255,255,0.1), creating a soft separation from the dark background. Course cards and quiz option cards sit at this level, appearing to float slightly above the surface. Level 2 (Hover/Interactive) applies box-shadow: 0 8px 24px rgba(0,0,0,0.25) with a transform: translateY(-2px) on hover, signaling interactivity and lifting the element further. This transition occurs over 200ms ease-out, creating a snappy, responsive fe

Shapes

The shape philosophy is "Soft-Technical Friendliness"—rounded corners are used consistently to soften the interface while maintaining a modern, app-like feel. Buttons and primary CTAs use rounded.xl (1.5rem / 24px) for a pill-shaped appearance that feels inviting and clickable. Course cards use rounded.xl (24px) to create a cohesive, card-based aesthetic. Quiz option buttons use rounded.lg (1rem / 16px) for a slightly more angular appearance that differentiates them from primary CTAs while maintaining approachability. Input fields and smaller components use rounded.DEFAULT (0.5rem / 8px) or ro

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses backgroundColor {colors.primary} (#ffffff), textColor {colors.on-primary} (#1b242c), rounded {rounded.xl} (24px), padding 12px 32px, and height 48px. Typography is {typography.label-md} (Nunito 800, 14px, 0.05em letter-spacing) to create a bold, action-oriented appearance. On hover, button-primary-hover transitions to backgroundColor {colors.primary-fixed-dim} (#cbd5e1) over 200ms ease-out, providing clear feedback without jarring color shifts. The button-secondary variant uses a transparent background with a 2px solid border at {colors.primary}, allowing secondary actions ("SKIP", "Reset Progress") to coexist without visual dominance.

Containers & Surfaces Course cards use a layered g

Do's and Don'ts

**Do**

• Do use {colors.secondary} (#58cc02) for all success states, correct answers, and progress indicators—it's the brand's signature reward color and creates immediate positive reinforcement.
• Do apply 200–400ms ease-out transitions on all interactive state changes (hover, focus, selected) to create snappy, responsive feedback without feeling sluggish.
• Do maintain the dark surface (#0f171e) as the primary background—it reduces eye strain during extended learning sessions and makes accent colors pop with maximum contrast.
• Do use Nunito fontWeight 800 on all headlines and CTAs to create visual hierarchy through weight contrast rather than size alone, ensuring clarity at any viewport.
• Do layer gradients on course cards (dark overlay + vibrant gradient) to create visual distinction between courses while preserving text readability over variable backgrounds.

**Don't**

• Don't use primary (#ffffff) for anything other than CTAs and interactive elements—it's reserved for affordance and must remain special to maintain click clarity.
• Don't apply shadows larger than 0 8px 24px rgba(0,0,0,0.25) on standard components; reserve the largest shadows for modals and overlays to maintain visual hierarchy.
• Don't use rounded.DEFAULT (8px) or rounded.md (12px) on buttons or course cards—these sizes feel utilitarian and undermine the friendly, inviting aesthetic.
• Don't mix typefaces; Nunito is the exclusive font family across all text elements, including math formulas rendered via KaTeX (which uses its own serif fonts for equations).
• Don't apply letter-spacing tighter than -0.04em on display text or looser than 0.08em on labels—maintain the specified values to preserve the geometric, modern feel of Nunito.