LudiqueColoréMaximaliste

Kid Science Design Reference

Kid Science is an aesthetic surrounding educational efforts to make science appealing to children through presenting the field as fun, accessible, and wonder-filled, using kooky characters, bright colors, highly stylized images, and doable experiments. It draws heavily from the visual language of 1990s and 2000s children's educational television, science museums, and picture books. The design philosophy centers on transforming complex scientific concepts into approachable, exciting visual experiences -- making microscopes feel like treasure hunts and chemistry sets feel like magic kits.

Visual Characteristics

Core Motifs and Patterns

Bright block lettering -- large, bold, chunky display type in vivid colors, often outlined, shadowed, or dimensionally extruded for maximum impact and child readability
Kooky cartoon characters -- exaggerated, friendly scientist figures in lab coats and safety goggles with oversized expressions and quirky personalities
Personified organisms -- animals, cells, and molecules given faces and personalities, "introducing themselves" to the viewer directly
Dinosaurs and fossils -- T-Rex, triceratops, and complete fossil skeletons displayed prominently as gateway subjects for young curiosity
Butterfly and frog life cycles -- transformation diagrams showing egg-to-adult metamorphosis with numbered stages and arrows
Baking soda volcanoes -- the quintessential DIY experiment icon; erupting paper-mache mountains with overflowing "lava" foam
Chemistry sets with colorful liquids -- beakers, flasks, and test tubes filled with bright green, purple, blue, and orange liquids, often bubbling
Rocket ships and space imagery -- cartoonish rockets with flame trails, planets with rings, star fields, and astronaut helmets
Telescopes and microscopes -- scientific instruments rendered in a friendly, slightly oversized cartoon style
Geodes and mineral specimens -- cross-sectioned rocks revealing sparkly crystal interiors
Safety goggles and lab coats -- the "uniform" of kid science, often oversized on child characters for comic effect
Food science and rock candy -- sugar crystals growing on strings, kitchen-based experiments bridging cooking and chemistry
Roller coasters and racing -- physics concepts visualized through exciting, kinetic subjects kids already love
Picture books and educational materials -- illustrated pages with callouts, labeled diagrams, and "Did you know?" sidebars
Nature tours and field trips -- outdoor exploration imagery with magnifying glasses, binoculars, and specimen jars
Science museum interiors -- interactive exhibit halls with large-scale models, touchable displays, and discovery stations

Design Principles

Accessibility over accuracy -- simplify complex concepts into bold, clear visuals; stylization is preferred over photorealism
Curiosity and wonder -- every design element should provoke a "Wow!" or "How does that work?" reaction
Hands-on engagement -- layouts should feel interactive and inviting, as if the viewer could reach in and participate
Enthusiastic energy -- nothing is subdued; colors are bright, type is bold, characters are animated with excitement
Respect for the natural world -- nature is presented as fascinating and worthy of study, not scary or clinical
Direct address -- content speaks directly to the child viewer with warmth and encouragement
Organized chaos -- designs are busy and packed with information but structured enough to navigate (grids of facts, numbered steps, labeled diagrams)
Experiential learning -- visual emphasis on doing, observing, and discovering rather than passive reading

Color Palette

Primary Scheme

Role	Colors
Primary / Science	Bright green, leaf green, lime
Secondary / Energy	Vivid orange, tangerine, amber
Tertiary / Earth	Warm brown, chocolate, tan
Accent / Water	Turquoise, teal, cyan
Background / Sky	Bright white, cream, light yellow
Highlight / Chemistry	Purple, magenta, hot pink (for "chemical" accents)
Alert / Volcano	Bright red, coral (sparingly, for explosive emphasis)

Detailed Palette

Color	Hex (suggested)	Usage
Science Green	`#4CAF50`, `#66BB6A`	Primary accent, nature sections, biology motifs
Lime Bright	`#8BC34A`, `#CDDC39`	Energetic highlights, slime/experiment imagery
Leaf Dark	`#388E3C`, `#2E7D32`	Deep foliage, headers on light backgrounds
Tangerine Orange	`#FF9800`, `#FFA726`	Secondary accent, call-to-action, dinosaur/energy
Amber Warm	`#FFB300`, `#FFC107`	Warm highlights, sunshine, achievement badges
Volcano Red	`#F44336`, `#EF5350`	Sparingly -- volcanic eruptions, "hot" experiment accents
Earthy Brown	`#795548`, `#8D6E63`	Fossil/geology sections, natural texture, earth tones
Chocolate Dark	`#5D4037`, `#4E342E`	Text on light backgrounds, grounding dark accents
Tan Sand	`#D7CCC8`, `#BCAAA4`	Subtle backgrounds, fossil/dig-site areas
Turquoise	`#00BCD4`, `#26C6DA`	Water/ocean sections, chemistry, cool experiment accents
Teal Deep	`#00897B`, `#00796B`	Deeper water, microscope/biology accent
Sky Blue	`#03A9F4`, `#29B6F6`	Sky areas, space themes, trust/learning
Chemistry Purple	`#9C27B0`, `#AB47BC`	Chemical reactions, "magic" experiment moments
Lab Pink	`#E91E63`, `#EC407A`	Litmus/pH accents, biology highlights
Cream White	`#FFFDE7`, `#FFF9C4`	Light backgrounds, page canvas
Clean White	`#FFFFFF`, `#FAFAFA`	Card surfaces, lab-coat white areas
Chalkboard Dark	`#263238`, `#37474F`	Dark text, chalkboard-style backgrounds
Notebook Blue	`#E3F2FD`, `#BBDEFB`	Lined-paper backgrounds, subtle info sections

Suggested CSS Custom Properties

:root {
  /* Greens -- primary science palette */
  --kid-green: #4caf50;
  --kid-green-light: #66bb6a;
  --kid-green-bright: #8bc34a;
  --kid-lime: #cddc39;
  --kid-green-dark: #388e3c;

  /* Oranges -- energy and excitement */
  --kid-orange: #ff9800;
  --kid-orange-light: #ffa726;
  --kid-amber: #ffb300;
  --kid-yellow: #ffc107;

  /* Browns -- earth and fossils */
  --kid-brown: #795548;
  --kid-brown-dark: #5d4037;
  --kid-brown-deep: #4e342e;
  --kid-tan: #d7ccc8;
  --kid-sand: #bcaaa4;

  /* Cool accents -- water and chemistry */
  --kid-turquoise: #00bcd4;
  --kid-turquoise-light: #26c6da;
  --kid-teal: #00897b;
  --kid-sky: #03a9f4;
  --kid-sky-light: #29b6f6;
  --kid-purple: #9c27b0;
  --kid-pink: #e91e63;

  /* Warm accent */
  --kid-red: #f44336;
  --kid-coral: #ef5350;

  /* Neutrals */
  --kid-white: #ffffff;
  --kid-cream: #fffde7;
  --kid-cream-warm: #fff9c4;
  --kid-notebook: #e3f2fd;
  --kid-gray-light: #fafafa;
  --kid-gray: #eceff1;
  --kid-chalkboard: #263238;
  --kid-chalkboard-light: #37474f;

  /* Functional mappings */
  --kid-bg-primary: var(--kid-cream);
  --kid-bg-secondary: var(--kid-white);
  --kid-bg-accent: var(--kid-notebook);
  --kid-text-primary: var(--kid-chalkboard);
  --kid-text-secondary: var(--kid-brown-dark);
  --kid-accent-primary: var(--kid-green);
  --kid-accent-secondary: var(--kid-orange);
  --kid-accent-cool: var(--kid-turquoise);
  --kid-border: rgba(0, 0, 0, 0.1);
  --kid-shadow: rgba(0, 0, 0, 0.12);
  --kid-shadow-colored: rgba(76, 175, 80, 0.25);
}

Approaches

High-saturation, high-contrast palette -- colors are vivid and fully saturated for maximum visual impact and child engagement
Green-orange dualism -- green represents nature/biology/growth, orange represents energy/excitement/discovery; they are the dominant pair
Brown as grounding neutral -- instead of gray, brown anchors the palette with warmth and earthiness (fossils, soil, natural materials)
White and cream backgrounds -- clean, bright canvases that let the vivid accent colors pop without overwhelming
Turquoise as the cool counterpoint -- balances the warm green-orange-brown core with aquatic freshness
Purple and pink for "chemistry magic" -- reserved for chemical reaction moments, creating a sense of wonder and surprise
No pastels -- colors should be bold and confident, not muted or soft; the aesthetic favors full-strength hues

Typography

Typeface Characteristics

Kid Science typography is bold, chunky, playful, and highly legible, designed to be read easily by children and to convey excitement:

Thick, block-style display type -- headlines use extra-bold or black weights with visible stroke width
Rounded or soft-cornered letterforms -- friendly and approachable, never sharp or angular
High x-height -- letters are tall relative to their cap height, improving readability for young readers
Wide letter-spacing in headlines -- letters have room to breathe, making words easy to parse
Tighter spacing in body text -- comfortable, natural reading flow for longer explanations
Mixed-case or all-caps headlines -- all-caps for short exclamatory labels ("FUN FACT!"), mixed-case for longer titles
Occasional hand-drawn or chalkboard styles -- for "experiment notes" or "field journal" sections
Color in type -- headlines frequently use colored text or multi-colored letters, not just black or white
Outline and shadow effects -- letters may have colored outlines, drop shadows, or 3D extrusion for dimensionality

Recommended Web Fonts (Google Fonts)

Font	Style	Usage
Fredoka	Rounded, bold, playful	Primary headlines -- the quintessential kid-science display font, chunky and friendly
Baloo 2	Rounded, thick, bubbly	Headlines, section titles -- warm and inviting with excellent bold weights
Nunito	Rounded, humanist	Secondary headlines, subheadings -- slightly more restrained but still rounded and warm
Quicksand	Rounded, geometric	Labels, captions, UI elements -- clean and readable with playful softness
Patrick Hand	Handwritten, casual	"Experiment notes," journal entries, annotations -- authentic hand-drawn feel
Comic Neue	Comic-style, clean	Body text alternative, speech bubbles, character dialogue -- fun without being Comic Sans
Lexend	High readability, designed for reading ease	Body text -- specifically optimized for reading comfort and accessibility
Nunito Sans	Clean, rounded humanist sans	Body text, paragraphs -- legible and warm for longer content
Bangers	Bold, comic-book block	Impact headlines, "POW!" labels, experiment titles -- maximum energy and excitement
Permanent Marker	Marker-drawn, bold	Chalkboard headers, "written by kids" feel, informal labels
Boogaloo	Retro, rounded, fun	Display text, decorative headlines -- groovy and attention-grabbing
Bubblegum Sans	Bubbly, informal	Playful labels, fun fact callouts -- light and whimsical

Pairing recommendation: Use Fredoka or Baloo 2 for headlines with Nunito Sans or Lexend for body text. Add Patrick Hand for handwritten annotation elements.

Typography CSS Example

/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Baloo+2:wght@400;500;600;700;800&family=Nunito+Sans:wght@400;600;700&family=Patrick+Hand&family=Bangers&family=Lexend:wght@300;400;500;600&display=swap');

/* Headlines -- big, bold, colorful */
h1, h2, h3 {
  font-family: 'Fredoka', 'Baloo 2', 'Nunito', sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--kid-chalkboard);
  line-height: 1.2;
}

/* Hero / Display text -- maximum impact */
.kid-display {
  font-family: 'Fredoka', 'Baloo 2', sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.1;
  color: var(--kid-white);
  text-shadow:
    3px 3px 0 var(--kid-green-dark),
    0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Colored block text -- for section headers */
.kid-block-text {
  font-family: 'Fredoka', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--kid-orange);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
}

/* Body text -- clear and readable */
body {
  font-family: 'Nunito Sans', 'Lexend', sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  line-height: 1.7;
  color: var(--kid-text-secondary);
  -webkit-font-smoothing: antialiased;
}

/* Experiment notes / handwritten */
.kid-handwritten {
  font-family: 'Patrick Hand', cursive;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--kid-chalkboard-light);
  transform: rotate(-0.5deg);
}

/* Impact labels ("FUN FACT!", "DID YOU KNOW?") */
.kid-impact-label {
  font-family: 'Bangers', 'Fredoka', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kid-red);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
}

/* Captions and small labels */
.kid-caption {
  font-family: 'Quicksand', 'Nunito Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--kid-brown);
}

Layout Principles

Grid and Structure

Bright, clean backgrounds -- white or cream canvases with subtle textures (notebook lines, graph paper, chalkboard) that evoke educational environments
Packed but organized layouts -- content-dense like a science poster or museum exhibit panel, but structured with clear visual hierarchy
Bold, rounded containers -- cards and panels with generous border-radius (12-20px), thick colored borders, and slight shadows
Grid-based fact layouts -- 2x2 or 3-column grids of "fact cards" or "specimen cards," each with an icon, title, and short description
Generous padding inside elements -- content within cards and panels breathes, even if the overall page is busy
Numbered step sequences -- experimental procedures laid out as numbered steps with large circled numbers
Sidebar callouts and "Did You Know?" boxes -- floating info panels with colored backgrounds that break out of the main content flow
Full-width color-band sections -- sections separated by bold colored bands (green, orange, turquoise) rather than subtle gradients

Section Organization

Use bold colored dividers between sections -- thick horizontal bars or zigzag/wave-cut edges in accent colors
Apply experiment card containers -- white or cream cards with thick colored left borders or top borders for categorization
Create hierarchy through color and weight -- the most important element gets the boldest color and heaviest type
Employ icon-led content blocks -- each section or fact begins with a large, colorful icon (beaker, dinosaur, rocket, magnifying glass)
Use step-by-step experiment layouts -- numbered sequences with large step indicators, clear ingredient/material lists, and expected-result callouts
Add interactive-feeling elements -- tabs, flip-card metaphors, "pull here" labels, magnifying glass zoom areas
Group content in topic clusters -- biology (green), chemistry (purple/turquoise), physics (orange), earth science (brown), space (blue)

CSS/Design Techniques

Science Poster Background

/* Clean bright background with subtle graph-paper texture */
.kid-bg-paper {
  background-color: var(--kid-cream);
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  min-height: 100vh;
}

/* Chalkboard background for contrast sections */
.kid-bg-chalkboard {
  background-color: var(--kid-chalkboard);
  background-image:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(55, 71, 79, 1) 0%,
      rgba(38, 50, 56, 1) 100%
    );
  color: var(--kid-cream);
}

/* Notebook-lined background */
.kid-bg-notebook {
  background-color: var(--kid-white);
  background-image:
    repeating-linear-gradient(
      transparent,
      transparent 27px,
      #e8e8e8 27px,
      #e8e8e8 28px
    );
  background-position: 0 40px;
}

/* Bright color-band hero */
.kid-hero {
  background: linear-gradient(
    135deg,
    var(--kid-green) 0%,
    var(--kid-green-bright) 30%,
    var(--kid-turquoise) 70%,
    var(--kid-sky) 100%
  );
  min-height: 50vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

Experiment Card

/* Science experiment / fact card */
.kid-card {
  background: var(--kid-white);
  border: 3px solid var(--kid-green);
  border-radius: 16px;
  padding: 1.5rem 2rem;
  position: relative;
  box-shadow:
    0 4px 12px var(--kid-shadow),
    0 2px 4px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kid-card:hover {
  transform: translateY(-4px) rotate(0.5deg);
  box-shadow:
    0 8px 24px var(--kid-shadow),
    0 4px 8px rgba(0, 0, 0, 0.08);
}

/* Colored top-border variant (categorization by subject) */
.kid-card--biology { border-top: 6px solid var(--kid-green); }
.kid-card--chemistry { border-top: 6px solid var(--kid-purple); }
.kid-card--physics { border-top: 6px solid var(--kid-orange); }
.kid-card--earth { border-top: 6px solid var(--kid-brown); }
.kid-card--space { border-top: 6px solid var(--kid-sky); }

/* Card icon container */
.kid-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.kid-card__icon--green {
  background: linear-gradient(135deg, #c8e6c9, #a5d6a7);
  color: var(--kid-green-dark);
}

.kid-card__icon--orange {
  background: linear-gradient(135deg, #ffe0b2, #ffcc80);
  color: #e65100;
}

.kid-card__icon--turquoise {
  background: linear-gradient(135deg, #b2ebf2, #80deea);
  color: var(--kid-teal);
}

"Fun Fact" Callout Box

/* Fun Fact / Did You Know callout */
.kid-callout {
  background: var(--kid-cream-warm);
  border: 2px dashed var(--kid-orange);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  position: relative;
}

.kid-callout::before {
  content: 'FUN FACT!';
  position: absolute;
  top: -12px;
  left: 20px;
  background: var(--kid-orange);
  color: var(--kid-white);
  font-family: 'Bangers', 'Fredoka', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  padding: 2px 12px;
  border-radius: 6px;
  text-transform: uppercase;
}

/* "Did You Know?" variant */
.kid-callout--question {
  border-color: var(--kid-turquoise);
  background: #e0f7fa;
}

.kid-callout--question::before {
  content: 'DID YOU KNOW?';
  background: var(--kid-turquoise);
}

/* "Warning!" variant for safety notes */
.kid-callout--warning {
  border-color: var(--kid-red);
  background: #fce4ec;
}

.kid-callout--warning::before {
  content: 'SAFETY FIRST!';
  background: var(--kid-red);
}

Step-by-Step Experiment Layout

/* Numbered experiment step */
.kid-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--kid-white);
  border-radius: 12px;
  border-left: 4px solid var(--kid-green);
}

/* Step number circle */
.kid-step__number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--kid-green);
  color: var(--kid-white);
  font-family: 'Fredoka', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px var(--kid-shadow-colored);
}

/* Active/current step highlight */
.kid-step--active {
  border-left-color: var(--kid-orange);
  background: var(--kid-cream-warm);
}

.kid-step--active .kid-step__number {
  background: var(--kid-orange);
  box-shadow: 0 2px 6px rgba(255, 152, 0, 0.3);
  animation: step-pulse 1.5s ease-in-out infinite;
}

@keyframes step-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

Bold Section Divider

/* Zigzag / wave divider between sections */
.kid-divider-wave {
  height: 40px;
  background: var(--kid-green);
  clip-path: polygon(
    0% 0%, 5% 100%, 10% 0%, 15% 100%, 20% 0%,
    25% 100%, 30% 0%, 35% 100%, 40% 0%, 45% 100%,
    50% 0%, 55% 100%, 60% 0%, 65% 100%, 70% 0%,
    75% 100%, 80% 0%, 85% 100%, 90% 0%, 95% 100%,
    100% 0%, 100% 100%, 0% 100%
  );
  margin: 0;
}

/* Color band divider */
.kid-divider-band {
  height: 8px;
  background: linear-gradient(
    90deg,
    var(--kid-green) 0%,
    var(--kid-turquoise) 25%,
    var(--kid-orange) 50%,
    var(--kid-purple) 75%,
    var(--kid-red) 100%
  );
  border: none;
  margin: 0;
}

/* Thick colored bar with label */
.kid-section-header {
  background: var(--kid-green);
  color: var(--kid-white);
  padding: 0.75rem 2rem;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 0;
}

.kid-section-header--orange { background: var(--kid-orange); }
.kid-section-header--turquoise { background: var(--kid-turquoise); }
.kid-section-header--brown { background: var(--kid-brown); }

Playful Button

/* Kid-science styled button -- chunky, bold, colorful */
.kid-button {
  display: inline-block;
  padding: 0.85rem 2.2rem;
  border-radius: 50px;
  border: 3px solid var(--kid-green-dark);
  background: var(--kid-green);
  color: var(--kid-white);
  font-family: 'Fredoka', 'Nunito', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  box-shadow:
    0 4px 0 var(--kid-green-dark),
    0 6px 12px var(--kid-shadow);
  transition: all 0.15s ease;
  text-decoration: none;
}

.kid-button:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 var(--kid-green-dark),
    0 8px 16px var(--kid-shadow);
}

.kid-button:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 var(--kid-green-dark),
    0 3px 8px var(--kid-shadow);
}

/* Orange variant */
.kid-button--orange {
  background: var(--kid-orange);
  border-color: #e65100;
  box-shadow: 0 4px 0 #e65100, 0 6px 12px var(--kid-shadow);
}

/* Turquoise variant */
.kid-button--turquoise {
  background: var(--kid-turquoise);
  border-color: var(--kid-teal);
  box-shadow: 0 4px 0 var(--kid-teal), 0 6px 12px var(--kid-shadow);
}

Bubbling Test Tube Animation

/* Decorative bubbling test tube effect */
.kid-bubble {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.3);
  pointer-events: none;
  animation: kid-bubble-rise 3s ease-in infinite;
}

@keyframes kid-bubble-rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-40px) scale(1.2) translateX(5px);
    opacity: 0.6;
  }
  100% {
    transform: translateY(-80px) scale(0.6) translateX(-3px);
    opacity: 0;
  }
}

.kid-bubble:nth-child(2) { animation-delay: 0.5s; animation-duration: 3.5s; left: 20%; }
.kid-bubble:nth-child(3) { animation-delay: 1.2s; animation-duration: 2.8s; left: 60%; }
.kid-bubble:nth-child(4) { animation-delay: 0.8s; animation-duration: 4s; left: 40%; }
.kid-bubble:nth-child(5) { animation-delay: 1.8s; animation-duration: 3.2s; left: 75%; }

/* Colorful liquid in a container */
.kid-liquid {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 12px 12px;
}

.kid-liquid::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(
    180deg,
    rgba(76, 175, 80, 0.3) 0%,
    rgba(76, 175, 80, 0.7) 100%
  );
  animation: kid-liquid-wobble 3s ease-in-out infinite;
}

@keyframes kid-liquid-wobble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* Purple variant */
.kid-liquid--purple::after {
  background: linear-gradient(
    180deg,
    rgba(156, 39, 176, 0.3) 0%,
    rgba(156, 39, 176, 0.7) 100%
  );
}

Badge / Achievement Sticker

/* Achievement / science badge sticker */
.kid-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2px solid;
}

.kid-badge--biology {
  background: #e8f5e9;
  color: var(--kid-green-dark);
  border-color: var(--kid-green);
}

.kid-badge--chemistry {
  background: #f3e5f5;
  color: #7b1fa2;
  border-color: var(--kid-purple);
}

.kid-badge--physics {
  background: #fff3e0;
  color: #e65100;
  border-color: var(--kid-orange);
}

.kid-badge--earth {
  background: #efebe9;
  color: var(--kid-brown-dark);
  border-color: var(--kid-brown);
}

.kid-badge--space {
  background: #e1f5fe;
  color: #01579b;
  border-color: var(--kid-sky);
}

Materials and Textures (Visual Metaphors for Web)

Physical Kid Science materials and their web equivalents:

Physical Material	Web Equivalent
Graph paper / notebook	Subtle grid or lined `background-image` using `repeating-linear-gradient` on cream/white
Chalkboard	Dark `#263238` background with slight radial gradient for chalk-dust texture; white/cream text
Lab coat (white fabric)	Clean `#ffffff` card backgrounds with soft shadow, no texture
Test tube liquid	Colored gradient fills in containers with subtle wobble animation
Fossil in rock	Earthy brown border with tan/sand interior, embossed text shadow
Sticker / badge	Rounded pill shape with colored border, light tinted background
Safety goggles	Circular or oval frame motif, often used as icon containers
Magnifying glass	Circular crop/zoom effect using `border-radius: 50%` with thick border, suggesting close inspection
Science poster board	Bold `background-color` bands, thick borders, large chunky text -- the tri-fold display board feel
Slime / goo	Bright green with `border-radius` distortion and slight transparency
Volcanic lava	Red-to-orange gradient with animated `translateY` drip effect
Crystal / geode	Purple-to-pink gradient with sparkle accents (animated white dots)

Media References

Television (Core Visual Influences)

Bill Nye the Science Guy -- fast-paced, colorful, experiment-driven visuals with bold title cards
The Magic School Bus -- bright cartoon palette, labeled diagrams integrated into narrative, personified science concepts
Beakman's World -- zany, cluttered lab set design, comic-book-style graphics, exaggerated props
Dexter's Laboratory -- stylized cartoon lab environment, contrasting bright colors, retro-futuristic equipment
Jimmy Neutron -- 3D-rendered science gadgets, inventor's workshop aesthetic, space-adventure palette
Phineas and Ferb -- bold geometric shapes, bright primary and secondary colors, inventive contraptions
Wild Kratts -- nature/biology focus, animal coloring as design reference, field-explorer style
Dinosaur Train -- prehistoric earth tones combined with bright train/vehicle colors
Sid the Science Kid -- bright, warm, friendly color palette designed for preschool engagement
SciGirls -- STEM for girls, pink-and-turquoise palette mixed with traditional science colors

Games

Spore -- evolution/biology visualization, creature design as interactive science
Animal Jam -- nature-explorer interface, educational badges, colorful habitat design

Music and Media

Schoolhouse Rock: Science Rock (1978) -- foundational visual style for animated science education
They Might Be Giants: Here Comes Science (2009) -- playful, illustrated science-music videos

Aesthetic	Relationship to Kid Science
Kidcore	Closest sibling; shares the bright colors, playful energy, and child-oriented visual language, but Kidcore is broader (toys, games, cartoons), while Kid Science focuses specifically on scientific education
Science Academia	The "grown-up" version; shares laboratory motifs and scientific iconography but with muted colors, serif fonts, and institutional formality
Utopian Scholastic	Shares the educational optimism and belief in learning as empowerment; Kid Science is its science-specific subset
Med-Tech Visions	Shares some lab/medical imagery (goggles, lab coats, microscopes) but Med-Tech is clinical and futuristic rather than playful

Quick-Start: Minimal Kid Science Page Template

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kid Science Page</title>
  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito+Sans:wght@400;600;700&family=Bangers&family=Patrick+Hand&display=swap" rel="stylesheet">
  <style>
    :root {
      --kid-green: #4caf50;
      --kid-green-light: #66bb6a;
      --kid-green-bright: #8bc34a;
      --kid-green-dark: #388e3c;
      --kid-orange: #ff9800;
      --kid-amber: #ffb300;
      --kid-turquoise: #00bcd4;
      --kid-teal: #00897b;
      --kid-sky: #03a9f4;
      --kid-purple: #9c27b0;
      --kid-red: #f44336;
      --kid-brown: #795548;
      --kid-brown-dark: #5d4037;
      --kid-white: #ffffff;
      --kid-cream: #fffde7;
      --kid-cream-warm: #fff9c4;
      --kid-chalkboard: #263238;
      --kid-shadow: rgba(0, 0, 0, 0.12);
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
      background-color: var(--kid-cream);
      background-image:
        linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
      background-size: 20px 20px;
      color: var(--kid-chalkboard);
      font-family: 'Nunito Sans', sans-serif;
      font-weight: 400;
      font-size: 1.05rem;
      line-height: 1.7;
      min-height: 100vh;
      -webkit-font-smoothing: antialiased;
    }

    h1, h2, h3 {
      font-family: 'Fredoka', sans-serif;
      font-weight: 700;
      line-height: 1.2;
    }

    /* Hero banner */
    .hero {
      background: linear-gradient(
        135deg,
        var(--kid-green) 0%,
        var(--kid-green-bright) 30%,
        var(--kid-turquoise) 70%,
        var(--kid-sky) 100%
      );
      text-align: center;
      padding: 5rem 2rem 4rem;
      position: relative;
      overflow: hidden;
    }

    .hero h1 {
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      color: var(--kid-white);
      text-shadow:
        3px 3px 0 var(--kid-green-dark),
        0 4px 12px rgba(0, 0, 0, 0.15);
      position: relative;
      z-index: 1;
    }

    .hero p {
      margin-top: 1rem;
      font-size: 1.2rem;
      color: rgba(255, 255, 255, 0.95);
      font-weight: 600;
      position: relative;
      z-index: 1;
    }

    /* Rainbow divider bar */
    .rainbow-bar {
      height: 8px;
      background: linear-gradient(
        90deg,
        var(--kid-green) 0%,
        var(--kid-turquoise) 25%,
        var(--kid-orange) 50%,
        var(--kid-purple) 75%,
        var(--kid-red) 100%
      );
    }

    /* Content section */
    section {
      max-width: 900px;
      margin: 0 auto;
      padding: 3rem 2rem;
    }

    /* Experiment card */
    .card {
      background: var(--kid-white);
      border: 3px solid var(--kid-green);
      border-radius: 16px;
      padding: 2rem;
      margin-bottom: 1.5rem;
      box-shadow:
        0 4px 12px var(--kid-shadow),
        0 2px 4px rgba(0, 0, 0, 0.06);
      transition: transform 0.2s ease;
    }

    .card:hover {
      transform: translateY(-3px) rotate(0.3deg);
    }

    .card h2 {
      color: var(--kid-green-dark);
      font-size: 1.5rem;
      margin-bottom: 0.75rem;
    }

    /* Fun fact callout */
    .fun-fact {
      background: var(--kid-cream-warm);
      border: 2px dashed var(--kid-orange);
      border-radius: 12px;
      padding: 1.25rem 1.5rem;
      margin: 1.5rem 0;
      position: relative;
    }

    .fun-fact::before {
      content: 'FUN FACT!';
      position: absolute;
      top: -12px;
      left: 20px;
      background: var(--kid-orange);
      color: var(--kid-white);
      font-family: 'Bangers', sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.1em;
      padding: 2px 12px;
      border-radius: 6px;
    }

    /* Chunky button */
    .btn {
      display: inline-block;
      padding: 0.85rem 2.2rem;
      border-radius: 50px;
      border: 3px solid var(--kid-green-dark);
      background: var(--kid-green);
      color: var(--kid-white);
      font-family: 'Fredoka', sans-serif;
      font-size: 1.1rem;
      font-weight: 700;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      cursor: pointer;
      text-decoration: none;
      box-shadow:
        0 4px 0 var(--kid-green-dark),
        0 6px 12px var(--kid-shadow);
      transition: all 0.15s ease;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow:
        0 6px 0 var(--kid-green-dark),
        0 8px 16px var(--kid-shadow);
    }

    .btn:active {
      transform: translateY(2px);
      box-shadow:
        0 2px 0 var(--kid-green-dark),
        0 3px 8px var(--kid-shadow);
    }

    /* Handwritten note */
    .note {
      font-family: 'Patrick Hand', cursive;
      font-size: 1.1rem;
      color: #546e7a;
      transform: rotate(-0.5deg);
      margin-top: 0.5rem;
    }

    /* Subject badge */
    .badge {
      display: inline-block;
      padding: 0.3rem 0.8rem;
      border-radius: 50px;
      font-family: 'Fredoka', sans-serif;
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      border: 2px solid var(--kid-green);
      background: #e8f5e9;
      color: var(--kid-green-dark);
    }
  </style>
</head>
<body>

  <div class="hero">
    <h1>Title Here</h1>
    <p>Science is an adventure waiting to happen</p>
  </div>
  <div class="rainbow-bar"></div>

  <section>
    <div class="card">
      <span class="badge">Biology</span>
      <h2>Section Heading</h2>
      <p>Content about an exciting scientific concept, presented with bright colors, bold typography, and the enthusiasm of a science museum exhibit. Everything is designed to make learning feel like play.</p>
      <div class="fun-fact">
        <p>A butterfly tastes with its feet! Their taste sensors are located on the bottom of their legs.</p>
      </div>
      <p class="note">* Remember to wear your safety goggles!</p>
      <a href="#" class="btn">Try the Experiment</a>
    </div>
  </section>

</body>
</html>

← Zurück zu den Designs