CodeCraft Design System

CodeCraft — современная онлайн IT-школа для подростков.

Стиль должен выглядеть дорого, технологично и мотивировать начать изучать программирование.

Основная аудитория:

• подростки 10–16 лет

• родители

• начинающие в IT

Основная эмоция:

"Вау, я тоже хочу научиться делать такие сайты и приложения"

---

# Design Style

• Modern UI

• Futuristic

• Clean

• Minimal but powerful

• Glassmorphism

• Soft glow effects

• Dark theme

• Smooth animations

• Premium startup aesthetic

• Similar vibe:

• Linear

• Framer

• Vercel

• Stripe

• Apple

• Discord

---

# Colors

• Main Background: #0B1120

• Secondary Background: #111827

• Card Background: rgba(255,255,255,0.05)

• Border Color: rgba(255,255,255,0.08)

---

# Typography

Use:

• Inter

• Satoshi

• Geist

• Bold

• Large

• Clean

• Tight spacing

Examples:

• Hero title: 56px–72px

• Section title: 36px–48px

• Easy to read

• Medium contrast

• 16px–18px

---

# Layout Rules

Style:

• Gradient background

• Purple to blue

• Rounded-xl

• Hover glow

• Smooth hover animation

Button example:

background: linear-gradient(135deg, #7C3AED, #3B82F6)

Hover:

• scale(1.03)

• stronger glow

• smooth transition

---

Style:

• Glassmorphism

• Blur background

• Soft border

• Slight glow

• Hover lift effect

Card hover:

• translateY(-5px)

• stronger shadow

---

• Transparent

• Blur effect

• Sticky top

• Modern minimal links

CTA button should stand out.

---

# Hero Section

Hero must instantly create WOW effect.

Include:

• Large gradient headline

• Coding related visual

• Glow background

• Floating elements

• Strong CTA button

Headline examples:

• "Научись программированию с нуля"

• "Создавай сайты, игры и приложения"

Subheadline:

Short and powerful.

---

# Animations

• Fade in

• Smooth reveal

• Floating objects

• Glow pulse

• Gradient movement

• Hover transitions

Animation duration:

0.3s – 0.8s

Use Framer Motion style animations.

---

# UI Elements

• Dark background

• Soft border

• Glow on focus

• Hero

• Why choose us

• Student projects

• Learning roadmap

• Courses

• Reviews

• FAQ

• CTA

• Footer

---

# Course Cards

Each course card should include:

• Icon

• Title

• Short description

• Tech stack

• Difficulty

• CTA button

Hover should feel interactive.

---

# Student Projects

Projects should look realistic and modern.

Examples:

• Websites

• Games

• Telegram bots

• Mobile apps

• AI tools

Display:

• screenshots

• preview cards

• hover animations

---

# Mobile Design

IMPORTANT:

Everything must look premium on mobile.

Requirements:

• Large touch targets

• Responsive typography

• Stacked layout

• Optimized spacing

Mobile-first feeling.

---

# Coding Style

Frontend:

• React

• Next.js

• Tailwind CSS

• Framer Motion

Preferred UI:

• Clean components

• Reusable sections

• Responsive design

---

# Avoid

Do NOT use:

• Old looking gradients

• Heavy shadows

• Bright neon overload

• Random colors

• Tiny text

• Complex layouts

• Generic bootstrap style

---

# Overall Feeling

The website should feel like:

"A modern tech startup for future developers"

Visitors should think:

"This looks expensive and professional"