Kurs 247

Overview

Kurs 247 is a practical automation education platform that transforms complex workflow automation into accessible, energetic learning experiences. Serving developers, entrepreneurs, and automation enthusiasts, the brand embodies 'Technical Maximalism'—a design philosophy that celebrates bold, saturated accents (particularly the signature #fe6f00 orange) against a deep, minimal dark canvas (#0a0a0a). The aesthetic evokes clarity and precision: the dark background provides cognitive rest, while the vibrant orange acts as a visual beacon for key interactions, creating a sense of forward momentum and technical confidence. The UI feels simultaneously austere and celebratory—a stark black canvas punctuated by glowing orange highlights, grid overlays, and glassmorphic surfaces that suggest depth without clutter.

The brand voice is direct, practical, and encouraging. Vocabulary favors action-oriented language ('Dołącz teraz' / 'Join now', 'Przestań robić ręcznie' / 'Stop doing it manually') and avoids corporate jargon. Tone is conversational yet authoritative—the course teaches advanced concepts (webhooks, AI integration, HTTP) but presents them as achievable. Example sentence in brand voice: 'Automatyzacja zrobi to za Ciebie 24/7—to, co może robić automat' (Automation will do it for you 24/7—what a machine can do).

Colors

The color system is built on a high-contrast, accent-driven model. **Primary (#1578f7)** is the secondary interactive accent, used for secondary CTAs and supporting actions; it provides a cool counterpoint to the dominant orange. **Secondary (#fe6f00)** is the brand's signature accent—the most prominent CTA color, used on 'Dołącz teraz' buttons, badges, and key highlights. It appears in gradients (linear-gradient(180deg, #fe6f00 0%, #ff8c33 50%, #fe6f00 100%)) for depth and visual interest. **Tertiary (#ff8c33)** is the lighter orange variant, used for hover states and secondary highlights. **Error (#ef4444)** is reserved for strike-through animations and destructive actions, applied with a 5px border-radius and 0 0 8px rgba(239, 68, 68, 0.6) glow.

The surface stack is built on deep black

Typography

The type system pairs Outfit (headings) with Inter (body), creating a hierarchy that balances technical precision with approachability. **Display (64px, 800 weight, -0.02em letter-spacing)** is used for hero headlines and establishes visual dominance; it's often rendered with a gradient (linear-gradient(180deg, #ffffff 0%, #e8e8e8 100%)) and drop-shadow (0 2px 4px rgba(255, 255, 255, 0.15)) for depth. **Headline-lg (40px, 700 weight)** is used for section titles; **Headline-md (28px, 600 weight)** for subsections. **Body-lg (18px, 400 weight, 28px line-height)** is used for hero copy and feature descriptions; **Body-md (16px, 400 weight, 24px line-height)** for standard body text. **Label-md (14px, 600 weight, 0.01em letter-spacing)** is used for buttons and interactive labels; **Label-sm

Layout

The layout uses a fixed 1100px max-width container (padding: 0 24px on desktop, 0 12px on tablet) centered on the page, creating a focused, columnar composition. The grid is 12 columns, though the design often uses a 2-3 column split for hero sections and feature cards. White-space is generous: hero sections use 60px top padding, 30px bottom padding; section separators use 14px padding with animated arrows (animation: floatArrow 2s ease-in-out infinite, translateY(6px) at 50%). The spacing scale is semantic: **lg (40px)** separates major sections; **md (24px)** separates cards and components; **sm (12px)** is used for internal component padding. A fixed background grid (background-image: linear-gradient(rgba(254, 111, 0, 0.03) 1px, transparent 1px), background-size: 50px 50px) provides sub

Elevation & Depth

Depth is achieved through glassmorphism and layered transparency rather than traditional shadows. **Level 1 (Base)**: The fixed background grid and radial gradient vignette establish the foundation. **Level 2 (Standard Card)**: backdrop-filter: blur(10px), background: rgba(26, 26, 26, 0.6), border: 1px solid rgba(255, 255, 255, 0.08), box-shadow: 0 0 20px rgba(254, 111, 0, 0.1). **Level 3 (Elevated/Hero)**: backdrop-filter: blur(10px), background: rgba(26, 26, 26, 0.6), box-shadow: 0 0 40px rgba(254, 111, 0, 0.12), 0 20px 60px rgba(0, 0, 0, 0.5). The comparison slider uses box-shadow: 0 0 40px

Shapes

The shape philosophy is 'Technical Softness'—sharp enough to feel modern and precise, rounded enough to feel approachable. **Buttons** use border-radius: 9999px (full pill shape) to create a friendly, action-oriented appearance; this contrasts with the angular grid background. **Cards and containers** use border-radius: 16px (1rem) for a balanced, modern feel—not too sharp, not too organic. **Input fields** use border-radius: 14px for consistency with cards but slightly less rounded, suggesting form-like precision. **Badges** use border-radius: 50px (full pill) to emphasize their role as micro

Components

Action Elements **Button-primary** (primary CTA): background: {colors.primary} (#1578f7), color: white, border-radius: 9999px, padding: 12px 32px, height: 48px, box-shadow: 0 0 20px rgba(21, 120, 247, 0.3), font-weight: 600, font-size: 14px. On hover, background transitions to {colors.primary-container} (#0d5ac4) with box-shadow: 0 0 32px rgba(21, 120, 247, 0.5) and transform: translateY(-2px) over 300ms. **Button-secondary** (primary CTA, brand-dominant): background: {colors.secondary} (#fe6f00), color: white, border-radius: 9999px, padding: 12px 32px, height: 48px, box-shadow: 0 0 20px rgba(254, 111, 0, 0.3). Hover state: background: {colors.secondary-container} (#e56300), box-shadow: 0 0 32px rgba(254, 111, 0, 0.5), transform: translateY(-2px). **Button-ghost**: background: rgba(255

Do's and Don'ts

**Do**

• Do use the orange secondary (#fe6f00) for all primary CTAs and key interactive moments—it's the brand's signature accent and should feel prominent and energetic.
• Do apply glassmorphic surfaces (backdrop-filter: blur(10px), rgba(26, 26, 26, 0.6)) with 1px rgba(255, 255, 255, 0.08) borders to create depth without visual clutter.
• Do pair Outfit (headings) with Inter (body) consistently, maintaining letter-spacing: -0.02em on headlines for tightness and visual impact.
• Do use the orange glow (box-shadow: 0 0 20px rgba(254, 111, 0, 0.1)) on cards and elevated surfaces to reinforce the warm, energetic brand personality.
• Do maintain generous white-space (lg spacing: 40px for section separation) to let the dark background and orange accents breathe.
• Do animate interactive elements with subtle transforms (translateY(-2px)) and shadow intensification on hover over 300ms for tactile feedback.

**Don't**

• Don't use the primary blue (#1578f7) as the dominant CTA color—reserve it for secondary actions. The orange (#fe6f00) is the brand's signature and must lead.
• Don't apply harsh, high-contrast shadows (box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5))—use soft, warm glows (0 0 20px rgba(254, 111, 0, 0.1)) to maintain the ethereal glassmorphic aesthetic.
• Don't mix typefaces beyond Outfit (headings) and Inter (body)—avoid system-ui, -apple-system, or serif fonts in the main UI.
• Don't reduce the orange glow on hover or focus states—intensify it (0 0 32px rgba(254, 111, 0, 0.5)) to signal interactivity and maintain energy.
• Don't use rounded corners smaller than 10px on interactive elements (buttons, inputs)—maintain at least 14px for consistency and approachability.
• Don't apply opacity below 0.6 to card backgrounds—keep them readable and present. The glassmorphic effect relies on blur, not transparency alone.