SKATECUBE KIDS Style Guide

A comprehensive visual reference for designing warm, modern, youth-focused, and professional nonprofit content.

Color Palette

Primary Colors

Sand 50

Variable: --sand-50

Hex: #fdfcfb

Main background

Sand 100

Variable: --sand-100

Hex: #f9f7f4

Section backgrounds

Sand 200

Variable: --sand-200

Hex: #f3f0eb

Borders, dividers

Charcoal 900

Variable: --charcoal-900

Hex: #141719

Primary text, headers

Charcoal 800

Variable: --charcoal-800

Hex: #1f2428

Secondary text

Accent Colors

Use sparingly for buttons, icons, highlights, and section dividers. Avoid harsh neon colors.

Yellow 500

Variable: --yellow-500

Hex: #f0b341

Energy, CTA buttons

Green 600

Variable: --green-600

Hex: #3d7a5d

Growth, success states

Blue 500

Variable: --blue-500

Hex: #5686b8

Trust, calm accents

Typography

Modern sans-serif fonts with clear hierarchy. All text must be readable on mobile devices with comfortable line heights for long reading.

H1text-5xl md:text-6xl font-bold text-charcoal-900

Main Page Heading

H2text-4xl md:text-5xl font-bold text-charcoal-900

Section Heading

H3text-3xl font-bold text-charcoal-900

Subsection Heading

Body Largetext-xl text-slate-600

Large body text for introductions and important content.

Bodytext-base text-slate-600

Standard body text for paragraphs and general content.

Typography Rules

Use modern sans-serif fonts (Inter, system-ui)
Maintain clear visual hierarchy between heading levels
Line height 1.5-1.7 for body text readability
Avoid decorative, graffiti, or script fonts

Button Styles

All buttons use rounded-full style with consistent hover effects: subtle lift (-translate-y-1) and enhanced shadow. Transitions are smooth (duration-300).

Primarybg-charcoal-900 text-white hover:bg-green-600 hover:shadow-xl hover:-translate-y-1

Secondary

border-2 border-charcoal-900 text-charcoal-900 hover:bg-charcoal-900 hover:text-white hover:shadow-xl hover:-translate-y-1

Accentbg-yellow-500 text-charcoal-900 hover:bg-yellow-400 hover:shadow-xl hover:-translate-y-1

Imagery Guidelines

Do Use

Kids skateboarding with safety gear visible
Youth learning and practicing skills
Community skateparks in urban settings
Candid, documentary-style moments
Natural lighting and realistic scenes
Creative skate culture moments

Don't Use

Posed or corporate-looking stock photos
Aggressive or unsafe skate imagery
Close-ups identifying children clearly
Overly staged or commercial scenes
Dark, moody, or harsh imagery
Neon colors or harsh filters

Image Treatment

Use gradient overlays (from-charcoal-900/70 to-transparent) for text readability
Rounded corners (rounded-2xl or rounded-3xl) for modern look
Hover effects: scale-110 with duration-700 for smooth zoom

Layout Principles

Spacing

• Generous white space between sections
• Vertical padding: py-16 lg:py-24 for sections
• Content max-width: max-w-4xl to max-w-7xl
• Consistent horizontal padding: px-6 lg:px-8

Components

• Cards with rounded-2xl or rounded-3xl corners
• Soft shadows: shadow-lg, hover:shadow-2xl
• Alternating section backgrounds (white/sand-50)
• Border colors: border-sand-200 or border-slate-200

Mobile-First

• Responsive grid: grid md:grid-cols-2 lg:grid-cols-3
• Stack elements vertically on mobile
• Touch-friendly button sizes (min h-12)
• Readable text sizes at all breakpoints

Animations

• Framer Motion for entrance animations
• Smooth transitions: transition-all duration-300
• Subtle hover lifts: hover:-translate-y-1
• Respect prefers-reduced-motion

Design Tone

Overall Feel

✓ Warm and welcoming
✓ Modern and youth-focused
✓ Professional yet approachable
✓ Educational and community-oriented

Avoid

✗ Corporate or cold aesthetics
✗ Heavy, dark backgrounds for reading
✗ Aggressive or extreme visuals
✗ Cluttered or busy layouts