Kontent Squad

Overview

Kontent Squad is an AI-powered creator education platform that transforms complex content creation skills into accessible, modular masterclasses. The design language embraces **Luminous Minimalism**—a contemporary aesthetic that combines crystalline clarity with soft, atmospheric depth. The UI celebrates the intersection of technology and creativity through a predominantly white canvas (surface: #ffffff) punctuated by a vibrant, energetic blue accent (primary: #2f7bff), creating a sense of forward momentum and intellectual clarity. The brand personality is confident yet approachable: it speaks to ambitious creators with precision and optimism, never condescending. The visual system uses floating gradient orbs (radial-gradient with 18–26s animation cycles), soft backdrop-filter blur (14–20px), and a 64px grid underlay to evoke a sense of infinite possibility within a structured framework.

The voice is direct, action-oriented, and grounded in results. Kontent Squad avoids hype; instead, it emphasizes mastery, speed, and tangible outcomes. Example sentence in brand voice: 'Stop spending hours watching random tutorials. Master AI Thumbnail Designing in one place, with lifetime access and a live community.'

Colors

The color system is anchored by a luminous white surface (surface: #ffffff, background: #ffffff) that serves as the primary canvas, allowing the accent blue to command attention without visual fatigue. The primary accent—#2f7bff (RGB 47, 123, 255)—is deployed on all interactive CTAs, focus states, and brand-defining moments; it appears in gradients (linear-gradient(145deg, #3b86ff, #1e5fd8)) on buttons and logo marks to convey energy and forward motion. Secondary blue (#1e5fd8, RGB 30, 95, 216) is used for hover states and elevated emphasis, creating a two-tone accent system that guides interaction hierarchy. The surface stack progresses from pure white (#ffffff) through soft blue tints (surface-dim: #f4f8ff, surface-container-high: #e8f1ff, surface-container-highest: #dbe8ff) to support l

Typography

The type system pairs Onest (a geometric, tech-forward sans-serif from Google Fonts) for all display and heading layers with Inter (a humanist sans-serif) for body and label content. This pairing creates a dual-personality hierarchy: Onest's bold, angular forms (font-weight: 800 at 81.92px for display, 800 at 60px for headline-lg) convey confidence and modernity, while Inter's warm, open letterforms (font-weight: 400 at 16–19px for body) ensure readability and approachability. Display text uses aggressive letter-spacing (-2px) and tight line-height (0.96–1.02) to maximize impact on hero sections; body text maintains generous line-height (1.7–1.75) and neutral letter-spacing (0em) for comfort during extended reading. Labels and CTAs use Onest at 600–700 weight with 0.01–0.08em letter-spacin

Layout

The layout employs a fluid 12-column grid with a max-width container of 1240px (width: min(1240px, 92%)) that adapts gracefully to all screen sizes. Sections use consistent vertical rhythm: hero padding is 150px top / 90px bottom; flagship and curriculum sections use 100–110px vertical padding to create breathing room. Horizontal spacing follows a semantic scale: gutter (24px) for standard section margins, lg (40px) for major section separation, and md (24px) for card-to-card gaps. The hero grid uses a 1.05fr / 0.95fr column split to favor the left text column while maintaining visual balance with the right-side image frame. Cards and containers use 38px padding internally, with 16px padding for smaller input fields and 12px for compact list items. The fixed navigation bar sits at top: 18p

Elevation & Depth

Depth is achieved through a layered shadow and backdrop-filter system that maintains the luminous aesthetic without introducing darkness. Level 1 (Base): The fixed background scene uses radial-gradients (1200–1400px at 12–88% positions) in soft blues (#dbe8ff, #e6efff, #e8f1ff) with 55–60% fade-out, creating atmospheric depth without obscuring content. Level 2 (Standard Cards & Glass Surfaces): backdrop-filter: blur(14px) with background: rgba(255,255,255,0.70) and a 1px border at rgba(47,123,255,0.14); shadow: 0 30px 70px rgba(30,70,160,0.14). Level 3 (Elevated/Modals & Hover States): backdro

Shapes

The shape language follows **Soft-Technical Precision**: rounded corners are used strategically to soften geometric forms while maintaining a sense of structure and intentionality. Buttons and pills use border-radius: 40px (full rounded, approaching 50%) to create approachable, friendly CTAs; the nav bar uses 60px for a more pronounced pill shape that signals premium positioning. Cards and containers use 30px (hero-frame) to 38px (price-card) for a balanced, modern feel—not too sharp, not overly organic. Input fields and smaller UI elements use 10px (DEFAULT) to 14px (md) for subtle rounding t

Components

Action Elements Buttons use a dual-state system: **button-primary** (background: linear-gradient(145deg, #3b86ff, #1e5fd8), color: #ffffff, padding: 16px 30px, border-radius: 40px, box-shadow: 0 10px 28px rgba(47,123,255,0.35)) for primary CTAs like 'Enroll — $20'; **button-primary-hover** escalates the shadow to 0 16px 36px rgba(47,123,255,0.5) and applies transform: translateY(-2px) with a 0.25s cubic-bezier transition. **button-ghost** uses background: rgba(47,123,255,0.08), color: #1e5fd8, border: 1px solid rgba(47,123,255,0.14), and border-radius: 40px for secondary actions; on hover, background increases to rgba(47,123,255,0.15) and shadow becomes 0 12px 28px rgba(47,123,255,0.18). All buttons use font-family: Onest, font-weight: 600, font-size: 16px (label-md) to ensure clarity

Do's and Don'ts

**Do**

• Do use the primary blue (#2f7bff) exclusively on CTAs, focus states, and brand-defining moments—never dilute it with secondary uses.
• Do maintain the luminous white canvas (surface: #ffffff) as the dominant background; use the surface-container stack only for subtle layering, never for primary content areas.
• Do apply backdrop-filter: blur(14–20px) consistently on glass surfaces to reinforce the crystalline aesthetic; pair with 1px borders at rgba(47,123,255,0.14) for visual separation.
• Do use Onest (font-weight: 800) for all headlines and display text; reserve Inter (font-weight: 400–500) for body and labels to maintain the dual-personality hierarchy.
• Do animate interactive elements with 0.25–0.4s transitions on transform and box-shadow; use cubic-bezier(.5,.05,.2,1) for menu slides and ease for standard interactions.
• Do scale typography fluidly with clamp() functions to maintain hierarchy across viewports without breakpoint-based jumps.

**Don't**

• Don't use the secondary blue (#1e5fd8) on primary CTAs; reserve it for hover states and secondary actions only.
• Don't introduce dark backgrounds or near-black surfaces; the luminous aesthetic depends on white and soft blue tints (surface-container-highest: #dbe8ff maximum).
• Don't apply shadows with warm tones (e.g., rgba(0,0,0,0.x)); use only cool-toned shadows (rgba(30,70,160,0.x)) to maintain color consistency.
• Don't mix Onest and Inter weights arbitrarily; Onest is always 600+ for emphasis, Inter is always 400–500 for body content.
• Don't use border-radius values outside the defined scale (sm: 6px, DEFAULT: 10px, md: 14px, lg: 22px, xl: 30px, full: 50%); custom radii fragment the system.
• Don't animate background colors or opacity on hover; use transform (translateY, scale) and box-shadow changes only to keep interactions snappy and predictable.